JavaScript lightning-record-*-form コンポーネントを使用する方法

2024年9月4日

環境
Salesforce

概要
lightning-record-form 基本コンポーネントは最もシンプルです。
lightning-record-form ではレイアウトを指定でき、
システム管理者は宣言的にフォーム項目を設定できます。
lightning-record-view-form 基本コンポーネントではレコードを表示できます。
lightning-record-edit-form 基本コンポーネントではレコードを編集できます。

1.accountCreator.html

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

説明
マークアップで lightning-record-form を使用することで、Lightning データサービスが提供する
セキュリティとパフォーマンスのメリットをすべて得ることができます。
object-api-name プロパティをバインドして読み込むオブジェクトの種類を指定します。
fields プロパティをバインドしてフォームに表示する項目を指定します。
handleSuccess を success イベントのハンドラーとして設定します。

2.accountCreator.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

Posted by arkgame

関連投稿: