この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

レコードの編集

レコードを編集できるフォームを編集するための最も簡単な方法は、lightning:recordForm コンポーネントを使用することです。フォームのレイアウトをカスタマイズしたり、カスタマイズ値を事前に読み込んだりしたい場合には、lightning:recordEditForm を使用してください。フォームベースのコンポーネントではできないカスタマイズが必要な場合には、force:recordData を使用してください。

lightning:recordForm を使用したレコードの編集

lightning:recordForm を使用してレコードを編集するには、レコード ID とオブジェクト API 名を指定します。レコード ID を指定した場合は、view モードがこのコンポーネントのデフォルトモードとなり、項目に編集アイコンが表示されます。編集アイコンをクリックすると、すべての項目が編集可能になります。

次の例では、編集アイコンをクリックすると取引先レコードの項目が更新可能になるフォームを作成しています。2 列のコンパクトレイアウトで項��を表示します。このコンポーネント例を、取引先レコードページに追加します。コンポーネントは、force:hasRecordId によってレコード ID を継承します。

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2    <lightning:recordForm 
3        recordId = "{!v.recordId}"
4        objectApiName="Account"
5        layoutType="Compact"
6        columns="2" />
7</aura:component>

レコードが正常に保存されると、項目値が変更されたすべてのコンポーネントが自動的に更新されます。

フォームに mode="edit" を追加して、編集用の入力項目を表示するようにフォームを変更します。フォームには、レコードを更新するための [保存] ボタンと、変更内容を破棄するための [キャンセル] ボタンがあります。

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2    <lightning:recordForm
3        recordId = "{!v.recordId}"
4        objectApiName="Account"
5        layoutType="Compact"
6        mode="edit" />
7</aura:component>

lightning:recordForm でのエラー処理のカスタマイズ

レコードが正常に保存された場合の動作をカスタマイズするには、onsuccess イベントハンドラを使用します。エラーは自動的に処理されて表示されます。エラーの処理をカスタマイズするには、onerror イベントハンドラを使用します。

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2
3    <!-- Displays a toast notification -->
4    <lightning:notificationsLibrary aura:id="notifLib" />
5    <lightning:recordForm
6        recordId = "{!v.recordId}"
7        objectApiName="Account"
8        layoutType="Compact"
9        mode="edit" 
10        onsuccess="{!c.handleSuccess}"
11        onerror="{!c.handleError}"/>
12</aura:component>

レコードが正常に保存されるか、または保存中にエラーが発生すると、トースト通知が表示されます。

1({
2    handleSuccess: function (cmp, event, helper) {
3        cmp.find('notifLib').showToast({
4            "title": "Record updated!",
5            "message": "The record "+ event.getParam("id") + " has been updated successfully.",
6            "variant": "success"
7        });
8    },
9
10    handleError: function (cmp, event, helper) {
11        cmp.find('notifLib').showToast({
12            "title": "Something has gone wrong!",
13            "message": event.getParam("message"),
14            "variant": "error"
15        });
16    }
17})

詳細は、「lightning:recordForm」を参照してください。

メモ

lightning:recordEditForm を使用したカスタムレイアウトレコードの編集

フォーム項目のカスタムレイアウトを指定するには、lightning:recordEditForm コンポーネントを使用します。

レコード項目種別に基づいて入力コントロールを表示する lightning:inputField に項目を渡します。

次の例では、カスタムレイアウトを使用した、2 つの項目を持つフォームを表示しています。このコンポーネント例を、取引先レコードページに追加します。

1<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
2    <lightning:recordEditForm 
3        recordId="{!v.recordId}"
4        objectApiName="Account">
5        <lightning:messages />
6            <div class="slds-grid">
7                <div class="slds-col slds-size_1-of-2">
8                    <lightning:inputField fieldName="Name"/>
9                </div>
10                <div class="slds-col slds-size_1-of-2">
11                    <lightning:inputField fieldName="Industry"/>
12                </div>
13            </div>
14        <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
15    </lightning:recordEditForm>
16</aura:component>

サーバエラーが発生すると、lightning:recordEditForm は lightning:messages コンポーネントを使用して、フォーム項目の上にエラーメッセージを表示します。もしくは、onerror イベントハンドラを使用して、エラー処理方法を定義します。

lightning:recordForm にはなくて lightning:recordEditForm だけにある、もう 1 つの機能は、次のセクションで説明するカスタム項目値でのフォームの表示です。

項目値の事前読み込み

フォームの表示時にカスタム項目値を表示するには、lightning:inputField で value 属性を使用します。レコード ID を事前に読み込む場合、レコードを読み込んだときに返されるレコード ID によってカスタム値が上書きされることはありません。

あるいは、項目値を次の構文で設定します。

1cmp.find("nameField").set("v.value", "My New Account Name");

詳細は、「lightning:recordEditForm」を参照してください。

メモ

レコードの作成時に lightning:recordForm や lightning:recordEditForm では行えないカスタマイズが必要な場合には、force:recordData の使用を検討してください。

force:recordData を使用したカスタムユーザインターフェース経由でのレコードの編集

force:recordDataを使用してレコードを編集して保存するには、saveRecord を呼び出して、保存操作の完了後に呼び出されるコールバック関数を渡します。保存操作は、次の 2 つの状況で行われます。

変更を既存のレコードに保存する場合
新しいレコードを作成して保存する場合

変更を既存のレコードに保存するには、レコードを EDIT モードで読み込み、force:recordData コンポーネントの saveRecord をコールします。

新しいレコードを保存するには作成する必要があるため、「レコードの作成」に記載のとおり、レコードテンプレートからレコードを作成します。次に、force:recordData コンポーネントの saveRecord をコールします。

EDIT モードのレコードの読み込み

更新される可能性のあるレコードを読み込むには、force:recordData タグの mode 属性を「EDIT」に設定します。mode を明示的に設定すること以外は、編集するレコードの読み込みも他の目的の読み込みと同じです。

Lightning データサービスのレコードは複数のコンポーネントで共有されるため、レコードを読み込むと、直接参照ではなくレコードのコピーを使用してコンポーネントが提供されます。コンポーネントがレコードを view モードで読み込む場合、そのレコードが変更されると、Lightning データサービスはそのコピーをレコードの新しいコピーで自動的に上書きします。レコードが EDIT モードで読み込みれる場合、レコードが変更されてもそのレコードは更新されません。この動作は、レコードの編集中にそのレコードを参照するコンポーネントで未保存の変更が表示されることを防ぎ、処理中の編集が上書きされることを防ぎます。ただし、通知は両方のモードで送信されます。

メモ

saveRecord のコールによるレコードの変更の保存

保存操作を実行するには、適切なコントローラアクションハンドラから、force:recordData コンポーネントの saveRecord をコールします。saveRecord メソッドは、操作の完了時に呼び出されるコールバック関数という 1 つの引数を取ります。このコールバック関数は、その唯一のパラメータとして SaveRecordResult オブジェクトを受け取ります。SaveRecordResult には、操作の成否や、結果の処理に使用できるその他の詳細を示す state 属性が含まれます。

レコードの保存

次の例は、Lightning データサービスを使用したレコードの保存の要点を示しています。この例は、レコードページで使用されることを意図しています。レコード ID は、force:hasRecordId インターフェースによって追加される暗黙的な recordId 属性によって指定されます。

ldsSave.cmp

1<aura:component implements="flexipage:availableForRecordHome,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="recordHandler"
8      recordId="{!v.recordId}"
9      layoutType="FULL"
10      targetRecord="{!v.record}"
11      targetFields="{!v.simpleRecord}"
12      targetError="{!v.recordError}"
13      mode="EDIT"
14      recordUpdated="{!c.handleRecordUpdated}"
15      />
16
17    <!-- Display a lightning card with details about the record -->
18    <div class="Record Details"> 
19        <lightning:card iconName="standard:account" title="{!v.simpleRecord.Name}" >
20            <div class="slds-p-horizontal--small">
21                <p class="slds-text-heading--small">
22                    <lightning:formattedText title="Billing State" value="{!v.simpleRecord.BillingState}" /></p>
23                <p class="slds-text-heading--small">
24                    <lightning:formattedText title="Billing City" value="{!v.simpleRecord.BillingCity}" /></p>
25            </div>
26        </lightning:card>
27    </div>
28
29    <!-- Display an editing form -->
30    <div class="Record Details">
31        <lightning:card iconName="action:edit" title="Edit Account">
32            <div class="slds-p-horizontal--small">
33               <lightning:input label="Account Name" value="{!v.simpleRecord.Name}"/>
34               <br/>
35               <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
36            </div>
37        </lightning:card>
38    </div>
39    
40    <!-- Display Lightning Data Service errors, if any -->
41    <aura:if isTrue="{!not(empty(v.recordError))}">
42        <div class="recordError">
43            {!v.recordError}</div>
44    </aura:if>
45</aura:component>

姓と名のあるオブジェクト (取引先責任者など) でこのコンポーネントを使用する場合、{!v.simpleRecord.FirstName} と {!v.simpleRecord.LastName} の個別の lightning:input コンポーネントを作成します。

メモ

このコンポーネントは、EDIT モードに設定された force:recordData を使用してレコードを読み込み、レコードの値を編集するためのフォームを提供します (この単純な例では、レコード名項目のみです)。

ldsSaveController.js

1({
2    handleSaveRecord: function(component, event, helper) {
3        component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
4            // use the recordUpdated event handler to handle generic logic when record is changed
5            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
6                // handle component related logic in event handler
7            } else if (saveResult.state === "INCOMPLETE") {
8                console.log("User is offline, device doesn't support drafts.");
9            } else if (saveResult.state === "ERROR") {
10                console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
11            } else {
12                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
13            }
14        }));
15    },
16
17    /**
18     * Control the component behavior here when record is changed (via any component)
19     */
20    handleRecordUpdated: function(component, event, helper) {
21        var eventParams = event.getParams();
22        if(eventParams.changeType === "CHANGED") {
23            // get the fields that changed for this record
24            var changedFields = eventParams.changedFields;
25            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
26            // record is changed, so refresh the component (or other component logic)
27            var resultsToast = $A.get("e.force:showToast");
28            resultsToast.setParams({
29                "title": "Saved",
30                "message": "The record was updated."
31            });
32            resultsToast.fire();
33
34        } else if(eventParams.changeType === "LOADED") {
35            // record is loaded in the cache
36        } else if(eventParams.changeType === "REMOVED") {
37            // record is deleted and removed from the cache
38        } else if(eventParams.changeType === "ERROR") {
39            // there’s an error while loading, saving or deleting the record
40        }
41    }
42})

この例の handleSaveRecord アクションは最小限のものです。フォームの検証や実際のエラー処理はありません。フォームに入力された内容はすべて、レコードへの保存の対象になります。

ページ上で force:recordData のインスタンスを複数作成する場合は、saveRecord ハンドラと recordUpdated ハンドラを必要なだけ使用してください。たとえば、同じレコードを更新する force:recordData のインスタンスを 2 つ作成する場合には、各インスタンスに異なる aura:id を割り当てることで、saveRecord とそれに続く recordUpdated ハンドラが一意に呼び出されるようにします。

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)