インライン編集を使用したテーブルでのデータの表示
テーブルで Salesforce データを表示するには、lightning-datatable コンポーネントを使用します。このコンポーネントはインライン編集をサポートするため、ユーザはレコードに移動せずに項目値を更新できます。
レコードのリストを読み込むには、getListUi (Deprecated) ワイヤアダプタを使用するか、Apex メソッドで SOQL を使用します。「データガイドライン」を参照してください。
次の例では、Apex メソッドで SOQL を使用して取引先レコードの取引先責任者を読み込んでいます。
@AuraEnabled(cacheable=true) アノテーションは、メソッドを Lightning コンポーネントに公開し、クライアント上の取引先責任者のリストをキャッシュします。accId パラメータを使用して、特定の取引先レコードの取引先責任者を絞り込みます。
Apex メソッドがデータを返すと、HTML テンプレートは編集可能な名項目と姓項目 (1) が含まれる lightning-datatable コンポーネントを表示します。項目を編集すると、[保存] ボタンが表示されます。このボタンをクリックして、取引先責任者レコードを更新できます。取引先責任者レコードが正常に更新されると、関連リスト (2) のレコードデータや、Lightning データサービスで管理されているページの他のコンポーネントも更新されます。
この例は、lwc-recipes リポジトリの datatableInlineEditWithUiApi コンポーネントに基づいています。このバージョンは、データテーブルをレコードページで使用できるようにするために若干異なっています。
インライン編集を有効にするには、次の apexContactsForAccount テンプレートのように lightning-datatable コンポーネントを設定します。
必須の key-field 属性は、各行を取引先責任者レコードに関連付けます。data 属性は、ワイヤサービスによって Apex メソッドまたはワイヤアダプタから取得されたデータを保持します。columns 属性は、レコード項目を各列に割り当てて、列の動作をカスタマイズします。ユーザがセルを編集すると、更新された値が draft-values に格納されます。
[保存] ボタンをクリックすると save イベントがトリガされます。onsave イベントハンドラを使用して、変更内容をデータテーブルに格納します。この例では、onsave イベントハンドラが updateRecord(recordInput, clientOptions) をコールして、レコードの変更を保存します。
属性とサポートされる機能のリストは、lightning-datatable を参照してください。
1 行のデータは 1 つのレコードに対応し、各列にはそのレコードの項目の 1 つの値が表示されます。インライン編集を有効にするには、列定義で editable: true を設定することで編集できる項目を指定します。この例では、First Name 項目と Last Name 項目は編集可能です。取引先責任者の名前項目は複合項目であるため、First Name 項目と Last Name 項目を使用する必要があります。
@wire(getContacts) は、データを contacts.data に、レコード ID を accId にプロビジョニングします。
項目を編集すると、編集後の項目値とレコード Id がオブジェクトの配列として event.detail.draftValues に格納されます。
変更後に Tab キーを押すかセルの外側をクリックすると、データテーブルのフッターに [キャンセル] ボタンと [保存] ボタンが表示されます。データベースフッタを非表示にするには、draftValues プロパティをクリアします。onsave イベントハンドラは、値をレコードオブジェクトにコピーした後に draftValues をクリアします。
updateRecord(recordInput, clientOptions) をコールすることで、新しい項目値がレコードに保存されます。
updateRecord() は、1 つのレコードのみを想定します。項目を更新する各レコードに対して recordInput オブジェクトを渡します。この例では、record パラメータに複数レコードの更新済み項目が格納されたオブジェクトが含まれます。複数のレコードを同時に更新するには、パラメータを updateRecord() に渡して処理します。
保存に成功すると、onsave イベントハンドラで ShowToastEvent イベントがディスパッチされ、成功トーストメッセージが表示されます。
レコードが更新されると、refreshApex(this.contacts) は、Apex メソッドから返された取引先責任者のリストを更新し、データテーブルが常に最新のデータを反映するようにします。
1 つのトランザクションでレコードを一括更新するには、Apex を使用することをお勧めします。**「Apex を使用したのインライン編集の有効化」**セクションを参照してください。
レコードを一括更新する場合、update データ操作言語 (DML) 操作をコールする Apex コントローラにレコードの変更内容を渡します。この例では、編集された項目値が updateContacts Apex コントローラに渡されます。レコードは Apex によって更新されるため、ユーザは notifyRecordUpdateAvailable(recordIds) 関数を使用して Lightning データサービス (LDS) に通知し、Lightning データサービスキャッシュおよびワイヤが更新されるようにする必要があります。
この例は、github.com/trailheadapps/lwc-recipes リポジトリの datatableInlineEditWithApex コンポーネントに基づいています。このバージョンは、LDS を使用せずに Apex を使用するという点で若干異なっています。
前の例で作成した apexContactsForAccount.js ファイルで、Apex コントローラと notifyRecordUpdateAvailable 関数をインポートします。
handleSave() 関数を更新して、編集された値を処理します。レコードの更新後に Apex を介して notifyRecordUpdateAvailable() がコールされるようにするには、async/await パターンまたは Promise チェーンを使用します。次の例では async/await を使用します。
updateContacts Apex コントローラは、更新された項目が含まれる JSON 文字列を取引先責任者オブジェクトにデシリアライズします。update DML 操作を使用して、変更されたレコードを更新します。
関連トピック