Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jレコードの読み込み
lightning:recordForm を使用したレコードの表示
lightning:recordForm を使用してレコードを表示するには、レコード ID とオブジェクト API 名を指定します。また、fields 属性または layoutType 属性を使用して項目を定義します。レコードは、mode 属性によって 2 つのモードで表示できます。
- view
- インライン編集が有効な出力項目を使用してフォームを読み込みます。編集可能な項目には編集アイコンが表示されています。ユーザが編集アイコンをクリックすると、フォームで編集可能な項目の編集ができる状態になり、フォームに [キャンセル] ボタンと [保存] ボタンが表示されます。これは、レコード ID が供給された場合のデフォルトモードです。
- readonly
- 出力項目のみでフォームを読み込みます。フォームには、編集アイコン、[キャンセル] ボタン、および [保存] ボタンは表示されません。
次の例では、フルレイアウトよりも項目が少ないコンパクトレイアウトを使用して、view モードで取引先レコードを表示しています。columns 属性は、レコード項目を同じ幅の 2 つの列に表示します。レコード ID を自分の ID に更新します。
1<aura:component>
2 <lightning:recordForm
3 recordId="001XXXXXXXXXXXXXXX"
4 objectApiName="Account"
5 layoutType="Compact"
6 columns="2"/> />
7</aura:component>レコードページで項目値を表示するには、flexipage:availableForRecordHome と flexipage:hasRecordId を実装します。コンポーネントは、レコード ID を自動的に継承します。
次の例では、Name 項目と Industry 項目の参照のみの値を表示します。この例を、取引先レコードページに追加します。
1<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
2 <aura:attribute name="recordId" type="String" />
3 <lightning:recordForm recordId="{!v.recordId}"
4 objectApiName="Account"
5 mode="readonly"
6 fields="Name, Industry" />fields 属性と layoutType 属性の両方を使用した場合は、項目の表示順序は保証されません。項目の順序を指定するには、layoutType 属性なしで fields 属性のみを指定してください。または、次のセクションで説明するように lightning:recordViewForm コンポーネントを使用します。
lightning:recordViewForm を使用したカスタムレイアウトレコードの作成
カスタムレイアウトで参照のみのレコードを表示するには、lightning:recordViewForm コンポーネントを使用します。フォームフィールドを作成するには、fieldName 属性を使用して Salesforce 項目にマッピングされる lightning:outputField コンポーネントを使用します。個別の項目を含めることで、Lightning Design System のユーティリティクラス (グリッドシステムなど) を使用したカスタムレイアウトをデザインできます。
1<aura:component>
2 <lightning:recordViewForm recordId="001XXXXXXXXXXXXXXX"
3 objectApiName="Account">
4 <div class="slds-grid">
5 <div class="slds-col slds-size_2-of-3">
6 <lightning:outputField fieldName="Name" />
7 <lightning:outputField fieldName="Phone" />
8 </div>
9 <div class="slds-col slds-size_1-of-3">
10 <lightning:outputField fieldName="Industry" />
11 <lightning:outputField fieldName="AnnualRevenue" />
12 </div>
13 </div>
14</lightning:recordViewForm>
15</aura:component>レコードの表示時に lightning:recordForm や lightning:recordViewForm では行えないカスタマイズが必要な場合には、force:recordData の使用を検討してください。
force:recordData を使用したカスタムユーザインターフェースでのレコードの表示
- 読み込むレコードの ID
- 読み込んだレコードを割り当てるコンポーネント属性
- 読み込む項目のリスト
読み込む項目のリストを指定するには、fields 属性を使用します。たとえば、fields="Name,BillingCity,BillingState" です。
または、layoutType 属性を使用してレイアウトを指定することもできます。そのレイアウトのすべての項目がレコードに読み込まれます。レイアウトは、プロファイルのページレイアウトの割り当てに応じて異なります。たとえば、マーケティングユーザプロファイルを使用するユーザにデフォルトの取引先レイアウトが割り当てられている場合、そのユーザはそのレイアウトのすべての項目を使用できます。レイアウトは通常システム管理者が変更するため、特定の項目を要求する場合 layoutType は fields ほど柔軟ではありません。layoutType を使用してレコードデータを読み込むと、コンポーネントをレイアウト定義に適合させることができます。layoutType の有効な値は、FULL および COMPACT です。
システム管理者がレイアウトにその項目を追加したかどうかにかかわらず、オブジェクトの項目を取得するには、fields 属性を使用して名前で項目を要求します。特定の項目をコンポーネントで常に使用できるようにするには、レイアウトのすべての項目を取得し、さらにその項目を指定します。
targetRecord には、要求された layoutType に関連する項目、または fields 属性に一覧表示される項目を含む現在のレコードが入力されます。targetFields には、読み込まれたレコードの簡易ビューが入力されます。たとえば Name 項目の場合、v.targetRecord.fields.Name.value は v.targetFields.Name に相当します。
レコードの読み込み
次の例は、Lightning データサービスを使用し��レコードの読み込みの要点を示しています。このコンポーネントは、Lightning アプリケーションビルダーのレコードホームページに追加するか、カスタムアクションとして追加することができます。レコード ID は、force:hasRecordId インターフェースによって追加される暗黙的な recordId 属性によって指定されます。
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 targetFields="{!v.simpleRecord}"
10 targetError="{!v.recordError}"
11 recordUpdated="{!c.handleRecordUpdated}"
12 />
13
14 <!-- Display a lightning card with details about the record -->
15 <div class="Record Details">
16 <lightning:card iconName="standard:account" title="{!v.simpleRecord.Name}" >
17 <div class="slds-p-horizontal--small">
18 <p class="slds-text-heading--small">
19 <lightning:formattedText title="Billing City" value="{!v.simpleRecord.BillingCity}" /></p>
20 <p class="slds-text-heading--small">
21 <lightning:formattedText title="Billing State" value="{!v.simpleRecord.BillingState}" /></p>
22 </div>
23 </lightning:card>
24 </div>
25
26 <!-- Display Lightning Data Service errors, if any -->
27 <aura:if isTrue="{!not(empty(v.recordError))}">
28 <div class="recordError">
29 {!v.recordError}</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 console.log("You loaded a record in " +
8 component.get("v.simpleRecord.Industry"));
9 } else if(eventParams.changeType === "CHANGED") {
10 // record is changed
11 } else if(eventParams.changeType === "REMOVED") {
12 // record is deleted
13 } else if(eventParams.changeType === "ERROR") {
14 // there’s an error while loading, saving, or deleting the record
15 }
16 }
17})レコードを読み込むか更新する場合に、JavaScript コントローラでレコードの項目にアクセスするには、component.get("v.simpleRecord.fieldName") 構文を使用します。
force:recordData は、サーバーにアクセスしてデータを取得する場合があるため、意図的にデータを非同期で読み込みます。レコードがいつ読み込まれたかまたは変更されたかを追跡するには、前の例で示されているように recordUpdated イベントを使用します。または、targetRecord または targetFields に提供されている属性に変更ハンドラを配置することもできます。