LWCでルックアップ項目の入力ボックスを簡単に作成しよう！
この記事では Lightning Web Components(LWC) で Salesforce オブジェクトのルックアップ項目の入力ボックスを最も簡単に作成する方法をご紹介します。
ルックアップ項目の入力ボックス
Salesforce の標準的なレコード作成/編集フォームで表示されるルックアッorプ項目の入力ボックスでは、フォーカス時に最近使ったレコードを入力の候補としてドロップダウンで表示してくれます。また、キーワードを入力するとマッチしたレコード名を表示してくれ、ユーザーがレコードを選択すると、そのレコードの名前が １ 件表示されます。
そして、この動きを再現するコンポーネントを一から手作りするのは大変で、よく「同様の入力ボックスを手軽に作成できないか？」というご相談をいただきます。
入力ボックスを作成する方法
LWC では基本コンポーネントとして lightning-record-edit-form と lightning-input-field が提供されており、オブジェクト名と項目名を指定するだけで標準的な入力フォームを簡単に作成する事ができます。
この機能ではルックアップ項目の入力ボックスもサポートされており、これを活用するのが最も手軽にルックアップ入力ボックスを作成する方法になります。
下のコードは、取引先責任者の取引先項目のルックアップ入力ボックスの作成例です。
<lightning-record-edit-form object-api-name="Contact"> <lightning-input-field field-name="AccountId"></lightning-input-field> </lightning-record-edit-form>
これだけで、下のような入力ボックスを作成できます。簡単ですね。
入力ボックスで選択された値を取得する方法
入力ボックスで選択された値を取得するには、JavaScript のカスタムイベントから取得する他、クエリした要素のプロパティからアクセスする事ができます。
<!-- inputLookup.html -->
<template>
<lightning-record-edit-form object-api-name="Contact">
<lightning-input-field data-name="AccountId"
field-name="AccountId"
onchange={onChange}></lightning-input-field>
</lightning-record-edit-form>
</template>
// inputLookup.js
import { LightningElement } from "lwc";
export default class InputLookup extends LightningElement {
onChange(event) {
// カスタムイベントから値を取得する場合
console.log(event.detail.value[0]); // '001XXXXXXXXXXXXXXX'
// 要素から値を取得する場合
const selector = 'lightning-input-field[data-name="AccountId"]';
const element = this.template.querySelector(selector);
console.log(element.value); // '001XXXXXXXXXXXXXXX'
}
}
その他のタイミングでは、要素をクエリした上で value プロパティにアクセスします。今回は要素を絞り込むために data-name=”AccountId” を追加しています。 イベントハンドラ内で値を取得したい場合は、カスタムイベントから値を取得する事ができます。その際、リストが返されるのでご注意ください。
入力ボックスを作成する際の注意点
lightning-record-edit-form は一部の標準オブジェクトでは利用できないのでご注意ください。
利用前に必ず Supported Objects をご確認ください。
参考資料とリソース
さらに詳しく知りたい方はこちらも合わせてご確認ください。
- Trailhead | Aura コンポーネントのための Lightning データサービスの使用開始
- Component Reference | Record Edit Form[英語]
- Component Reference | Input Field[英語]
著者について
田中 宏樹(たなか・ひろき)は、2015 年に株式会社セールスフォース・ドットコムに入社後プリセールス部門でプロトタイプ開発を担当。現在はデベロッパーエヴァンジェリストとして主に Salesforce 開発者に向けたセッションやウェブセミナーを通じて情報発信を担当しています。
Twitter: @hrk623
