lightning-record-formの使い方について

概要

lightning-record-formの使い方について記載する。

データを登録するとき

こんな感じ。

accountCreator.html

<template>
    <lightning-card>
        <lightning-record-form object-api-name={objectName} fields={fields} onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

accountCreator.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT from '@salesforce/schema/Account';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_REVENUE from '@salesforce/schema/Account.AnnualRevenue';

export default class AccountCreator extends LightningElement {

    objectName = ACCOUNT;
    fields = [ACCOUNT_NAME, ACCOUNT_REVENUE];

    handleSuccess(event) {
        const toast = new ShowToastEvent({
            title: "Account created",
            message: "Record Id:" + event.detail.id,
            variant: "success"
        })
        this.dispatchEvent(toast);
    }

}

データを更新するとき

html側でrecord-idを指定する。

accountCreator.html

<template>
    <lightning-card>
        <lightning-record-form record-id={recordId} object-api-name={objectName} fields={fields} onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

javascript側で@api recordIdを指定する。@api recordIdを指定すると、フレームワークが自動的に対象画面のレコードIDをrecordId変数に格納してくれる。

accountCreator.js

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT from '@salesforce/schema/Account';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_REVENUE from '@salesforce/schema/Account.AnnualRevenue';

export default class AccountCreator extends LightningElement {

    @api recordId;
    objectName = ACCOUNT;
    fields = [ACCOUNT_NAME, ACCOUNT_REVENUE];

    handleSuccess(event) {
        const toast = new ShowToastEvent({
            title: "Account created",
            message: "Record Id:" + event.detail.id,
            variant: "success"
        })
        this.dispatchEvent(toast);
    }

}

モード属性の指定

モード属性を指定すると画面の表示を変えられる。

mode	説明
"view"	閲覧モード。読み取り専用で表示されて、横に編集用の鉛筆マークが出る。
"edit"	編集モード。編集フォームが表示される。
"mode"	読み取り専用モード。読み取り専用で表示されて鉛筆マークが出ない。

モードについては、ここがわかりやすい。
https://qiita.com/hrk623/items/93e1777d1d78ee23a0f1

参考

https://qiita.com/hrk623/items/93e1777d1d78ee23a0f1
https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-and-salesforce-data/use-lightning-data-service-to-work-with-data