Lightning コンポーネント開発者ガイド
jforceCommunity:appLauncher
forceCommunity:appLauncher コンポーネントはアプリケーションランチャーアイコンを表します。このアイコンをクリックすると、コミュニティ、接続アプリケーション、Salesforce アプリケーション、およびオンプレミス型アプリケーションにリンクされたタイルが表示されます。メンバーに表示されるのは、プロファイルや権��セットに従って表示が許可されるコミュニティとアプリケーションのみです。メンバーがアプリケーションランチャーを表示できるようにするには、[設定] のユーザプロファイルで [コミュニティでアプリケーションランチャーを表示] 権限も有効にする必要があります。このコンポーネントは、Salesforce1 モバイルアプリケーションまたは Salesforce タブ + Visualforce コミュニティでは使用できません。
1<aura:component>
2 <forceCommunity:appLauncher/>
3</aura:component>アプリケーションランチャーをカスタムテーマレイアウトに追加すると、そのカスタムテーマレイアウトを使用するすべてのページに表示されます。
デフォルトのナビゲーションメニューを使用し、forceCommunity:appLauncher を含むカスタムテーマレイアウトコンポーネントの例を次に示します。
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="appLauncher">
8 <forceCommunity:appLauncher/>
9 </div>
10 <div class="searchRegion">
11 {!v.search}
12 </div>
13 <div class="profileMenuRegion">
14 {!v.profileMenu}
15 </div>
16 <div class="navigation">
17 {!v.navBar}
18 </div>
19 <div class="newHeader">
20 {!v.newHeader}
21 </div>
22 <div class="mainContentArea">
23 {!v.body}
24 </div>
25 </div>
26</aura:component>アプリケーションランチャーは、デフォルトのナビゲーションメニューに含まれているものを使用することも、カスタムテーマレイアウトに含めてデフォルトのナビゲーションメニューのアプリケーションランチャーを非表示にすることもできます。デフォルトのナビゲーションメニューに含まれるアプリケーションランチャーを削除するには、コミュニティビルダーの [ナビゲーションメニュー] プロパティエディタで [コミュニティヘッダーにアプリケーションランチャーを表示しない] を選択します。
または、forceCommunity:appLauncher コンポーネントを含むカスタムナビゲーションメニューを作成できます。そして、カスタムテーマレイアウトでこのメニューを使用します。
forceCommunity:appLauncher コンポーネントを含むカスタムナビゲーションメニューコンポーネントの例を次に示します。
1<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes">
2 <ul onclick="{!c.onClick}">
3 <li><forceCommunity:appLauncher/></li>
4 <aura:iteration items="{!v.menuItems}" var="item">
5 <aura:if isTrue="{!item.subMenu}">
6 <li>{!item.label}</li>
7 <ul>
8 <aura:iteration items="{!item.subMenu}" var="subItem">
9 <li><a data-menu-item-id="{!subItem.id}" href="">{!subItem.label}</a></li>
10 </aura:iteration>
11 </ul>
12 <aura:set attribute="else">
13 <li><a data-menu-item-id="{!item.id}" href="">{!item.label}</a></li>
14 </aura:set>
15 </aura:if>
16 </aura:iteration>
17 </ul>
18</aura:component>forceCommunity:appLauncher コンポーネントを含むカスタムナビゲーションメニューを使用するカスタムテーマレイアウトコンポーネントの例を次に示します。この例では、カスタムコンポーネント c:CustomNavMenu によってカスタムナビゲーションメニューが提供されています。
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 <c:CustomNavMenu/>
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>認証
| 属性名 | 属性型 | 説明 | 必須 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 |