Lightning コンポーネント開発者ガイド
jレコードの読み込み
レコードの読み込みは、Lightning データサービスの操作の中でも最も簡単です。すべてマークアップで達成できます。
Lightning データサービスを使用してレコードを読み込むには、コンポーネントに force:recordData タグを追加します。force:recordData タグで、読み込むレコードの ID、項目のリスト、読み込まれたレコードを割り当てる属性を指定します。force:recordData で次の事項を指定する必要があります。
- 読み込むレコードの ID
- 読み込んだレコードを割り当てるコンポーネント属性
- 読み込む項目のリスト
fields 属性で、読み込む項目のリストを明示的に指定できます。たとえば、fields="Name,BillingCity,BillingState" です。
または、layoutType 属性を使用してレイアウトを指定することもできます。そのレイアウトのすべての項目がレコードに読み込まれます。レイアウトは通常、システム管理者が変更します。layoutType を使用してレコードデータを読み込むと、コンポーネントをこれらのレイアウト定義に適合させることができます。layoutType の有効な値は、FULL および COMPACT です。
レコードの読み込み
次の例は、Lightning データサービスを使用したレコードの読み込みの要点を示しています。このコンポーネントは、Lightning アプリケーションビルダーのレコードホームページに追加するか、カスタムアクションとして追加することができます。レコード ID は、force:hasRecordId インターフェースによって追加される暗黙的な recordId 属性によって指定されます。
ldsLoad.cmp
1<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader, force:hasRecordId">
2
3 <aura:attribute name="record" type="Object"/>
4 <aura:attribute name="simpleRecord" type="Object"/>
5 <aura:attribute name="recordError" type="String"/>
6
7 <force:recordData aura:id="recordLoader"
8 recordId="{!v.recordId}"
9 layoutType="FULL"
10 targetRecord="{!v.record}"
11 targetFields="{!v.simpleRecord}"
12 targetError="{!v.recordError}"
13 recordUpdated="{!c.handleRecordUpdated}"
14 />
15
16 <!-- Display a header with details about the record -->
17 <div class="slds-page-header" role="banner">
18 <p class="slds-text-heading_label">{!v.simpleRecord.Name}</p>
19 <h1 class="slds-page-header__title slds-m-right_small
20 slds-truncate slds-align-left">{!v.simpleRecord.BillingCity}, {!v.simpleRecord.BillingState}</h1>
21 </div>
22
23 <!-- Display Lightning Data Service errors, if any -->
24 <aura:if isTrue="{!not(empty(v.recordError))}">
25 <div class="recordError">
26 <ui:message title="Error" severity="error" closable="true">
27 {!v.recordError}
28 </ui:message>
29 </div>
30 </aura:if>
31</aura:component>1({
2 handleRecordUpdated: function(component, event, helper) {
3 var eventParams = event.getParams();
4 if(eventParams.changeType === "LOADED") {
5 // record is loaded (render other component which needs record data value)
6 console.log("Record is loaded successfully.");
7 } else if(eventParams.changeType === "CHANGED") {
8 // record is changed
9 } else if(eventParams.changeType === "REMOVED") {
10 // record is deleted
11 } else if(eventParams.changeType === "ERROR") {
12 // there’s an error while loading, saving, or deleting the record
13 }
14 }
15})