フロー画面のコンポーネントの設定
lightning:availableForFlowScreens インターフェースを実装して、Flow Builder のフロー画面でカスタム Aura コンポーネントを使用できるようにします。
シンプルな「Hello World」コンポーネントのサンプルコードを次に示します。
1<aura:component implements="lightning:availableForFlowScreens" access="global">
2 <aura:attribute name="greeting" type="String" access="global" />
3 <aura:attribute name="subject" type="String" access="global" />
4
5 <div style="box">
6 <span class="greeting">{!v.greeting}</span>, {!v.subject}!
7 </div>
8</aura:component>Flow Builder で属性の値をカスタマイズできるようにするには、属性をコンポーネントのデザインリソースに追加します。そうすると、フロー管理者はコアアクション要素を設定するときに、属性とフローの間で値を渡すことができるようになります。そうすると、フロー管理者は画面コンポーネントを設定するときに、属性とフローの間で値を渡すことができるようになります。
このサンプルデザインリソースを使用して、フロー管理者は「Hello World」コンポーネントの属性の値をカスタマイズできます。
1<design:component label="Hello World">
2 <design:attribute name="greeting" label="Greeting" />
3 <design:attribute name="subject" label="Subject" />
4</design:component>デザインリソースには、Lightning コンポーネントの設計時の動作 (ページまたはアプリケーションへのコンポーネントの追加を可能にするためにビジュアルツールが必要とする情報) が記述されます。このリソースの追加は、Lightning アプリケーションビルダーでのリソースの追加と似ています。
管理者はフローでこのコンポーネントを参照するときに、フローからの値を使用して��属性を設定できます。また、各属性の出力値をフロー変数に保存できます。