Lightning コミュニティ開発者ガイド
jステップ 5: カスタム検索コンポーネントを作成する
forceCommunity:searchInterface を実装する新しいカスタム検索コンポーネントを customSearch という名前で作成します。次の例では、いくつかのオブジェクトを照会して、検索語と一致するレコード ID を返しています。そして、レコード名と完全なレコードの詳細へのリンクを含むカスタムページにリダイレクトします。
1.forceCommunity:searchInterface インターフェースを実装する
<lightning:buttonIcon> コンポーネントを使用して、クリックハンドラを含めます。
searchText という属性を追加して、検索テキストを含めます。プレーン <input> ではなく <ui:inputText> コンポーネントを使用して値をバインドします。
2.Apex コントローラを作成する
コンポーネントの Apex クラスを作成する必要があります。ここでは、CustomSearchController という名前にします。String searchText を取って、見つかった ID を表す文字列のリストを返すメソッド searchForIds を実装します。今は、検索文字列そのものを返すようにします。
このクラスを controller 属性値として追加することで、コンポーネントのコントローラとして指定します。以下は、完成した検索コンポーネントの例です。
検索コンポーネントを Apex コントローラに接続しましたので、検索ボタンがクリックされたらそのコントローラのアクションを実行するようにコンポーネントに指示します。このコンポーネント用のクリックハンドラを作成し、handleClick メソッドを追加します。次の例では、入力テキストの値を読み込んでサーバ側の Apex コントローラに送信し、応答を待ちます。この例をテストすると、ブラウザコンソールに配列が記録されます。
3.SOQL で基本検索クエリを実装する
次に、サーバコントローラでさらに興味深い処理を実行してみます。Salesforce では、Apex クラスで使用できる SOQL 検索言語をサポートしています。次のクエリでは、入力検索テキストを取り、そのテキストがいずれかの項目に含まれているオブジェクトを探します。検索語と一致した取引先、キャンペーン、取引先責任者、またリードのレコード ID のリストを返すように、Apex クラスのメソッドを更新します。
4.カスタムページに検索結果を返す
レコード ID ではなく、オブジェクト自身や、ID と追加情報を返すこともできます。キーが押されるたびに検索を開始して、部分的な結果を表示するように検索コンポーネントを拡張することもできます。今はシンプルな処理にして、ID を使用してレコード名と完全なレコード詳細へのリンクを表示する新しいページにリダイレクトします。2 つの新しいコンポーネントと 1 つの新しいカスタムページが必要です。
単一のレコードを表示するコンポーネントを作成します。Lightning データサービスの例をベースとして、次のコードを使用できます。
customSearchResults というドラッグアンドドロップコンポーネントを作成します。
コントローラを作成します。ここでは、ブラウザのセッションストレージからコンポーネントに渡されるレコード ID リストを使用します。この方法では、URL に影響することなく、ページ間でデータを渡すことができます。
エクスペリエンスビルダーで、custom-search-results のページ URL を生成する Custom Search Results という名前の標準ページを作成します。customSearchResults コンポーネントを、他の必要なカスタマイズと一緒にページにドラッグします。「ステップ 1: 基本テーマレイアウト構造を作成する」で作成した、ホームページで使用しているのと同じカスタムテーマレイアウトを使用することもできます。
元の customSearchController JavaScript のコンソールログ行を、セッションストレージ値を設定して新しいページへのナビゲーションイベントを実行するコードで更新します。
コンポーネントの CSS リソースで、次の CSS ルールを追加します。
バンドルの設計リソースにコンポーネントの表示ラベルを追加します。
エクスペリエンスビルダーで に戻り、編集アイコン (
) をクリックして新しいカスタム検索コンポーネントに切り替えます。![[テーマ] 領域](https://developer.salesforce.com/docs/resources/img/ja-jp/228.0?doc_id=images%2Fsearch_swap.png&folder=communities_dev)
すべてが完成したら、テキスト文字列を入力し、[検索] をクリックして結果を確認し、新しい検索コンポーネントをテストしてください。