Lightning コンポーネント開発者ガイド
jLightning コンポーネントを使用したフローフッターのカスタマイズ
フローフッターを Lightning コンポーネントに置き換えるには、lightning:availableForFlowScreens が提供するパラメータを使用します。availableActions 配列に、画面で使用可能なアクションが表示され、navigateFlow アクションで使用可能なアクションのいずれかを呼び出すことができます。
デフォルトでは、使用可能なアクションが標準ボタンとしてフローフッターに表示されます。[次へ] と [完了] では brand バリエーションのスタイル、[前へ] と [一時停止] では neutral バリエーションが使用されます。また、[一時停止] は左に、残りのボタンは右にフロート表示されます。
選択可能なアクション
有効なアクションとデフォルトのボタンの表示ラベルは次のとおりです。
| アクション | ボタンの表示ラベル | 説明 |
|---|---|---|
| NEXT | 次へ | 次の画面に移動する |
| BACK | 前へ | 前の画面に移動する |
| PAUSE | 一時停止 | ユーザが後で再開できるように、インタビューを現在の状態でデータベースに保存する |
| RESUME | 再開 | 一時停止したインタビューを再開する |
| FINISH | 完了 | インタビューを完了する。このアクションは、フローの最終画面より前の画面でしか使用できません。 |
例
このコンポーネント (c:flowFooter) は、デフォルトのフローフッターを 2 通りの方法でカスタマイズします。別の Lightning コンポーネントでこのフッターを使用する場合の例は、「フロー画面全体を Lightning コンポーネントに置換」を参照してください。
- [一時停止] ボタンと [前へ] ボタンが入れ替り、[前へ] は左に、[一時停止] は [次へ] または [完了] の右にフロート表示されます。
- [完了] ボタンの表示ラベルが [完了] に変わります。
c:flowFooter コンポーネント
1<aura:component access="global" implements="lightning:availableForFlowScreens">
2 <!-- Get available actions from parent cmp -->
3 <aura:attribute name="actions" type="String[]" />
4 <aura:registerEvent name="navigateFlowEvent" type="c:navigateFlow"/>
5
6 <!-- Determine which actions are available -->
7 <aura:attribute name="canPause" type="Boolean" />
8 <aura:attribute name="canBack" type="Boolean" />
9 <aura:attribute name="canNext" type="Boolean" />
10 <aura:attribute name="canFinish" type="Boolean" />
11 <aura:attribute name="cmpClass" type="String" />
12 <aura:handler name="init" value="{!this}" action="{!c.init}" />
13
14 <div aura:id="actionButtonBar" class="slds-clearfix slds-p-top_medium">
15 <!-- If Previous is available, display to the left -->
16 <div class="slds-float_left">
17 <aura:if isTrue="{!v.canBack}">
18 <lightning:button aura:id="BACK" label="Previous"
19 variant="neutral" onclick="{!c.onButtonPressed}" />
20 </aura:if>
21 </div>
22 <div class="slds-float_right">
23 <!-- If Pause, Next, or Finish are available, display to the right -->
24 <aura:if isTrue="{!v.canPause}">
25 <lightning:button aura:id="PAUSE" label="Pause"
26 variant="neutral" onclick="{!c.onButtonPressed}" />
27 </aura:if>
28 <aura:if isTrue="{!v.canNext}">
29 <lightning:button aura:id="NEXT" label="Next"
30 variant="brand" onclick="{!c.onButtonPressed}" />
31 </aura:if>
32 <aura:if isTrue="{!v.canFinish}">
33 <lightning:button aura:id="FINISH" label="Done"
34 variant="brand" onclick="{!c.onButtonPressed}" />
35 </aura:if>
36 </div>
37 </div>
38</aura:component>c:flowFooter コントローラ
JavaScript コントローラによって表示されるアクションが決まります。ユーザがフッターのいずれかのボタンをクリックすると、コントローラは navigateFlow を使用して、そのアクションを起動します。
1({
2 init : function(cmp, event, helper) {
3 // Figure out which buttons to display
4 var availableActions = cmp.get('v.actions');
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 actionFired = event.getSource().getLocalId();
21 // Fire that action
22 var event = cmp.getEvent("navigateFlowEvent");
23 event.setParam("action", actionFired);
24 event.fire();
25 }
26})