2024.01.12

【LWC】lightning-Record-Pickerとは!?

Just a moment... (30702)

はじめに

みなさん、Lightning Web Component(LWC) にてルックアップ項目を実装したいと思ったことはありませんか。
ルックアップ項目と同じ機能をLWCにて1から作成するのは、非常に苦労するものです。標準コンポーネントを利用する場合は、「lightning-record-edit-form」による実装方法がありましたが、参照項目が必要だったりして、少し無理矢理感が否めない方法でした。

そんな中、Winter'24リリースにてレコードの検索項目を提供する標準コンポーネント「lightning-Record-Picker」がリリースされました。(Winter'24時点ではベータ版機能であり、Spring'24にて一般利用可能の予定です)
今回はこの「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

動かしてみて気になったこと

実際に動かしてみて、少し気になった点を書き連ねてみます。
・オブジェクト上のルックアップ項目の代替とはならない。
 →最近参照したデータの表示や、ルックアップ検索画面による検索は現時点でありません。
・検索可能な項目が2項目までに限られる。
 →2項目のみとなると、用途は少し限られるのではないかと思いました。

さいごに

いかがでしたでしょうか。
個人的には少し制限があるものの、簡単なレコード検索機能としては利用のしがいがあるかと思いました。

現時点ではベータ機能であり、今後以下のような機能拡張も期待がされているようです。
・SOSLによるクエリ機能提供
・最近参照したデータの表示
・複数選択モード
などなど...
参考:Salesforce Developers Blog

バージョンアップによるグレードアップを楽しみにしつつ、ぜひ利用してみてください。
23 件
     
  • banner
  • banner

関連する記事