Lightning コミュニティ開発者ガイド
j交換可能な検索およびプロファイルメニューコンポーネントの設定
エクスペリエンスビルダーで、カスタマーサービステンプレートの標準 [プロファイルヘッダー] コンポーネントや [検索パブリッシャーと投稿パブリッシャー] コンポーネントと交換するカスタムコンポーネントを作成します。
カスタマーサービスでは、テンプレートヘッダーが次のロック済みの領域で構成されます。
- search ([検索パブリッシャー] コンポーネントを含む)
- profileMenu ([プロファイルヘッダー] コンポーネントを含む)
- navBar ([ナビゲーションメニュー] コンポーネントを含む)
これらの指定領域名により、以下を簡単に行うことができます。
- デフォルトのカスタマーサービステーマレイアウトまたはカスタムテーマレイアウトで、検索コンポーネントとプロファイルコンポーネントを交換する。
- 既存のカスタマイズ (選択中の検索コンポーネントなど) を維持したまま、テーマレイアウトコンポーネントを交換する。
コンポーネントが正しいインターフェース (このケースでは forceCommunity:searchInterface または forceCommunity:profileMenuInterface) を実装すると、これらの領域の候補として識別されます。そのため、これらのインターフェースはテーマレイアウト (デフォルトのカスタマーサービステーマレイアウトなど) に交換可能なコンポーネントとして表示され、search または profileMenu が属性名値として宣言されます。
1<aura:attribute name="search" type="Aura.Component[]" required="false" />forceCommunity:profileMenuInterface
forceCommunity:profileMenuInterface インターフェースを Lightning コンポーネントに追加して、カスタマーサービスコミュニティテンプレ���トのカスタムプロファイルメニューコンポーネントとして使用できるようにします。作成したカスタムプロファイルメニューコンポーネントは、システム管理者がエクスペリエンスビルダーの で選択して、テンプレートの標準 [プロファイルヘッダー] コンポーネントと交換できます。
シンプルなプロファイルメニューコンポーネントのコードを示します。
1<aura:component implements="forceCommunity:profileMenuInterface" access="global">
2 <aura:attribute name="options" type="String[]" default="Option 1, Option 2"/>
3 <ui:menu >
4 <ui:menuTriggerLink aura:id="trigger" label="Profile Menu"/>
5 <ui:menuList class="actionMenu" aura:id="actionMenu">
6 <aura:iteration items="{!v.options}" var="itemLabel">
7 <ui:actionMenuItem label="{!itemLabel}" click="{!c.handleClick}"/>
8 </aura:iteration>
9 </ui:menuList>
10 </ui:menu>
11</aura:component>forceCommunity:searchInterface
forceCommunity:searchInterface インターフェースを Lightning コンポーネントに追加して、カスタマーサービスコミュニティテンプレートのカスタム検索コンポーネントとして使用できるようにします。作成したカスタム検索コンポーネントは、システム管理者がエクスペリエンスビルダーの で選択して、テンプレートの標準 [検索パブリッシャーと投稿パブリッシャー] コンポーネントと交換できます。
シンプルな検索コンポーネントのコードを示します。
1<aura:component implements="forceCommunity:searchInterface" access="global">
2 <div class="search">
3 <div class="search-wrapper">
4 <form class="search-form">
5 <div class="search-input-wrapper">
6 <input class="search-input" type="text" placeholder="My Search"/>
7 </div>
8 <input type="hidden" name="language" value="en" />
9 </form>
10 </div>
11 </div>
12</aura:component>