2023.08.04

【LWC】lightning-datatableのインライン編集機能について

K.H

目次

はじめに

みなさん、Lightning Web Component（LWC） をご存知でしょうか？
私は最近、LWC開発をすることに楽しさを覚えています。
今回はLightning Web Componentで作るインライン編集機能についてご紹介したいと思います。

インライン編集についての説明

インライン編集とは、各オブジェクトのレコードページで編集ボタンを押さなくても、その閲覧モードページでデータの編集ができる機能です。
標準でインライン編集できる例として、リストビューとレポートがあげられます。
リストビューのインライン編集

リストビューのインライン編集

レポートのインライン編集

レポートのインライン編集

関連リストではインライン編集ができませんが、関連リストでインライン編集をしたいとお客様から要望をいただくこともあります。
LWCではlightning-datatableを拡張することで、インライン編集機能が使えます。
そもそもlightning-datatableって？という方は公式リファレンスに詳細が載っていますので、そちらをご参照ください。
公式リファレンス
今回は下記のように、インライン編集機能が使える関連リストをLWCで開発したいと思います。
関連リストのインライン編集　完成イメージ

関連リストのインライン編集　完成イメージ

LWC の基本構成は、下記のようにHTML ・ CSS ・ JavaScriptです。
Apexをインポートすることにより、より複雑な操作も可能です。
LWCの構造

LWCの構造

今回作成するLWCとApexは下記です。
LWC：quoteLineItemList
Apex：QuoteLineItemListController

インライン編集　設定編

lightning-datatableでインライン編集を有効化するための設定をしていきます。
HTMLを記載していきます。
dataは関連リストに表示したいレコードのリストをセットします。
columnsは関連リストの列の定義情報をセットします。
<lightning-datatable
    key-field="Id"
    data={QuoteLineItemList}
    columns={columns}>
</lightning-datatable>
quoteLineItemList.html
JavaScriptではcolumnsにセットする列の定義情報を記載します。
インライン編集を有効にするには、列定義でeditable: trueを設定する必要があります。
インライン編集させたい列ごとに、設定を追加していきます。
今回は「販売価格」と「数量」に対してeditable: trueを設定します。
columns = [
    {
        label: '商品',
        fieldName: 'Product2Id',
        type: 'url',
        displayReadOnlyIcon: true,
        cellAttributes: { alignment: 'left' },
        typeAttributes: {
            label: { fieldName: 'Product2.Name' }
        }
    },
    {
        label: '販売価格',
        fieldName: 'UnitPrice',
        type: 'currency',
        editable: true, // インライン編集有効化
        cellAttributes: { alignment: 'left' }
    },
    {
        label: '数量',
        fieldName: 'Quantity',
        type: 'number',
        editable: true, // インライン編集有効化
        typeAttributes: { minimumFractionDigits: '2' },
        cellAttributes: { alignment: 'left' }
    },
    {
        label: '小計',
        fieldName: 'Subtotal',
        type: 'currency',
        displayReadOnlyIcon: true,
        cellAttributes: { alignment: 'left' }
    }
];
quoteLineItemList.js
デプロイ後、下記のように「販売価格」と「数量」項目に鉛筆マークが表示されます。
標準のインライン編集と同様に、鉛筆マークを押すと編集可能です。
デプロイ後　イメージ

デプロイ後　イメージ

インライン編集　保存編

インライン編集で項目の値を変更すると、下記のようにフッターに[保存]ボタンと[キャンセル]ボタンが表示されます。
インライン編集時のフッター

インライン編集時のフッター

[キャンセル]ボタンを押すと、フッターが非表示になり、インライン編集する前の画面に戻ります。
[保存]ボタンを押すと、現状は何も変化が起きません。
インライン編集後の値を保存する必要があるので、保存処理を作成していきます。

HTMLを修正していきます。
lightning-datatableタグに下図の属性を追加します。
draft-valuesは、インライン編集で変更した値のリストを保持しています。
onsaveは、保存ボタンを押した際の処理が実行されます。
<lightning-datatable
    key-field="Id"
    data={QuoteLineItemList}
    columns={columns}
    onsave={handleSave}
    draft-values={draftValues}>
</lightning-datatable>
quoteLineItemList.html
JavaScriptに[保存]ボタン押下後の処理を記載していきます。
①インライン編集で更新した値を取得します。
event.detail.draftValuesの記載でインライン編集した値を取得できます。

②①で取得した値を引数として、Apexの処理を呼びだします。
ApexにsaveQuoteLineItemRecordsメソッドを作成します。

③保存処理成功後、フッターを非表示にし、関連リストのデータを再取得します。
フッターを非表示にするには、draftValueに空のリストをセットします。
関連リストのデータを再取得するには、refreshApexに関連リストに表示しているデータをセットします。
handleSave(event) {
    console.log('handleSave()');
    // ①インライン編集で更新した値を取得
    this.draftValues = event.detail.draftValues;
    const editList = {updateQuoteLineItemRecords:this.draftValues};
    // ②Apexの処理を呼びだし
    saveQuoteLineItemRecords(editList)
    .then(() => {
        // 更新成功時
        // ③フッターを非表示
        this.draftValues = null;
        // ③関連リストのデータを再取得
        refreshApex(this.resultQuoteLineItem);
        this.showToast('成功', 'レコードが更新されました。', 'success');
    })
    .catch((error) => {
        // 更新失敗時
        this.showToast('エラー', error.body.message, 'error', 'sticky');
    })
}
quoteLineItemList.js
①Apexでは、関連リストでインライン編集をしたレコードを更新します。
画面でインライン編集をした値を引数で受け取るので、この引数を使用してレコードを更新します。
@AuraEnabled
public static void saveQuoteLineItemRecords(List<QuoteLineItem>updateQuoteLineItemRecords) {
    if (!updateQuoteLineItemRecords.isEmpty()) {
        //①インライン編集をしたレコードを更新
        update updateQuoteLineItemRecords;
    }
}
QuoteLineItemListController.cls

おわりに

いかがでしたでしょうか。

私はインライン編集で値を変更し、[保存]ボタンを押すとレコードは更新されますが、画面上には反映されず苦戦していました。よく見るとフッターが表示されたままになっており、保存後の処理でdraftValueに空のリストをセットすることで解消いたしました。結果、[保存]ボタン押下後にフッターが非表示になり、レコードが更新されていました。

今回はインライン編集についての説明になりましたが、他にもlightning-datatableにはいろいろな機能があります！
知りたい！という方は、過去に公開されている記事を参考にしてみてください。
最後まで読んでいただきありがとうございました。

【LWCレシピ】Datatableのパフォーマンス向上 - TerraSkyBase | テラスカイを支える人とテクノロジーの情報を発信する基地局

【LWCレシピ】Datatableのパフォーマンス向上 - TerraSkyBase | テラスカイを支える人とテクノロジーの情報を発信する基地局
Datatableのパフォーマンスを向上させる方法についてご紹介します。
33 件
    　
  • banner
  • banner

関連する記事