この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

Visualforce ページでの Lightning フローランタイムの表示

デフォルトでは、Visualforce ページにフローを埋め込むと、フローは Classic ランタイムで表示されます。名前からわかるように、Classic ランタイムの外観や動作は、通常の Visualforce ページと Salesforce Classic デスクトップ環境に類似しています。Visualforce ページの Lightning ランタイムでフローを表示するには、Visualforce ページにフロー Lightning コンポーネントを埋め込みます。

Visualforce ページにフロー Lightning コンポーネントを追加する手順は、次のとおりです。

<apex:includeLightning/> コンポーネントを使用して、Visualforce 用 Lightning コンポーネントの JavaScript ライブラリを Visualforce ページに追加します。
lightning:flow コンポーネントの連動関係を宣言する Lightning アプリケーションを作成して参照します。
$Lightning.createComponent() を使用して、ページにコンポーネントを作成する JavaScript 関数を記述します。

例

1<aura:application access="global" extends="ltng:outApp" >
2    <aura:dependency resource="lightning:flow"/>
3</aura:application>

1<apex:page >
2   <html>
3      <head>
4         <apex:includeLightning />
5      </head>
6      <body class="slds-scope">
7         <div id="flowContainer" />
8         <script>
9            var statusChange = function (event) {
10               if(event.getParam("status") === "FINISHED") {
11                  var outputVariables = event.getParam("outputVariables");
12                  var outputVar;
13                  for(outputVar in outputVariables) {
14                     if(outputVar.name === "redirect") {
15                        // Do something
16                     }
17                  }
18               }
19            };
20            $Lightning.use("c:lightningOutApp", function() {
21               $Lightning.createComponent("lightning:flow", {},
22                  "flowContainer",
23                  function (component) {
24                     // Sets a value for the textVar input variable.
25                     var inputVariables = [
26                        {
27                           name : 'textVar',
28                           type : 'String',
29                           value : "my string value"
30                        }
31                     ];
32                     // Starts an interview in the flowContainer div, and 
33                     // initializes the textVar variable.
34                     component.startFlow("Survey_customers", inputVariables);
35                  }
36               );
37            });
38         </script>
39      </body>
40   </html>
41</apex:page>

Visualforce 開発者ガイド

Visualforce ページでの Lightning フローランタイムの表示

例