[Salesforce]lightning-record-form を使用して取引先責任者を作成

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