lightning-record-form を使用して取引先責任者を作成例を紹介します。
contactCreator.html
<template>
<lightning-card>
<lightning-record-form
object-api-name={objectApiName}
fields={fields}
onsuccess={handleSuccess}>
</lightning-record-form>
</lightning-card>
</template>
contactCreator.js
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
export default class ContactCreator extends LightningElement {
objectApiName = CONTACT_OBJECT;
fields = [FIRSTNAME_FIELD, LASTNAME_FIELD, EMAIL_FIELD];
handleSuccess(event) {
const toastEvent = new ShowToastEvent({
title: "Contact created",
message: "Record ID: " + event.detail.id,
variant: "success"
});
this.dispatchEvent(toastEvent);
}
}
contactCreator.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
設定 をクリックして [設定] を選択します。
[クイック検索] ボックスに「Lightning アプリケーションビルダー」(Lightning App Builder)と入力し、[Lightning アプリケーションビルダー] を選択します。
Lightning ページを作成します。
[新規] (New)をクリックします。
[アプリケーションページ] (App Page)を選択し、[次へ] をクリックします。
[表示ラベル] に「Working with Data」(データの操作) と入力し、[次へ] をクリックします。
レイアウトで [ヘッダーと左サイドバー] (Header and Left Sidebar)を選択します。
[完了] (Finish)をクリックします。
contactCreator コンポーネントをページサイドバーにドラッグします。
ページを保存(Save)します。
ページを有効化します。デフォルトのアプリケーション名 (Working with Data) のままで [保存] (Save)をクリックします。
ページをナビゲーションメニューに追加するように要求されたら、[完了] (Finish)をクリックします。
新しいページを開きます。アプリケーションランチャーの検索で「work」と入力し、[Working with Data (データの操作)] を選択します。
データを登録します。
First name: Lisa
Last name: Jones
Email: ljones@developer.com