lightning-record-edit-form × lightning-datatableでルックアップ検索 できるtableを作る キットアライブ 佐藤 雄斗

アジェンダ ● 概要 ○ lightning-record-edit-formについて ○ lightning-datatableについて ○ 今回発表に至った背景 ● 実装内容・実装方法のご紹介 ○ 今回作成したもの ○ 実装方法紹介(ざっくり) ○ 実装方法紹介(詳細) ● まとめ 2

● 概要 ○ lightning-record-edit-formについて ○ lightning-datatableについて ○ 今回発表に至った背景 3

● レコードの新規作成、更新を行うために使用するフォーム ● ざっくりとした特徴 ○ オブジェクト名と項目を指定すると、型に併せていい感じに編集(表示)でき るようにしてくれる。 ○ 参照項目を渡すことでルックアップ検索(虫眼鏡)もできるようになる。 lightning-record-edit-formについて 4 https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation

● lightning-datatableのタグにデータとして配列を渡し、jsの方でカラムを指定し てあげることでいい感じのテーブルを表示してくれる。 ● インライン編集にも対応 ● 各カラムのデータ型はtypeで指定 lightning-datatableについて 5 https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

● lightning-datatableのカラムにはいろいろなtypeが用意されているが、ルックア ップがない(参照項目、主従関係に対応したtypeがない) ⇒「ないものをつくってしまおう」の精神でカスタムのtypeを作ってみることに 今回発表に至った背景 6 タイプ一覧：https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation カスタムタイプの作成方法：https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types

● 実装内容・実装方法のご紹介 ○ 今回作成したもの ○ 実装方法紹介(ざっくり) ○ 実装方法紹介(詳細) 7

● 例として発注の画面から明細レコード(発注明細)を一括で編集できるようなtable を作成しました。 今回作成したもの 8

● 実装にあたり作成したコンポーネント ● createPurchaseDetailTable：テーブルを表示するコンポーネント ● customDatatable：lightning-datatableを継承したコンポーネント ● datatableLookup：カスタムタイプ(ルックアップ)のコンポーネント 実装方法紹介(ざっくり) 9 createPurchaseDetailTable customDatatable datatableLookup

● 主な処理 ○ データの取得・表示 ○ カラムの設定 ○ 保存処理 等々... 実装方法紹介(詳細)-createPurchaseDetailTable 10 createPurchaseDetailTable customDatatable datatableLookup

● typeで今回カスタムで作成した 「lookup」を指定 ● typeAttributesでルックアップ用の コンポーネントに渡すものを指定 ※「fieldName: 項目名」で各行の 項目の値を指定 実装方法紹介(詳細)-createPurchaseDetailTable 11 createPurchaseDetailTable customDatatable datatableLookup

● htmlにはとくに何もかかない ● datatableをインポートしてextends ● 「customTypes」にカスタムタイプ を設定 template:カスタムタイプ のテンプレートとして使うhtml, typeAttributes:親で指定できる プロパティを設定 createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-customDatatable 12

● カスタムタイプのテンプレートに 子コンポーネントを埋め込んで 「typeAttributes.プロパティ名」で 親コンポーネントからの値を引継ぎ createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-customDatatable 13

● 親コンポーネントから受け取った 変数に従ってルックアップを 表示。 createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-datatableLookup 14

● ルックアップの変更を検知して、親 コンポーネント及びその親に カスタムイベントで情報を伝達 createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-datatableLookup 15

● まとめ 16

まとめ 17 ● lightning-datatableのカスタムタイプ(ルックアップ)の追加は思っていたよ りコード量少な目でできる。 用意するコンポーネント ○ 表示用のコンポーネント ○ datatableを継承したコンポーネント ○ ルックアップ部分のコンポーネント ● CSSはもう少し工夫の余地あり。(本当は下のセルにかぶるようにしたかっ た...)

参考 ● https://developer.salesforce.com/docs/component- library/bundle/lightning-record-edit-form/documentation ● https://developer.salesforce.com/docs/component- library/bundle/lightning-datatable/documentation ● https://qiita.com/atskimura/items/7d573d19ad653195038c ● 今回のソース ○ https://github.com/yutoSatou/datatableWithLookup/ 18

ご清聴ありがとうございました！ 19