lightning:path (ベータ)
選択リスト項目とパス設定メタデータによって決定されるパスを表示します。このコンポーネントでは、API 41.0 以降が必要です。
lightning:path コンポーネントは、[設定] の [パス設定] で指定された選択リスト項目に基づくプロセスの進行状況を表示します。パスは、横棒として表示され、各選択リスト項目は V 字形で示されます。パスの下には、主要な項目と成功へのガイダンスが表示されます。
次の例では、どのフェーズがクリックされたかに応じてパスのバリエーションを変更します。
1<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" >
2 <aura:attribute name="variant" type="String" default="non-linear"/>
3 <aura:attribute name="hideUpdateButton" type="Boolean" default="false"/>
4 <lightning:path aura:id="path" recordId="{!v.recordId}"
5 variant="{!v.variant}"
6 hideUpdateButton="{!v.hideUpdateButton}"
7 onselect="{!c.handleSelect}"
8 />
9</aura:component>クライアント側コントローラは、クリックされたステップ名を含むトーストを表示します。
1({
2 handleSelect : function (component, event, helper) {
3 var stepName = event.getParam("detail").value;
4 var toastEvent = $A.get("e.force:showToast");
5 toastEvent.setParams({
6 "title": "Success!",
7 "message": "Toast from " + stepName
8 });
9 toastEvent.fire();
10 }
11})使用上の考慮事項
無効な属性値が使用されると、コンポーネントの代わりにエラーが表示されます。
force:hasRecordId インターフェースを実装すると、現在表示されているレコードのレコード ID がコンポーネントに提供されます。Lightning アプリケーションビルダーでコンポーネントを使用できるようにするには、flexipage:availableForAllPageTypes インターフェースを実装すると、システム管理者が簡単にコンポーネントを Lightning ページにドラッグアンドドロップできるようになります。
Salesforce アプリケーションでパスコンポーネントを使用するには、カスタムタブに表示します。
属性
| 属性名 | 属性型 | 説明 | 必須かどうか |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| recordId | String | レコードの ID。 | |
| variant | String | パスの外観を変更します。線形または非線形の形式を選択します。線形のパスでは、完了したステップにはチェックマークが表示されます。非線形のパスでは、完了したステップにはステップ名が表示されます。デフォルトでは線形のパスが表示されます。 | |
| hideUpdateButton | Boolean | パスの横に [完了としてマーク] ボタンを表示するかどうかを指定します。true の場合、ボタンは表示されません。デフォルトでは、[完了としてマーク] ボタンは表示されます。 | |
| onselect | Action | パスのステップがクリックされたときにトリガされるアクション。 |