via pixabay.com
はじめに
みなさん、Lightning Web Component(LWC) にてルックアップ項目を実装したいと思ったことはありませんか。
ルックアップ項目と同じ機能をLWCにて1から作成するのは、非常に苦労するものです。標準コンポーネントを利用する場合は、「lightning-record-edit-form」による実装方法がありましたが、参照項目が必要だったりして、少し無理矢理感が否めない方法でした。
そんな中、Winter'24リリースにてレコードの検索項目を提供する標準コンポーネント「lightning-Record-Picker」がリリースされました。(Winter'24時点ではベータ版機能であり、Spring'24にて一般利用可能の予定です)
今回はこの「lightning-Record-Picker」について実際に作成してみましたので、ご紹介します。
ルックアップ項目と同じ機能をLWCにて1から作成するのは、非常に苦労するものです。標準コンポーネントを利用する場合は、「lightning-record-edit-form」による実装方法がありましたが、参照項目が必要だったりして、少し無理矢理感が否めない方法でした。
そんな中、Winter'24リリースにてレコードの検索項目を提供する標準コンポーネント「lightning-Record-Picker」がリリースされました。(Winter'24時点ではベータ版機能であり、Spring'24にて一般利用可能の予定です)
今回はこの「lightning-Record-Picker」について実際に作成してみましたので、ご紹介します。
実際の画面イメージ
今回は例として取引先責任者のレコードを、「名前」・「役職」で検索するルックアップ項目をlightning-Record-Pickerコンポーネントにて作成してみました。
以下が実際に作成したlightning-Record-Pickerコンポーネントのイメージになります。
以下が実際に作成したlightning-Record-Pickerコンポーネントのイメージになります。
実際にルックアップ項目へ取引先責任者の「名前」の一部を入力すると、入力値の部分一致検索にヒットした取引先責任者レコードが候補として表示されました。
(候補として表示されるレコード数に制限は確認できておらず、一定数以上になるとスクロールバーが表示される仕様となっているようです)
(候補として表示されるレコード数に制限は確認できておらず、一定数以上になるとスクロールバーが表示される仕様となっているようです)
表示された候補から1つレコードを選択することで、ルックアップ項目でレコードIdが設定された状態となります。
ソースコード
HTML部
lightning-Record-PickerコンポーネントのHTML(lightning-Record-Pickerコンポーネント抜粋)です。
<lightning-record-picker label="取引先責任者" placeholder="取引先責任者を検索..." object-api-name="Contact" matching-info={matchingInfo} display-info={displayInfo} message-when-bad-input="取引先責任者の「名前」もしくは「役職」にて検索ください" filter={filter} ></lightning-record-picker>
recordPicker.html
JS部
import { LightningElement } from "lwc"; export default class RecordPicker extends LightningElement { //検索対象項目の設定 matchingInfo = { primaryField: { fieldPath: "Name" }, additionalFields: [{ fieldPath: "Title" }] }; //表示項目の設定 displayInfo = { additionalFields: ["Title"] }; //検索条件の設定 filter = { criteria: [ { fieldPath: "Account.Name", operator: "like", value: "Edge%" } ] }; }
recordPicker.js
以下、lightning-Record-Pickerコンポーネント内の主な属性となります。
object-api-name | 検索対象となるオブジェクトのAPI参照名を設定します。 |
---|---|
matching-info | 入力された値にて検索する項目を設定します。 ※primaryField,additionalFieldsの合計2項目が設定可能。
※設定可能な項目はテキストを保持するデータ型に限られ、「テキスト」や「選択リスト」型は設定が可能だが、「日付」や「数値」型の設定は不可。
|
display-info | 検索にヒットしたレコードへ表示する項目を設定します。 ※デフォルトでName項目が表示され、additionalFieldsにて1項目のみ、追加で表示させる項目の設定が可能。
※matching-infoと同様に、数値型等の一部のデータ型は表示項目に設定不可。
|
message-when-bad-input | 検索がヒットしない場合に表示されるエラーメッセージを設定します。 |
filter | レコード検索時の条件を設定します。 ※参照関係項目におけるルックアップ検索条件のイメージ。
|
公式ドキュメント
Record Picker
Record Picker
動かしてみて気になったこと
実際に動かしてみて、少し気になった点を書き連ねてみます。
・オブジェクト上のルックアップ項目の代替とはならない。
→最近参照したデータの表示や、ルックアップ検索画面による検索は現時点でありません。
・検索可能な項目が2項目までに限られる。
→2項目のみとなると、用途は少し限られるのではないかと思いました。
・オブジェクト上のルックアップ項目の代替とはならない。
→最近参照したデータの表示や、ルックアップ検索画面による検索は現時点でありません。
・検索可能な項目が2項目までに限られる。
→2項目のみとなると、用途は少し限られるのではないかと思いました。
さいごに
いかがでしたでしょうか。
個人的には少し制限があるものの、簡単なレコード検索機能としては利用のしがいがあるかと思いました。
現時点ではベータ機能であり、今後以下のような機能拡張も期待がされているようです。
・SOSLによるクエリ機能提供
・最近参照したデータの表示
・複数選択モード
などなど...
参考:Salesforce Developers Blog
バージョンアップによるグレードアップを楽しみにしつつ、ぜひ利用してみてください。
個人的には少し制限があるものの、簡単なレコード検索機能としては利用のしがいがあるかと思いました。
現時点ではベータ機能であり、今後以下のような機能拡張も期待がされているようです。
・SOSLによるクエリ機能提供
・最近参照したデータの表示
・複数選択モード
などなど...
参考:Salesforce Developers Blog
バージョンアップによるグレードアップを楽しみにしつつ、ぜひ利用してみてください。
23 件