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

環境
Salesforce

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

1.accountCreator.html

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<template>
<lightning-card>
<lightning-record-form
object-api-name={objectApiName}
fields={fields}
onsuccess={handleSuccess}>
</lightning-record-form>
</lightning-card>
</template>
<template> <lightning-card> <lightning-record-form object-api-name={objectApiName} fields={fields} onsuccess={handleSuccess}> </lightning-record-form> </lightning-card> </template>
<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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 { 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 { 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);
    }
}

 

IT

Posted by arkgame