レコードを作成および編集するカスタム UI の作成

lightning-record*form コンポーネントで使用事例に必要な柔軟性が得られない場合は、JavaScript API を使用してレコードを作成および編集する UI を作成します。

JavaScript API を使用する前に、lightning-record*form コンポーネントでニーズが満たされるかどうかを確認します。「基本コンポーネントの比較」を参照してください。

Tip

このドキュメントでは、lwc-recipes リポジトリにある ldsCreateRecord コンポーネントについて説明しています。このコンポーネントは、名前を要求し、その名前で取引先を作成します。取引先が作成されると、取引先 ID が表示されます。

取引先名を要求して取引先を作成するフォーム。

JavaScript を使用してレコードを作成するには、createRecord() 関数をコールします。このコンポーネントは、createAccount ハンドラで関数をコールします。

1<template>
2  <lightning-card title="LdsCreateRecord" icon-name="standard:record">
3    <div class="slds-m-around_medium">
4      <lightning-input label="Id" disabled value={accountId}></lightning-input>
5      <lightning-input
6        label="Name"
7        onchange={handleNameChange}
8        class="slds-m-bottom_x-small"
9      ></lightning-input>
10      <lightning-button
11        label="Create Account"
12        variant="brand"
13        onclick={createAccount}
14      ></lightning-button>
15    </div>
16  </lightning-card>
17</template>

コンポーネントの JavaScript は、lightning/uiRecordApi モジュールから createRecord をインポートします。また、エラー処理の通知を表示するために lightning/platformShowToastEvent から ShowToastEvent をインポートします。その後、取引先オブジェクトと、取引先の名前項目をインポートします。

指定された名前で取引先レコードを作成する createRecord(recordInput) に取引先名を渡します。

次に、createRecord(recordInput) を使用して取引先レコードを作成するハンドラを提供します。この例では、ユーザが取引先名を入力すると、handleNameChange(event) メソッドがコンポーネントの HTML ファイルからの change イベントを処理します。

1import { LightningElement } from 'lwc';
2import { ShowToastEvent } from 'lightning/platformShowToastEvent';
3import { createRecord } from 'lightning/uiRecordApi';
4import { reduceErrors } from 'c/ldsUtils';
5import ACCOUNT_OBJECT from '@salesforce/schema/Account';
6import NAME_FIELD from '@salesforce/schema/Account.Name';
7
8export default class LdsCreateRecord extends LightningElement {
9    accountId;
10
11    name = '';
12
13    handleNameChange(event) {
14        this.accountId = undefined;
15        this.name = event.target.value;
16    }
17
18    async createAccount() {
19        const fields = {};
20        fields[NAME_FIELD.fieldApiName] = this.name;
21        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
22        try {
23            const account = await createRecord(recordInput);
24            this.accountId = account.id;
25            this.dispatchEvent(
26                new ShowToastEvent({
27                    title: 'Success',
28                    message: 'Account created',
29                    variant: 'success'
30                })
31            );
32        } catch (error) {
33            this.dispatchEvent(
34                new ShowToastEvent({
35                    title: 'Error creating record',
36                    message: reduceErrors(error).join(', '),
37                    variant: 'error'
38                })
39            );
40        }
41    }
42}

createRecord(recordInput) 関数は、レコードが作成されると解決される Promise オブジェクトを返します。レコードデータをコンポーネントに返すため、then() ブロックを使用します。このコンポーネントは account.id を返し、その値を accountId プロパティに設定します。

catch() ブロックを使用してエラーを処理します。

例

レコードを更新するには、「updateRecord(recordInput, clientOptions)」を参照してください。サンプルコードが示されています。Apex を使用して複数のレコードを更新するには、「インライン編集を使用したテーブルでのデータの表示」を参照してください。

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。