Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jAura コンポーネントを使用したフローフッターのカスタマイズ
デフォルトでは、使用可能なアクションが標準ボタンとしてフローフッターに表示されます。[次へ] と [完了] では brand バリエーションのスタイル、[前へ] と [一時停止] では neutral バリエーションが使用されます。また、[一時停止] は左に、残りのボタンは右にフロート表示されます。
例
このコンポーネント (c:flowFooter) は、デフォルトのフローフッターを 2 通りの方法でカスタマイズします。
- [一時停止] ボタンと [前へ] ボタンが入れ替り、[前へ] は左に、[一時停止] は [次へ] または [完了] の右にフロート表示されます。
- [完了] ボタンの表示ラベルが [完了] に変わります。
c:flowFooter コンポーネント
このコンポーネントでは lightning:availableForFlowScreens が実装されるため、画面の有効なアクションが含まれている availableActions 属性にアクセスすることができます。canPause や canBack などの宣言された属性で、表示されるボタンが決まります。それらの属性は、コンポーネントが初期化されるときに JavaScript コントローラによって設定されます。
c:flowFooter コントローラ
init 関数では、画面の使用可能なアクションをループ処理し、コンポーネントに表示するボタンが決定されます。ユーザがフッターのいずれかのボタンをクリックすると、onButtonPressed 関数が navigateFlow アクションをコールして、そのアクションが実行されます。
子コンポーネントからの画面ナビゲーションの制御
子コンポーネントを使用して画面のナビゲーションを処理する場合、lightning:availableForFlowScreens を実装する親コンポーネントから、navigateFlow アクションと availableActions 属性を渡します。子コンポーネントの属性を設定して使用可能なアクションを渡すことができますが、アクションを渡すことはできません。代わりに、カスタムイベントを使用して、選択したアクションを親コンポーネントに送信できます。
例
c:navigateFlow イベント
選択したアクションをイベントに渡せるように、アクション属性を指定してイベントを作成します。
c:flowFooter コンポーネント
- 属性を定義して画面の使用可能なアクションを親コンポーネントから渡します。
- イベントを登録して navigateFlow アクションを親コンポーンネントに渡します。
c:flowFooter コントローラ
navigateFlow は親コンポーネントでしか使用できないため、onButtonPressed 関数は失敗します。onButtonPressed 関数を更新して、navigateFlowEvent が代わりに起動されるようにします。
c:flowParent コンポーネント
親コンポーネントのマークアップで、availableActions を子コンポーネントの availableActions 属性に、handleNavigate 関数を子コンポーネントの navigateFlowEvent イベントに渡します。
c:flowParent コントローラ
navigateFlowEvent が子コンポーネントで起動されると、子コンポーネントで選択されたアクションを使用して、handleNavigate 関数が親コンポーネントの navigateFlow アクションをコールします。