レコードデータの階層テーブルの作成

lightning-tree-grid コンポーネントは、子レコードを表示するために展開できるデータの行を表示します。

lightning-tree-grid コンポーネントは lightning-datatable に基づいて構築され、その機能のサブセットをサポートしています。各コンポーネントで提供される機能の比較については、「テーブルでのレコードデータの表示」を参照してください。

レコードと子レコードの表示

ケースが関連付けられた取引先を表示するテーブルを作成しましょう。各行レベルのアクションでは、ナビゲーションサービスを使用して取引先またはケースレコードを編集できます。

取引先および関連付けられた新規ケースが表示されているデータテーブル

Apex を使用してデータを取得しましょう。この例では、取引先名と、状況が New のすべての関連ケースを返す SOQL ステートメントが CaseController.cls に含まれています。

1//CaseController.cls
2public with sharing class CaseController {
3    @AuraEnabled(cacheable=true)
4    public static list<Account> getNewCasesForAccounts(){
5        return [SELECT Name, (
6                SELECT Id, CaseNumber, Status FROM Cases WHERE toLabel(Status) = 'New')
7                FROM Account WHERE Id IN (SELECT AccountId FROM Case)];
8    }
9}

JavaScript ファイル myTreeGrid.js で、@wire を使用して Apex メソッドをコールします。_children キーを使用して、子項目を含む行を定義します。子項目のある行は、子項目を切り替えるシェブロンボタンと共に表示されます。

1//myTreeGrid.js
2import { LightningElement, wire, track } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5import getNewCases from "@salesforce/apex/CaseController.getNewCasesForAccounts";
6
7const actions = [{ label: "Edit", name: "edit_record" }];
8
9const COLS = [
10  {
11    fieldName: "Name",
12    label: "Account Name",
13  },
14  {
15    fieldName: "CaseNumber",
16    label: "New Cases",
17    cellAttributes: {
18      iconName: { fieldName: "iconName" },
19    },
20  },
21  {
22    type: "action",
23    label: "Edit Record",
24    typeAttributes: {
25      rowActions: actions,
26      menuAlignment: "right",
27    },
28  },
29];
30
31export default class MyTreeGrid extends NavigationMixin(LightningElement) {
32  @track myData = [];
33  columns = COLS;
34  error;
35
36  @wire(getNewCases)
37  wiredCases({ error, data }) {
38    if (error) {
39      // Handle error
40      this.error = error;
41    } else if (data) {
42      // Process record data
43      var strData = JSON.parse(JSON.stringify(data));
44
45      strData.map((row, index) => {
46        if (row["Cases"]) {
47          row._children = row["Cases"]; //define rows with children
48          delete row.Cases;
49
50          let iconKey = "iconName";
51          row[iconKey] = "standard:case";
52        }
53      });
54      this.myData = strData;
55    }
56  }
57
58  handleRowAction(event) {
59    const action = event.detail.action;
60    const row = event.detail.row;
61    switch (action.name) {
62      case "edit_record":
63        this[NavigationMixin.Navigate]({
64          type: "standard__objectPage",
65          attributes: {
66            objectApiName: "Case",
67            actionName: "edit",
68            recordId: row.Id,
69          },
70        });
71        break;
72    }
73  }
74}

lightning-tree-grid を使用してテーブルを作成します。

1<!--myTreeGrid.html-->
2<template>
3  <lightning-tree-grid
4    columns={columns}
5    data={myData}
6    key-field="Id"
7    onrowaction={handleRowAction}
8  >
9  </lightning-tree-grid>
10</template>

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。