tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning Record Picker Componentを試してみました

Salesforce Developer Blogで紹介されていたLightning Record Picker Componentを試してみました。

Introducing the Lightning Record Picker Component | Salesforce Developers Blog


どういうものかというと次のような仕組みとなっています。(※まだベータ版)。


類似のコンポーネントで「lightning-input-fieldルックアップ フィールド」があります。よく似ているけどメカニズムが違うとのこと。

サンプルコードを試してみました

とりあえず動く状態になったのがこちら。


サンプル取引先責任者のルックアップフィールドになっています。部分一致のあいまい検索です。


対象レコードを選択した結果はこちら。ルックアップフィールドの下側の詳細情報表示しているのは一応別コンポーネントを実装して実現できるもの。(こちらもサンプルあり)

サンプルコードについて

ブログ内に記載されているサンプルコードは仕様部分の記載のサンプルで動くものではないようでした。(たぶん)


動くものはというとGitHubのlwc-recipeリポジトリで公開されています。


lwc-recipes/force-app/main/default/lwc/recordPickerHello at main · trailheadapps/lwc-recipes · GitHub


GitHubからコードを取得してsalesforceCLIのデプロイコマンドをつかってデプロイしてもいいですし、一個ずつファイルを手動作成しても作れます。


JS側はこんな感じ。・・・こんないろいろ実装必要になるの?(Apexはたしかに要らないみたいだけど)


recordPickerHelloのサンプルを動かすには、「c-contact-tile」「c-error-panel」「c-view-source」のLWCも用意する必要があります。これらもGitHubのlwc-recipeリポジトリで公開されているのでそこからコードを取得できます。


Lightning Record Picker Componentを試してみました。試してたのは基本的なサンプルコード一つだけで他にもありそうでしたが、必要な情報の確認はできました。「lightning/uiGraphQLApi」の使い方の確認にもなるので試してみると面白いサンプルコードになっていると思います。