A forceCommunity:appLauncher component represents an App Launcher icon. Clicking this icon presents users with tiles that link to their communities, connected apps, Salesforce apps, and on-premises applications. Members see only the communities and apps that they’re authorized to see according to their profile or permission sets. To let members see the App Launcher, you must also enable the Show App Launcher in Communities permission in user profiles in Setup. This component is not available in the Salesforce1 mobile app or in Salesforce Tabs + Visualforce communities.
<aura:component> <forceCommunity:appLauncher/> </aura:component>
If you include the App Launcher in a custom theme layout, it is visible to all pages that use that custom theme layout.
Here’s an example custom theme layout component that uses the default Navigation Menu and includes forceCommunity:appLauncher.
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout"> <aura:attribute name="search" type="Aura.Component[]" required="false"/> <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/> <aura:attribute name="navBar" type="Aura.Component[]" required="false"/> <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/> <div> <div class="appLauncher"> <forceCommunity:appLauncher/> </div> <div class="searchRegion"> {!v.search} </div> <div class="profileMenuRegion"> {!v.profileMenu} </div> <div class="navigation"> {!v.navBar} </div> <div class="newHeader"> {!v.newHeader} </div> <div class="mainContentArea"> {!v.body} </div> </div> </aura:component>
You can either use the App Launcher that’s included in the default Navigation Menu, or include it in the custom theme layout and hide the App Launcher in the default Navigation Menu. To remove the App Launcher in the default Navigation Menu, select Hide App Launcher in community header in the Navigation Menu property editor in Community Builder.
Alternatively, you could create a custom Navigation Menu that includes a forceCommunity:appLauncher component. Then you could use this menu in a custom theme layout.
Here's an example custom navigation menu component that includes the forceCommunity:appLauncher component.
<aura:component extends="forceCommunity:navigationMenuBase" implements="forceCommunity:availableForAllPageTypes"> <ul onclick="{!c.onClick}"> <li><forceCommunity:appLauncher/></li> <aura:iteration items="{!v.menuItems}" var="item"> <aura:if isTrue="{!item.subMenu}"> <li>{!item.label}</li> <ul> <aura:iteration items="{!item.subMenu}" var="subItem"> <li><a data-menu-item-id="{!subItem.id}" href="">{!subItem.label}</a></li> </aura:iteration> </ul> <aura:set attribute="else"> <li><a data-menu-item-id="{!item.id}" href="">{!item.label}</a></li> </aura:set> </aura:if> </aura:iteration> </ul> </aura:component>
Here’s an example custom theme layout component that uses a custom Navigation Menu that includes the forceCommunity:appLauncher component. The custom Navigation Menu is provided by the custom component c:CustomNavMenu for this example.
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout"> <aura:attribute name="search" type="Aura.Component[]" required="false"/> <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/> <aura:attribute name="navBar" type="Aura.Component[]" required="false"/> <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/> <div> <div class="searchRegion"> {!v.search} </div> <div class="profileMenuRegion"> {!v.profileMenu} </div> <div class="navigation"> <c:CustomNavMenu/> </div> <div class="newHeader"> {!v.newHeader} </div> <div class="mainContentArea"> {!v.body} </div> </div> </aura:component>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. |