レコードの保存
Lightning データサービスを使用してレコードを保存するには、force:recordData コンポーネントの saveRecord をコールして、保存操作の完了後に呼び出されるコールバック関数を渡します。
Lightning データサービスの保存操作は、次の 2 つの状況で行われます。
- 変更を既存のレコードに保存する場合
- 新しいレコードを作成して保存する場合
変更を既存のレコードに保存するには、最初にレコードを EDIT モードで読み込みます。次に、force:recordData コンポーネントの saveRecord をコールします。これらの手法については、後続のセクションで説明します。
新しいレコードを保存するにはまず作成する必要があるため、「レコードの作成」に記載のとおり、最初にレコードテンプレートからレコードを作成します。次に、次のセクションに記載のとおり、force:recordData コンポーネントの saveRecord をコールします。
EDIT モードのレコードの読み込み
更新される可能性のあるレコードを読み込むには、force:recordData タグの mode 属性を「EDIT」に設定します。mode を明示的に設定すること以外は、編集するレコードの読み込みも他の目的の読み込みと同じです。
saveRecord のコールによるレコードの変更の保存
実際の保存操作を実行するには、適切なコントローラアクションハンドラから、force:recordData コンポーネントの saveRecord をコールします。saveRecord は、操作の完了時に呼び出されるコールバック関数という 1 つの引数を取ります。このコールバック関数は、その唯一のパラメータとして SaveRecordResult オブジェクトを受け取ります。SaveRecordResult には、操作の成否や、結果の処理に使用できるその他の詳細を示す state 属性が含まれます。
レコードの保存
次の例は、Lightning データサービスを使用したレコードの保存の要点を示しています。この例は、レコードページで使用されることを意図しています。レコード ID は、force:hasRecordId インターフェースによって追加される暗黙的な recordId 属性によって指定されます。
ldsSave.cmp
このコンポーネントは、EDIT モードに設定された force:recordData を使用してレコードを読み込み、レコードの値を編集するためのフォームを提供します(この単純な例では、レコード名項目のみです)。
1<aura:component
2 implements="flexipage:availableForRecordHome,force:hasRecordId">
3
4 <aura:attribute name="record" type="Object" access="private"/>
5 <aura:attribute name="recordError" type="String" access="private"/>
6
7 <force:recordData aura:id="recordHandler"
8 recordId="{!v.recordId}"
9 layoutType="FULL"
10 targetRecord="{!v.record}"
11 targetError="{!v.recordError}"
12 mode="EDIT"
13 />
14
15 <!-- Display a header with details about the record -->
16 <div class="slds-page-header" role="banner">
17 <p class="slds-text-heading--label">Edit Record</p>
18 <h1 class="slds-page-header__title slds-m-right--small
19 slds-truncate slds-align-left">{!v.record.Name}</h1>
20 </div>
21
22 <!-- Display Lightning Data Service errors, if any -->
23 <aura:if isTrue="{!not(empty(v.recordError))}">
24 <div class="recordError">
25 <ui:message title="Error" severity="error" closable="true">
26 {!v.recordError}
27 </ui:message>
28 </div>
29 </aura:if>
30
31 <!-- Display an editing form -->
32 <lightning:input aura:id="recordName" name="recordName" label="Name"
33 value="{!v.record.Name}" required="true"/>
34
35 <lightning:button label="Save Record" onclick="{!c.handleSaveRecord}"
36 variant="brand" class="slds-m-top--medium"/>
37
38</aura:component>
ldsSaveController.js
この例の handleSaveRecord アクションは最小限のものです。フォームの検証や実際のエラー処理はありません。フォームに入力された内容はすべて、レコードへの保存の対象になります。
1({
2 handleSaveRecord: function(component, event, helper) {
3 component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
4 if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
5
6 // Saved! Show a toast UI message
7 var resultsToast = $A.get("e.force:showToast");
8 resultsToast.setParams({
9 "title": "Saved",
10 "message": "The record was updated."
11 });
12 resultsToast.fire();
13
14 // Reload the view so components not using force:recordData
15 // are updated
16 $A.get("e.force:refreshView").fire();
17 }
18 else if (saveResult.state === "INCOMPLETE") {
19 console.log("User is offline, device doesn't support drafts.");
20 }
21 else if (saveResult.state === "ERROR") {
22 console.log('Problem saving record, error: ' +
23 JSON.stringify(saveResult.error));
24 }
25 else {
26 console.log('Unknown problem, state: ' + saveResult.state +
27 ', error: ' + JSON.stringify(saveResult.error));
28 }
29 }));
30 },
31
32})