背景

Salesforceにおいて、DatatableとのRowに対するアクションは使用頻度と重要度が高いのは、Spreadsheetライクに利用したい需要があるからだと考えています。ただデータの量が多くなると、データの処理能力と表示スピードを考慮した設計にする必要があります。

Datatableの形としては２種類あります。

Datatableでrow actionができるテーブルを作成する
Iterationで、擬似的テーブルを作成する

大量データの表示方法としても２種類あります。

PaginationでoffsetをPage数を利用してインクリメント取得する
Infinite loadingで、延々終わるまで取得する

また、データをインクリメント的な取得方法も二つあります。

SOQLのOffsetをすでに取得したデータ量で設定しクエリする
IdやCreatedDateをインクリメントごとで再設定しそれ以降を取得する

今回は、Infinite Loadingを試してみました。

Offsetの最大は2000です。それ以上をSOQLの回避策はQueryMoreで、カーディナリティが高く、一意の値が多い項目を使用することを勧めています。
Workaround for offset 2000 limit on SOQL query (Salesforce)
SOAP API - queryMore (Salesforce)
OFFSET (Salesforce)

デモ

50件ずつインクリメント取得しています。

構成

Lead
Lwc * 1
Apex * 1

下準備

前回の投稿のMockarooでダミーデータを作成
Mockarooでダミーデータを作成してみた

内容

まずデータの取得です。私はmapで包んで投げるのが好きです。parametersはひとつずつで問題ないのでそこはお好みで。

SOQL

SOQL (getLeads)

返すデータはLeadのリスト、変数はstringSetかdateSetでまとめて管理しています。データ数はLIMIT 50です。

DateTimeはJavaScriptではyyyy-mm-ddT00:00:00.000Zなので渡すMapの型がDateTimeであればそのままで問題ないですが、String型で渡す場合は、yyyy-mm-dd 00:00:00に成形し渡した先でDateTime.valueof(string)としてDateTime型に戻す手間があります。今回は、dateSetがDateTimeのMapなのでそのままです。

@AuraEnabled
    public static List<Lead> getLeads(String searchTerm, Map<String, String> stringSet, Map<String, DateTime> dateSet) {
        DateTime lastCreatedDate = dateSet.get('lastCreatedDate');
        String lastId = stringSet.get('lastId');
        String ownerAlias = stringSet.get('ownerAlias');
        String status = stringSet.get('status');     
        String leadSource = stringSet.get('leadSource');     
        String query = 'SELECT Id, Company, LastName, FirstName, Email, Phone, Status, LeadSource, Website, Industry, OwnerId, Owner.Alias, CreatedDate, CreatedBy.Alias, (SELECT Id, Type, OwnerDivision__c, Owner.Alias FROM Cases__r), (SELECT Id, CreatedDate, Type, CreatedById FROM Tasks ORDER BY CreatedDate DESC LIMIT 10) FROM Lead';    
        List<String> conditions = new List<String>();
        conditions.add('Status != \'Unqualified\'');
        conditions.add('IsConverted = false');
        if (lastCreatedDate != null && String.isNotBlank(lastId)) {
            conditions.add('(CreatedDate < :lastCreatedDate OR (CreatedDate = :lastCreatedDate AND Id < :lastId))');
        }
        if (String.isNotBlank(ownerAlias)) {
            conditions.add('Owner.Alias = :ownerAlias');
        }
        if (String.isNotBlank(leadSource)) {
            conditions.add('LeadSource = :leadSource');
        } 
        if (String.isNotBlank(searchTerm)) {
            String keyword = '%' + searchTerm + '%';
            conditions.add('(Company LIKE :keyword OR Email LIKE :keyword OR LastName LIKE :keyword OR FirstName LIKE :keyword)');
        }    
        if (!conditions.isEmpty()) {
            query += ' WHERE ' + String.join(conditions, ' AND ');
        }
        
        query += ' ORDER BY CreatedDate DESC, Id DESC LIMIT 50';
        system.debug(query);
        return Database.query(query);
    }

lastIdとlastCreatedDateが、スクロールによりSpinnerが表示されるたびにDatatableのonloadMoreアクションで呼び出されたmethod内で最後のRecordから取得します。それを、loadDataへ投げて次の50件を取得してくるparameterになります。

LWC

Datatable

Datatable (html)

<lightning-datatable
  key-field="id" 
  data={rows} 
  columns={columns} 
  show-row-number-column="true"
  enable-infinite-loading 
  load-more-offset="20" 
  onloadmore={loadmoreData}>
</lightning-datatable>

Datatableでは、onloadMoreでテーブルの下部に近づいた時に起動するアクションを設定します。load-more-offsetは下部からどのくらい上かpixel単位で数値を設定できます。早めにアクションして欲しい場合は数値を大きくしますが、デフォルトは20pxです。enable-infinite-loadingは必須です。
参照
lightning-datatable (salesforce)

loadData

loadData (JS)

    loadData() {
        return new Promise((resolve, reject) => {
            getLeads({searchTerm: this.searchTerm, stringSet: this.stringSet, dateSet: this.dateSet })
            .then(data => {
    
                if (data.length) {
                    const mappedData = this.mapData(data);
                    this.rows = (this.rows || []).concat(mappedData); // concatenate mapped data
                }
                resolve();
            })
            .catch(error => {
                console.error(error);
            })
            .finally(() => {
                if (this.rows && this.rows.length > 1) {
                    this.tempLastCreatedDate = this.rows[this.rows.length - 1].CreatedDate;
                    this.tempLastId = this.rows[this.rows.length - 1].Id;
                } else {
                    this.tempLastCreatedDate = new Date();
                    this.tempLastId = null;
                }
            });
        });
    }

ここで取得したデータの一番最後のlastIdとlastCreatedDateを取得しています。

this.tempLastCreatedDate = this.rows[this.rows.length - 1].CreatedDate;
this.tempLastId = this.rows[this.rows.length - 1].Id;

loadDataで取得します。@wireでもconnectedCallbackでも実装は可能ですが、@wireがデータ取得が速すぎてspinnerが出ないほどでした。今回はデータ量が50件ごとなのとspinnerが出た方が取得している感が出るので、connectedCallbackを利用しました。

また、データをdatatableに合うようにmapをしますが、mapについてはcellをデータによっては着色したり、iconをTypeAttributeでclass付けしたりダイナミックな表現にするときに噛ませます。詳細は本投稿の最後で。

loadmoreData

loadMoreData (JS)

    async loadmoreData(event) {
        if (this.rows.length < 50) {
            return; // the datatable frame is too short, so it will keep rendering loadmore unless to stop by return here
        }
        const { target } = event;
        target.isLoading = true;
        this.dateSet.lastCreatedDate = this.tempLastCreatedDate;
        this.stringSet.lastId = this.tempLastId;
        try {
            await this.loadData(); 
            target.isLoading = false;
        } catch (error) {
            console.error(error);
        }
    }

loadmoreDataは、スクロールでDatatableの下部に来た時に呼ばれるメソッドで、現在のテーブル上にあるデータが50を下回りテーブルの下部が表示されてしまう高さの場合、DatatableのloadしたらすぐDatatableの下部に触ると見なされ永遠とloadData()をcallしてしまいます。そこで再取得の制御のために、このreturnが必要です。

まとめ

TaskやEvent, Chatterなど明らかにCreatedDateが降順で表示されるべきもの、数値として2000で区切るものでもないものにはInfinite Loadingは選択肢としてありかなと感じました。

参照

lightning-datatable (salesforce)
Workaround for offset 2000 limit on SOQL query (Salesforce)
SOAP API - queryMore (Salesforce)
OFFSET (Salesforce)

DatatableのInfinite Loadingを実装してみた (lwc)

背景

デモ

構成

下準備

内容

SOQL

LWC

Datatable

loadData

loadmoreData

まとめ

参照

関連投稿

github