lightning-record-edit-form で保存後のレコードの値を取得する【LWC】

この記事では、lightning-record-edit-form で保存後のレコードの値を取得する方法を記述します。
これにより、保存後に親子関係を設定したり、他のレコードに値を設定することが可能になります。

実装例

今回は例として、

取引先責任者レコードページから、取引先を作成する画面を呼び出す
作成した取引先の値を取引先責任者に設定

という状況を考えます。

取引先の作成画面を lightning-record-edit-form で作るのですが、onsuccess={メソッド名} とすることでレコード保存後にメソッドを呼び出すことができます。

<lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
    ...
</lightning-record-edit-form>

保存されたレコードの項目値は event.detail.fields.項目API名.value で取得することができます。
ID値については、event.detail.id でも取得可能です。

import { LightningElement, api } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';

export default class Sample extends LightningElement {
    @api recordId; // 取引先責任者のID値が入る
    hasMessage;

    handleSuccess(event) {
        const fields = {
            "Id": this.recordId,
            "Fax" : event.detail.fields.Fax.value, // 取引先の Fax の値
            "AccountId": event.detail.id // 取引先の ID の値
        };
        const recordInput = { fields };
        // 取引先責任者を更新
        updateRecord(recordInput).then(() => {
            this.hasMessage = true;
        });
    }
}