lightning-record-edit-form × lightning-datatableでルックアップ検索 できるtableを作る

Transcript

1. lightning-record-edit-form × lightning-datatableでルックアップ検索 できるtableを作る キットアライブ 佐藤 雄斗
2. アジェンダ • 概要 ◦ lightning-record-edit-formについて ◦ lightning-datatableについて ◦ 今回発表に至った背景 • 実装内容・実装方法のご紹介 ◦ 今回作成したもの ◦ 実装方法紹介(ざっくり) ◦ 実装方法紹介(詳細) • まとめ 2
3. • 概要 ◦ lightning-record-edit-formについて ◦ lightning-datatableについて ◦ 今回発表に至った背景 3
4. • レコードの新規作成、更新を行うために使用するフォーム • ざっくりとした特徴 ◦ オブジェクト名と項目を指定すると、型に併せていい感じに編集(表示)でき るようにしてくれる。 ◦ 参照項目を渡すことでルックアップ検索(虫眼鏡)もできるようになる。 <lightning-record-edit-form object-api-name="Account" record-id={recordId}> <div class="slds-form-element"> <lightning-input-field field-name="Name"></lightning-input-field> <lightning-input-field field-name="Rating"></lightning-input-field> <lightning-input-field field-name="ParentId"></lightning-input-field> <lightning-input-field field-name="AnnualRevenue"></lightning-input-field> </div> </lightning-record-edit-form> lightning-record-edit-formについて 4 https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation
5. • lightning-datatableのタグにデータとして配列を渡し、jsの方でカラムを指定し てあげることでいい感じのテーブルを表示してくれる。 • インライン編集にも対応 • 各カラムのデータ型はtypeで指定 lightning-datatableについて 5 https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation <lightning-datatable key-field="id" data={records} columns={columns}> </lightning-datatable>
6. • 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. • 実装内容・実装方法のご紹介 ◦ 今回作成したもの ◦ 実装方法紹介(ざっくり) ◦ 実装方法紹介(詳細) 7
8. • 例として発注の画面から明細レコード(発注明細)を一括で編集できるようなtable を作成しました。 今回作成したもの 8
9. • 実装にあたり作成したコンポーネント • createPurchaseDetailTable：テーブルを表示するコンポーネント • customDatatable：lightning-datatableを継承したコンポーネント • datatableLookup：カスタムタイプ(ルックアップ)のコンポーネント 実装方法紹介(ざっくり) 9 createPurchaseDetailTable customDatatable datatableLookup
10. • 主な処理 ◦ データの取得・表示 ◦ カラムの設定 ◦ 保存処理 等々... 実装方法紹介(詳細)-createPurchaseDetailTable 10 createPurchaseDetailTable customDatatable datatableLookup
11. • typeで今回カスタムで作成した 「lookup」を指定 • typeAttributesでルックアップ用の コンポーネントに渡すものを指定 ※「fieldName: 項目名」で各行の 項目の値を指定 実装方法紹介(詳細)-createPurchaseDetailTable 11 createPurchaseDetailTable customDatatable datatableLookup
12. • htmlにはとくに何もかかない • datatableをインポートしてextends • 「customTypes」にカスタムタイプ を設定 template:カスタムタイプ のテンプレートとして使うhtml, typeAttributes:親で指定できる プロパティを設定 createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-customDatatable 12
13. • カスタムタイプのテンプレートに 子コンポーネントを埋め込んで 「typeAttributes.プロパティ名」で 親コンポーネントからの値を引継ぎ createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-customDatatable 13
14. • 親コンポーネントから受け取った 変数に従ってルックアップを 表示。 createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-datatableLookup 14
15. • ルックアップの変更を検知して、親 コンポーネント及びその親に カスタムイベントで情報を伝達 createPurchaseDetailTable customDatatable datatableLookup 実装方法紹介(詳細)-datatableLookup 15
16. • まとめ 16
17. まとめ 17 • lightning-datatableのカスタムタイプ(ルックアップ)の追加は思っていたよ りコード量少な目でできる。 用意するコンポーネント ◦ 表示用のコンポーネント ◦ datatableを継承したコンポーネント ◦ ルックアップ部分のコンポーネント • CSSはもう少し工夫の余地あり。(本当は下のセルにかぶるようにしたかっ た...)
18. 参考 • 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. ご清聴ありがとうございました！ 19