lightning-record-picker を使ってみる

学習の目的

この単元を完了すると、次のことができるようになります。

• lightning-record-picker を実装して設定する。
  
• lightning-record-picker コンポーネントを使用してレコードを検索する。
  

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

lightning-record-picker コンポーネントを使用すると、ユーザーが Salesforce レコードをすばやく検索して選択できます。このコンポーネントの動作と表示の設定方法を学習し、さらに絞り込みを有効にしてユーザーが必要なレコードを検索して表示できるようにします。ハンズオン Challenge については、このコンポーネントを Playground 組織で使用して、お客様が在庫を検索する新たな方法を設定します。

lightning-record-picker コンポーネントを使用してレコードを検索する

Salesforce アプリケーションで lightning-record-picker コンポーネントを使用し、デスクトップユーザーとモバイルユーザーが Salesforce レコードをすばやく検索して選択できるようにします。コンポーネントの動作と表示を設定し、絞り込みを有効にして、ユーザーがまさに必要とするレコードを取得して表示できるようにします。この機能は、前回のリリースから一部変更され、今回正式リリースされました。検索可能なレコード数が、これまでは 50 件でしたが、100 件になりました。また、無効な仕様を設定すると明確なエラーメッセージが表示されるほか、新しい属性もサポートされています。このコンポーネントでは、オフラインでの使用を可能にする GraphQL ワイヤーアダプターが使用されています。

対象: この機能は、すべてのエディションの Lightning Experience で使用できます。

方法: 以下は lightning-record-picker コンポーネントをはじめて使用する場合の一例です。コンポーネントの属性は、入力項目の表示ラベル、検索するオブジェクト、レコードの選択を処理するコールバックを指定します。

<lightning-record-picker
    label="Select a record"
    placeholder="Search..."
    object-api-name="Contact"
    value={initialValue}
    onchange={handleChange}
></lightning-record-picker>

上記の例は UI で次のように示されます。

value 属性にレコード ID を指定すると、レコードピッカーコンポーネントにデフォルトの選択されたレコードが表示されます。

この単元で、lightning-record-picker を使用してユーザーがレコードを検索して選択する方法と、コンポーネントの動作や表示を調整する方法を学びました。次は、lightning-record-picker コンポーネントに関する知識を、お客様がボートの在庫を検索する実践的なケースに適用します。