この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ステップ 5: カスタム検索コンポーネントを作成する

forceCommunity:searchInterface を実装する新しいカスタム検索コンポーネントを customSearch という名前で作成します。次の例では、いくつかのオブジェクトを照会して、検索語と一致するレコード ID を返しています。そして、レコード名と完全なレコードの詳細へのリンクを含むカスタムページにリダイレクトします。

1.forceCommunity:searchInterface インターフェースを実装する

<lightning:buttonIcon> コンポーネントを使用して、クリックハンドラを含めます。

1<aura:component implements="forceCommunity:searchInterface">
2<div class="slds-form-element slds-lookup" data-select="single">
3    <div class="slds-form-element__control">
4        <div class="slds-input-has-icon slds-input-has-icon--right">
5            <lightning:buttonIcon iconName="utility:search" variant="bare" onclick="{! c.handleClick }" alternativeText="Search" class="slds-input__icon" />
6            <input type="search" class="slds-lookup__search-input slds-input" placeholder="Search" />
7        </div>
8    </div>
9</div>
10</aura:component>

searchText という属性を追加して、検索テキストを含めます。プレーン <input> ではなく <ui:inputText> コンポーネントを使用して値をバインドします。

1<aura:attribute name="searchText" type="String" default=""/>
2...
3<ui:inputText value="{!v.searchText}" class="slds-lookup__search-input slds-input" placeholder="Search" />

2.Apex コントローラを作成する

コンポーネントの Apex クラスを作成する必要があります。ここでは、CustomSearchController という名前にします。String searchText を取って、見つかった ID を表す文字列のリストを返すメソッド searchForIds を実装します。今は、検索文字列そのものを返すようにします。

1public class CustomSearchController {
2    @AuraEnabled
3    public static List<String> searchForIds(String searchText) {
4      return new List<String>{searchText};
5    }
6}

このクラスを controller 属性値として追加することで、コンポーネントのコントローラとして指定します。以下は、完成した検索コンポーネントの例です。

1<aura:component implements="forceCommunity:searchInterface" controller="CustomSearchController">
2    <aura:attribute name="searchText" type="String" default=""/>
3    <div class="slds-form-element slds-lookup" data-select="single">
4      <div class="slds-form-element__control">
5        <div class="slds-input-has-icon slds-input-has-icon--right">
6          <lightning:buttonIcon iconName="utility:search" variant="bare" onclick="{! c.handleClick }" alternativeText="Search" class="slds-input__icon" />
7          <ui:inputText value="{!v.searchText}" class="slds-lookup__search-input slds-input" placeholder="Search" />
8        </div>
9      </div>
10    </div>
11</aura:component>

検索コンポーネントを Apex コントローラに接続しましたので、検索ボタンがクリックされたらそのコントローラのアクションを実行するようにコンポーネントに指示します。このコンポーネント用のクリックハンドラを作成し、handleClick メソッドを追加します。次の例では、入力テキストの値を読み込んでサーバ側の Apex コントローラに送信し、応答を待ちます。この例をテストすると、ブラウザコンソールに配列が記録されます。

1({
2    handleClick : function(component, event, helper) {
3      var searchText = component.get('v.searchText');
4      var action = component.get('c.searchForIds');
5      action.setParams({searchText: searchText});
6      action.setCallback(this, function(response) {
7        var state = response.getState();
8        if (state === 'SUCCESS') {
9          var ids = response.getReturnValue();
10          console.log(ids);
11        }
12      });
13
14      $A.enqueueAction(action);
15    }
16})

3.SOQL で基本検索クエリを実装する

次に、サーバコントローラでさらに興味深い処理を実行してみます。Salesforce では、Apex クラスで使用できる SOQL 検索言語をサポートしています。次のクエリでは、入力検索テキストを取り、そのテキストがいずれかの項目に含まれているオブジェクトを探します。検索語と一致した取引先、キャンペーン、取引先責任者、またリードのレコード ID のリストを返すように、Apex クラスのメソッドを更新します。

1public static List<String> searchForIds(String searchText) {
2    List<List<SObject>> results = [FIND :searchText IN ALL FIELDS  RETURNING Account(Id), Campaign(Id), Contact(Id), Lead(Id)];
3    List<String> ids = new List<String>();
4    for (List<SObject> sobjs : results) {
5      for (SObject sobj : sobjs) {
6        ids.add(sobj.Id);
7      }
8    }
9    return ids;
10}

4.カスタムページに検索結果を返す

レコード ID ではなく、オブジェクト自身や、ID と追加情報を返すこともできます。キーが押されるたびに検索を開始して、部分的な結果を表示するように検索コンポーネントを拡張することもできます。今はシンプルな処理にして、ID を使用してレコード名と完全なレコード詳細へのリンクを表示する新しいページにリダイレクトします。2 つの新しいコンポーネントと 1 つの新しいカスタムページが必要です。

単一のレコードを表示するコンポーネントを作成します。Lightning データサービスの例をベースとして、次のコードを使用できます。

1<aura:component implements="force:hasRecordId" access="global">
2    <aura:attribute name="record" type="Object"/>
3    <aura:attribute name="simpleRecord" type="Object"/>
4    <aura:attribute name="recordError" type="String"/>
5    <force:recordData aura:id="recordLoader"
6      recordId="{!v.recordId}"
7      layoutType="COMPACT"
8      targetRecord="{!v.record}"
9      targetFields="{!v.simpleRecord}"
10      targetError="{!v.recordError}"
11      recordUpdated="{!c.handleRecordUpdated}"  />
12
13    <!-- Display a header with details about the record -->
14    <div class="slds-page-header" role="banner">
15      <p class="slds-text-heading--label">{!v.simpleRecord.Name}</p>
16      <h1 class="slds-page-header__title slds-m-right--small  slds-truncate slds-align-left"><a href="{! $Site.siteUrlPrefix + '/detail/' + v.simpleRecord.Id}">Go to details</a></h1>
17    </div>
18
19    <!-- Display Lightning Data Service errors, if any -->
20    <aura:if isTrue="{!not(empty(v.recordError))}">
21      <div class="recordError">
22        <ui:message title="Error" severity="error" closable="true">
23          {!v.recordError}
24        </ui:message>
25      </div>
26    </aura:if>
27</aura:component>

customSearchResults というドラッグアンドドロップコンポーネントを作成します。

1<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
2    <aura:attribute type="list" name="recordIds" />
3    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
4    <h1>Search Results</h1>
5    <aura:iteration items="{!v.recordIds}" var="id">
6      <c:customSearchResultItem recordId="{!id}"/>
7    </aura:iteration>
8</aura:component>

コントローラを作成します。ここでは、ブラウザのセッションストレージからコンポーネントに渡されるレコード ID リストを使用します。この方法では、URL に影響することなく、ページ間でデータを渡すことができます。

1({
2  init: function(component, event, helper) {
3    var idsJson = sessionStorage.getItem('customSearch--recordIds'); 
4    if (!$A.util.isUndefinedOrNull(idsJson)) {
5      var ids = JSON.parse(idsJson);
6      component.set('v.recordIds', ids);
7      sessionStorage.removeItem('customSearch--recordIds'); 
8    }
9  }
10})

エクスペリエンスビルダーで、custom-search-results のページ URL を生成する Custom Search Results という名前の標準ページを作成します。customSearchResults コンポーネントを、他の必要なカスタマイズと一緒にページにドラッグします。「ステップ 1: 基本テーマレイアウト構造を作成する」で作成した、ホームページで使用しているのと同じカスタムテーマレイアウトを使用することもできます。

元の customSearchController JavaScript のコンソールログ行を、セッションストレージ値を設定して新しいページへのナビゲーションイベントを実行するコードで更新します。

1sessionStorage.setItem('customSearch--recordIds', JSON.stringify(ids));
2var navEvt = $A.get('e.force:navigateToURL');
3navEvt.setParams({url: '/custom-search-results'});
4navEvt.fire();

コンポーネントの CSS リソースで、次の CSS ルールを追加します。

1.THIS .slds-input__icon{
2   margin-top: -.8rem;
3}
4 
5.THIS {
6   padding: 0 10px;
7}

バンドルの設計リソースにコンポーネントの表示ラベルを追加します。

1<design:component label="Custom Search">
2 
3</design:component>

エクスペリエンスビルダーで [設定] | [テーマ] に戻り、編集アイコン () をクリックして新しいカスタム検索コンポーネントに切り替えます。 [テーマ] 領域

すべてが完成したら、テキスト文字列を入力し、[検索] をクリックして結果を確認し、新しい検索コンポーネントをテストしてください。

Lightning コミュニティ開発者ガイド

ステップ 5: カスタム検索コンポーネントを作成する

1.forceCommunity:searchInterface インターフェースを実装する

2.Apex コントローラを作成する

3.SOQL で基本検索クエリを実装する

4.カスタムページに検索結果を返す

関連項目: