JavaScript lightning-record-*-form コンポーネントを使用する方法
環境
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); } }