こんにちは、アンダーソンです。
今回はLWC開発でオブジェクトの子を階層的に見せるということがあったので、
tree-gridを使って簡単に階層表示を作成する方法をまとめました。
要件
ある会社様で代理店の傘下に属している代理店を視覚的にわかりやすく表示して欲しい
というご要望があり、今回これを実装することになりました。
取引先とかって取引先階層という標準の機能があり、パッとみでわかりやすくなってるんですが、それ以外のオブジェクトだと基本的に関連リストとかでみていくしか無いのかなと思います。
この場合、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を複数にしてあげると下記のように複数を一気に見ることができます。(わかりにくいのは相変わらずですが。)

また件数が多い場合に先にレコードを取得しておくのはあまり効率はよく無いので、
三角を押した時にイベントを発火させるみたいなこともできるようです。
色々試してみるとほんと楽しいですねLWC。
これからも気づいた事をあげていきたいと思います。