Salesforce Lightning データサービスを使用したデータの操作サンプル

2024年9月26日

環境
Lightning Web コンポーネント

概要
lightning-record-form ではレイアウトを指定でき、
システム管理者は宣言的にフォーム項目を設定できます。
Lightning Web サービスで 1 件のレコードを操作する場合、
lightning-record-*-form コンポーネントを使用するのが最も簡単な方法です。

使用例
lightning-record-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);
   }
}

説明
「import xxx」でファイルの冒頭で取引先オブジェクトと
その項目への参照をインポートします。
success イベントの handleSuccess イベントハンドラーを定義します。
handleSuccess は、保存操作が成功すると実行されます。
ShowToastEvent を起動してトーストメッセージを表示します。
event.detail.id は新しく作成されたレコードの id への参照です。