forceCommunity:appLauncher

Displays the App Launcher in Lightning communities to make it easy for members to move between their communities and their Salesforce org. Add this component to any custom Lightning component in communities.

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 Salesforce 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>
           <forceCommunity:appLauncher/>
        </div>
        <div>
           {!v.search}
        </div>
        <div>
            {!v.profileMenu}
        </div>
        <div>
            {!v.navBar}
        </div>
        <div>
            {!v.newHeader}
        </div>
        <div>
            {!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>
            {!v.search}
        </div>
        <div>
            {!v.profileMenu}
        </div>
        <div>
            <c:CustomNavMenu/>
        </div>
        <div>
            {!v.newHeader}
        </div>
        <div>
            {!v.body}
        </div>
    </div>
</aura:component>

Attributes

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.