LWC開発画面で虫眼鏡検索を設置する！
LWCで構築する際、入力関係は「lightning-input」タグを利用すると思います。
設計によっては、データの抽出条件で参照先を選択する場合が多いと思います。
対象データが絞り込める場合は、コンボボックスで代用することもありますが、
標準の虫眼鏡検索を設置したい場合がほとんどではないでしょうか。
しかし、標準の虫眼鏡検索は「lightning-input」タグを利用して構築することができません。
「lightning-input」で構築する場合、下図のように複数手順となります。
検索条件選択
「検索」ボタンにて、データを絞り込み
検索された内容から、コンボボックスをセット
表示された中から該当データを選択する
図の下に記載されているように、標準の虫眼鏡検索を利用したい場合は、
「lightning-record-edit-form」を利用する事で実装できます。
以下に、サンプルを記載します。
①HTML
②Javascript
③XML（メタファイル）
ホームと、コンポーネント、ユーティリティバーに設置可能にしています。
＜注意事項、動作内容など＞
●概要
今回は、取引先の虫眼鏡検索を実装します。
取引先責任者にある、取引先 項目を利用します。
虫眼鏡で検索された取引先名を取得して表示します。
1.について
利用するタグは、「lightning-record-edit-form」を利用します。公式サイト
基本このタグは、新規登録、更新をApexを利用せずに処理するためのものですが、登録ボタン等を設置しないならば入力欄として流用できます。
ただし、登録時の変数セット等はコーディングする必要があります。
2.について
タグ「lightning-record-edit-form」の、[object-api-name="Contact"]にて、取引先名責任者(Contact)を指定し、その中のタグ「lightning-input-field」の、[field-name="AccountId"]で、取引先を標準画面と同じ入力として表示しています。
3.について
実際の画面が以下となります。虫眼鏡にて、取引先を検索できるようになります。
画面では、必須項目となる赤の「*」がついています。これは取引先責任者の取引先は必須項目なので、自動的に必須となります。
●実際の動作
上記画面に、処理の流れで画面キャプチャを張り付けています。
1. 初期表示
2. 「取引先名」をクリックすると、取引先の一覧が表示されます。
3. 取引先を決定
①htmlの「lightning-input-field」にて、指定されている「optAccSelEvent()」メソッドが起動されます。
②Javascript関数内で、IDを取得して、変数「selAccId」にセット。
③「selAccId」に値がセットされたら、Javascriptにて、取引先のレコードが取得されます。（「selAccId」に値がセット、変更されたら自動的に取得処理を行います）
④ JavascriptのGetterのaccNameにて、画面に取引先名が表示されます。
以上、簡単に説明しましたが、LWCが初めての方には色々難しい点もあると思います。カスタム画面を構築する際に思い出していだたければと思います。なお同じ仕組みを利用して
選択リスト
複数選択リスト
制限付き選択リスト
などにも応用できます。
是非トライしてみてください！
Comments