Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
j進行状況インジケータをラップしてフローフェーズを表示
フローのフェーズを追跡する場合は、lightning:flow コンポーネントを使用して進行状況インジケータをラップするカスタムコンポーネントを作成して、実行時にフェーズを表示します。フローの有効なフェーズおよび現在のフェーズを表示する場合は進行状況インジケータを使用し、フローの画面を表示する場合は lightning:flow コンポーネントを使用します。フローの有効なフェーズおよび現在のフェーズを進行状況インジケータに渡す場合は、lightning:flow コンポーネントの onstatuschange アクションを使用します。
例
この c:flowStages_global コンポーネントでは、lightning:progressindicator を使用してフローのフェーズを表示し、lightning:flow を使用してフローを表示します。
c:flowStages_global コンポーネント
1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2 <aura:attribute name="currentStage" type="Object"/>
3 <aura:attribute name="activeStages" type="Object[]"/>
4 <!-- Get flow name from the Lightning App Builder -->
5 <aura:attribute name="flowName" type="String"/>
6
7 <aura:handler name="init" value="{!this}" action="{!c.init}"/>
8 <article class="slds-card">
9 <lightning:progressIndicator aura:id="progressIndicator"
10 currentStep="{!v.currentStage.name}" type="path"/>
11 <lightning:flow aura:id="flow" onstatuschange="{!c.statusChange}"/>
12 </article>
13</aura:component>c:flowStages_global デザイン
デザインリソースには flowName 属性が含まれていて、Lightning アプリケーションビルダーから開始するフローを指定できます。
1<design:component>
2 <design:attribute name="flowName" label="Flow Name"/>
3</design:component>c:flowStages_global スタイル
1.THIS .slds-path__nav { margin-right: 0; }
2.THIS .slds-path__item:only-child { border-radius: 15rem; }c:flowStages_global コントローラ
コントローラでは flowName 属性を使用して開始するフローが判断されます。
新しい画面が読み込まれるたびに onstatuschange アクションが起動され、コントローラはフローに関するいくつかのパラメータにアクセスできます。currentStage および activeStages パラメータは、関連するフェーズの表示ラベルと名前を返します。
このコンポーネントで onstatuschange が起動されると、コントローラの statusChange メソッドがコールされます。そのメソッドは、フローの currentStage および activeStages パラメータをコンポーネントの属性に渡します。activeStages 属性の各項目で、メソッドは lightning:progressStep コンポーネントをコンポーネントマークアップに追加します。
1({
2 init : function(component, event, helper) {
3 var flow = component.find("flow");
4 flow.startFlow(component.get("v.flowName"));
5 },
6
7 // When each screen loads ...
8 statusChange : function(component, event, helper) {
9 // Pass $Flow.ActiveStages into the activeStages attribute
10 // and $Flow.CurrentStage into the currentStage attribute
11 component.set("v.currentStage", event.getParam("currentStage"));
12 component.set("v.activeStages", event.getParam("activeStages"));
13
14 var progressIndicator = component.find("progressIndicator");
15 var body = [];
16
17 for(let stage of component.get("v.activeStages")) {
18 // For each stage in activeStages...
19 $A.createComponent(
20 "lightning:progressStep",
21 {
22 // Create a progress step where label is the
23 // stage label and value is the stage name
24 "aura:id": "step_" + stage.name,
25 "label": stage.label,
26 "value": stage.name
27 },
28 function(newProgressStep, status, errorMessage) {
29 //Add the new step to the progress array
30 if (status === "SUCCESS") {
31 body.push(newProgressStep);
32 }
33 else if (status === "INCOMPLETE") {
34 // Show offline error
35 console.log("No response from server or client is offline.")
36 }
37 else if (status === "ERROR") {
38 // Show error message
39 console.log("Error: " + errorMessage);
40 }
41 }
42 );
43 }
44 progressIndicator.set("v.body", body);
45 }
46})