【Lightning Web Component】tree-gridを使ってみました。

Developer

2021.03.07

この記事は約4分で読めます。

こんにちは、アンダーソンです。
今回はLWC開発でオブジェクトの子を階層的に見せるということがあったので、
tree-gridを使って簡単に階層表示を作成する方法をまとめました。

Contents

1 要件
2 ソースコード

Contents

要件
ソースコード

要件

ある会社様で代理店の傘下に属している代理店を視覚的にわかりやすく表示して欲しい
というご要望があり、今回これを実装することになりました。

取引先とかって取引先階層という標準の機能があり、パッとみでわかりやすくなってるんですが、それ以外のオブジェクトだと基本的に関連リストとかでみていくしか無いのかなと思います。

この場合、Aの下のabc、Bの下のdefのような複数のレコードの階層を一気に確認するのが困難な為わざわざそのレコードにアクセスする手間が惜しいとのことで
tree-gridを使うことになりました。

ソースコード

ソースコード自体はものすごく簡単です。
html側はこんな感じです。

<lightning-tree-grid
          columns={gridColumns}
          data={gridData}
          key-field="Id"></lightning-tree-grid>

これでこんな感じの物ができます。

わかりにくくてもうしわけ無いですが笑
最初の行に取引先が来て、その下に取引先に関連する商談が来ます。(IDのプレフィックスでご判断ください笑)

では裏側ではどうなっているのかですが、JSがこちら

gridColumns = [
        { label: 'Id', fieldName: 'Id', type: 'text' },
        { label: 'Name', fieldName: 'Name', type: 'text' },
    ]
    gridData

    @api recordId

    connectedCallback() {
        getData({recordId:this.recordId})
        .then(data => {
            console.log(data);
            let assets = []
            data.map(d => {
                let asset = {}
                let children = []
                asset.Id = d.Id
                asset.Name = d.Name
                if (d.Opportunities) {
                    d.Opportunities.forEach(o => {
                        let opp = {}
                        console.log(o);
                        opp.Id = o.Id,
                        opp.Name = o.Name
                        children.push(opp)
                    })
                }
                asset._children = children
                assets.push(asset)
            })
            
            this.gridData = assets
            console.log(assets);
        })
        .catch(error => console.log(error))
    }

Apexがこちら

@AuraEnabled(cacheable=true)
global static List<Account> getRecord(String recordId){
        return [
            SELECT Id,Name,(SELECT Id,Name FROM Opportunities) FROM Account WHERE Id = :recordId
        ];
}

今回はサンプルなので1取引先を取得する想定で書いてますが
recordIdを複数にしてあげると下記のように複数を一気に見ることができます。(わかりにくいのは相変わらずですが。)