Experience Cloud 開発者ガイド
jカスタムテーマレイアウトコンポーネントの設定
開発者コンソールでカスタムテーマレイアウトコンポーネントを作成して、[カスタマーサービス] テンプレートのページの外観および全体的な構造を変換する方法を見てみましょう。
1.インターフェースのテーマレイアウトコンポーネントへの追加
テーマレイアウトコンポーネントをエクスペリエンスビルダーの 領域に表示するには、テーマレイアウトコンポーネントに forceCommunity:themeLayout インターフェースを実装する必要があります。
コードで {!v.body} を明示的に宣言して、テーマレイアウトにコンテンツレイアウトが含まれていることを確認します。ページのコンテンツをテーマレイアウト内に表示したい場合は必ず、{!v.body} を追加します。
Aura.Component[] として宣言された属性を追加して、ページのコンポーネントを含む領域をテーマレイアウトに含めます。コンポーネントをマークアップ内の領域に追加することも、ユーザがコンポーネントをドラッグアンドドロップできるように領域をオープンにしておくこともできます。Aura.Component[] として宣言された属性や、マークアップに含まれる属性はすべて、ユーザがコンポーネントを追加できるテーマレイアウトのオープン領域として表示されます。次に例を示します。
1<aura:component implements="forceCommunity:themeLayout">
2<aura:attribute name="myRegion" type="Aura.Component[]"/>
3
4{!v.body}
5
6</aura:component>カスタマーサービスでは、テンプレートヘッダーが次のロック済みの領域で構成されます。
- search ([検索パブリッシャー] コンポーネントを含む)
- profileMenu ([プロファイルヘッダー] コンポーネントを含む)
- navBar ([ナビゲーションメニュー] コンポーネントを含む)
[テンプレートのヘッダー] 領域で既存のコンポーネントを再利用するカスタムテーマレイアウトを作成するには、必要に応じて、search、profileMenu、navBar などを属性名の値として宣言します。次に例を示します。
1<aura:attribute name="navBar" type="Aura.Component[]" required="false" />マークアップに領域を追加して、テーマレイアウト本体のどこに表示するかを定義します。
以下は、シンプルなテーマレイアウトのサンプルコードです。
1<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
2 <aura:attribute name="search" type="Aura.Component[]" required="false"/>
3 <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
4 <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
5 <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
6 <div>
7 <div class="searchRegion">
8 {!v.search}
9 </div>
10 <div class="profileMenuRegion">
11 {!v.profileMenu}
12 </div>
13 <div class="navigation">
14 {!v.navBar}
15 </div>
16 <div class="newHeader">
17 {!v.newHeader}
18 </div>
19 <div class="mainContentArea">
20 {!v.body}
21 </div>
22 </div>
23</aura:component>2.テーマプロパティを含めるためのデザインリソースの追加
エクスペリエンスビルダーでテーマレイアウトプロパティを公開するには、デザインリソースをバンドルに追加します。
まず、コンポーネントでプロパティを実装します。
1<aura:component implements="forceCommunity:themeLayout" access="global" description="Small Header">
2 <aura:attribute name="blueBackground" type="Boolean" default="false"/>
3 <aura:attribute name="smallLogo" type="Boolean" default="false" />
4 ...設計リソースでテーマプロパティを定義して、UI でプロパティを表示します。次の例では、[Small Header (小さなヘッダー)] テーマレイアウトに表示ラベルと 2 つのチェックボックスを追加しています。
1<design:component label="Small Header">
2 <design:attribute name="blueBackground" label="Blue Background"/>
3 <design:attribute name="smallLogo" label="Small Logo"/>
4</design:component>
3.CSS リソースの追加による重複の問題の回避
必要に応じて、できれば標準デザイントークンを使用して、CSS リソースをバンドルに追加してテーマレイアウトのスタイルを設定します。
ダイアログボックスやフロート表示など、位置付けられた要素の重複の問題を回避する手順は、次のとおりです。
- CSS スタイルを適用します。
1.THIS { 2 position: relative; 3 z-index: 1; 4} - 要素をカスタムテーマレイアウトの div タグでラップします。
1<div class="mainContentArea"> 2 {!v.body} 3</div>