Lightning コンポーネント開発者ガイド
jLightning コンポーネントを使用したフローヘッダーのカスタマイズ
フローヘッダーを Lightning コンポーネントに置き換えるには、lightning:availableForFlowScreens インターフェースか�� screenHelpText パラメータを使用します。
デフォルトでは、フローヘッダーには実行されているフローのタイトルと、ユーザが画面レベルのヘルプにアクセスできるボタンが含まれます。
例
このコンポーネント (c:flowHeader) は、フロータイトルとヘルプボタンを表示する代わりに、会社のロゴとヘルプボタンを表示します。ヘルプテキストは、ユーザがクリックしたときにモーダルに表示されるのではなく、マウスポインタを置くとツールチップに表示されます。
c:flowHeader コンポーネント
このコンポーネントでは lightning:availableForFlowScreens が実装されるため、画面のヘルプテキストが含まれている (ある場合) screenHelpText 属性にアクセスすることができます。
1<aura:component access="global" implements="lightning:availableForFlowScreens">
2
3 <div class="slds-p-top_medium slds-clearfix">
4 <div class="slds-float_left">
5 <!-- Display company logo -->
6 <h2><img src="{!$Resource.Logo}" alt="A.W. Computing logo"/></h2>
7 </div>
8 <div class="slds-float_right" style="position:relative;">
9 <aura:if isTrue="{!v.screenHelpText ne null}">
10 <!-- If the screen has help text, display an info icon in the header.
11 On hover, display the screen's help text -->
12 <lightning:helptext content="{!v.screenHelpText}" />
13 </aura:if>
14 </div>
15 </div>
16</aura:component>