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

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

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

lightning:flow コンポーネントの連動関係を宣言する Lightning アプリケーションを作成します。
<apex:includeLightning/> コンポーネントを使用して、Visualforce 用 Lightning コンポーネントの JavaScript ライブラリを Visualforce ページに追加します。
Visualforce ページで、連動関係アプリケーションを参照します。
$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                  // Control what happens when the interview finishes
12 
13                  var outputVariables = event.getParam("outputVariables");
14                  var key;
15                  for(key in outputVariables) {
16                     if(outputVariables[key].name === "myOutput") {
17                        // Do something with an output variable
18                     }
19                  }
20               }
21            };
22            $Lightning.use("c:lightningOutApp", function() {
23               // Create the flow component and set the onstatuschange attribute
24               $Lightning.createComponent("lightning:flow", {"onstatuschange":statusChange},
25                  "flowContainer",
26                  function (component) {
27                     // Set the input variables
28                     var inputVariables = [
29                        {
30                           name : 'myInput',
31                           type : 'String',
32                           value : "Hello, world"
33                        }
34                     ];
35                     
36                     // Start an interview in the flowContainer div, and 
37                     // initializes the input variables.
38                     component.startFlow("myFlowName", inputVariables);
39                  }
40               );
41            });
42         </script>
43      </body>
44   </html>
45</apex:page>

Visualforce 開発者ガイド

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

例