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

Lightning コンポーネントを使用したフローフッターのカスタマイズ

フローフッターを Lightning コンポーネントに置き換えるには、lightning:availableForFlowScreens が提供するパラメータを使用します。availableActions 配列に、画面で使用可能なアクションが表示され、navigateFlow アクションで使用可能なアクションのいずれかを呼び出すことができます。

デフォルトでは、使用可能なアクションが標準ボタンとしてフローフッターに表示されます。[次へ] と [完了] では brand バリエーションのスタイル、[前へ] と [一時停止] では neutral バリエーションが使用されます。また、[一時停止] は左に、残りのボタンは右にフロート表示されます。

例

このコンポーネント (c:flowFooter) は、デフォルトのフローフッターを 2 通りの方法でカスタマイズします。

[一時停止] ボタンと [前へ] ボタンが入れ替り、[前へ] は左に、[一時停止] は [次へ] または [完了] の右にフロート表示されます。
[完了] ボタンの表示ラベルが [完了] に変わります。

c:flowFooter コンポーネント

このコンポーネントでは lightning:availableForFlowScreens が実装されるため、画面の有効なアクションが含まれている availableActions 属性にアクセスすることができます。canPause や canBack などの宣言された属性で、表示されるボタンが決まります。それらの属性は、コンポーネントが初期化されるときに JavaScript コントローラによって設定されます。

1<aura:component access="global" implements="lightning:availableForFlowScreens">
2        
3   <!-- Determine which actions are available -->
4   <aura:attribute name="canPause" type="Boolean" />
5   <aura:attribute name="canBack" type="Boolean" />
6   <aura:attribute name="canNext" type="Boolean" />
7   <aura:attribute name="canFinish" type="Boolean" />
8   <aura:handler name="init" value="{!this}" action="{!c.init}" />
9        
10   <div aura:id="actionButtonBar" class="slds-clearfix slds-p-top_medium">
11      <!-- If Previous is available, display to the left -->
12      <div class="slds-float_left">
13         <aura:if isTrue="{!v.canBack}">
14            <lightning:button aura:id="BACK" label="Previous"
15               variant="neutral" onclick="{!c.onButtonPressed}" />
16         </aura:if>
17      </div>
18      <div class="slds-float_right">
19         <!-- If Pause, Next, or Finish are available, display to the right -->
20         <aura:if isTrue="{!v.canPause}">
21            <lightning:button aura:id="PAUSE" label="Pause"
22               variant="neutral" onclick="{!c.onButtonPressed}" />
23         </aura:if>
24         <aura:if isTrue="{!v.canNext}">
25            <lightning:button aura:id="NEXT" label="Next" 
26               variant="brand" onclick="{!c.onButtonPressed}" />
27         </aura:if>
28         <aura:if isTrue="{!v.canFinish}">
29            <lightning:button aura:id="FINISH" label="Done"
30               variant="brand" onclick="{!c.onButtonPressed}" />
31         </aura:if>
32      </div>
33   </div>
34</aura:component>

c:flowFooter コントローラ

init 関数では、画面の使用可能なアクションをループ処理し、コンポーネントに表示するボタンが決定されます。ユーザがフッターのいずれかのボタンをクリックすると、onButtonPressed 関数が navigateFlow アクションをコールして、そのアクションが実行されます。

1({
2   init : function(cmp, event, helper) {
3      // Figure out which buttons to display
4      var availableActions = cmp.get('v.availableActions');
5      for (var i = 0; i < availableActions.length; i++) {
6         if (availableActions[i] == "PAUSE") {
7            cmp.set("v.canPause", true);
8         } else if (availableActions[i] == "BACK") {
9            cmp.set("v.canBack", true);
10         } else if (availableActions[i] == "NEXT") {
11            cmp.set("v.canNext", true);
12         } else if (availableActions[i] == "FINISH") {
13            cmp.set("v.canFinish", true);
14         }
15      }
16   },
17        
18   onButtonPressed: function(cmp, event, helper) {
19      // Figure out which action was called
20      var actionClicked = event.getSource().getLocalId();
21      // Fire that action
22      var navigate = cmp.get('v.navigateFlow');
23      navigate(actionClicked);
24   }
25})

子コンポーネントからの画面ナビゲーションの制御

子コンポーネントを使用して画面のナビゲーションを処理する場合、lightning:availableForFlowScreens を実装する親コンポーネントから、navigateFlow アクションと availableActions 属性を渡します。子コンポーネントの属性を設定して使用可能なアクションを渡すことができますが、アクションを渡すことはできません。代わりに、カスタムイベントを使用して、選択したアクションを親コンポーネントに送信できます。

例

c:navigateFlow イベント

選択したアクションをイベントに渡せるように、アクション属性を指定してイベントを作成します。

1<aura:event type="APPLICATION" >
2   <aura:attribute name="action" type="String"/>
3</aura:event>

c:flowFooter コンポーネント

コンポーネントで、ハンドラが次を行う前に

属性を定義して画面の使用可能なアクションを親コンポーネントから渡します。
イベントを登録して navigateFlow アクションを親コンポーンネントに渡します。

1<aura:attribute name="availableActions" type="String[]" />
2<aura:registerEvent name="navigateFlowEvent" type="c:navigateFlow"/>

c:flowFooter コントローラ

navigateFlow は親コンポーネントでしか使用できないため、onButtonPressed 関数は失敗します。onButtonPressed 関数を更新して、navigateFlowEvent が代わりに起動されるようにします。

1onButtonPressed: function(cmp, event, helper) {
2   // Figure out which action was called
3   var actionClicked = event.getSource().getLocalId();
4
5   // Call that action
6   var navigate = cmp.getEvent("navigateFlowEvent");
7   navigate.setParam("action", actionFired);
8   navigate.fire();
9}

c:flowParent コンポーネント

親コンポーネントのマークアップで、availableActions を子コン��ーネントの availableActions 属性に、handleNavigate 関数を子コンポーネントの navigateFlowEvent イベントに渡します。

1<c:flowFooter availableActions="{!v.availableActions}"
2    navigateFlowEvent="{!c.handleNavigate}"/>

c:flowParent コントローラ

navigateFlowEvent が子コンポーネントで起動されると、子コンポーネントで選択されたアクションを使用して、handleNavigate 関数が親コンポーネントの navigateFlow アクションをコールします。

1handleNavigate: function(cmp, event) {
2   var navigate = cmp.get("v.navigateFlow");
3   navigate(event.getParam("action"));
4}

Lightning コンポーネント開発者ガイド

Lightning コンポーネントを使用したフローフッターのカスタマイズ

例

子コンポーネントからの画面ナビゲーションの制御

例

関連項目: