Lightning Communities Developer Guide

Get Up to Speed with Lightning Communities
Develop Lightning Communities: The Basics
Customize the Look and Feel of a Lightning Template
Update a Template with the Theme Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Community
Customize the Theme Layout of Your Template
Create Custom Content Layout Components for Communities
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Communities
Example: Build a Condensed Theme Layout Component
Develop Secure Code: Locker Service and Stricter CSP
Analyze and Improve Community Performance
Connect Your Community to Your Content Management System
Deploy a Community from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Configure Swappable Search and Profile Menu Components

Create custom components to replace the Customer Service template’s standard Profile Header and Search & Post Publisher components in Community Builder.
In Customer Service, the Template Header consists of these locked regions:
  • search, which contains the Search Publisher component
  • profileMenu, which contains the Profile Header component
  • navBar, which contains the Navigation Menu component
Template Header
These designated region names let you easily:
  • Swap search and profile components in the default Customer Service theme layout or a custom theme layout.
  • Swap theme layout components while persisting existing customizations, such as the selected search component.
When a component implements the correct interface—forceCommunity:searchInterface or forceCommunity:profileMenuInterface, in this case—it’s identified as a candidate for these regions. They therefore appear as swappable components in a theme layout, such as the default Customer Service theme layout, which declares search or profileMenu as an attribute name value.
1<aura:attribute name="search" type="Aura.Component[]" required="false" />

forceCommunity:profileMenuInterface

Add the forceCommunity:profileMenuInterface interface to a Lightning component to allow it to be used as a custom profile menu component for the Customer Service community template. After you create a custom profile menu component, admins can select it in Community Builder in Settings | Theme to replace the template’s standard Profile Header component.

This code is for a simple profile menu component.

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

Add the forceCommunity:searchInterface interface to a Lightning component to allow it to be used as a custom search component for the Customer Service community template. After you create a custom search component, admins can select it in Community Builder in Settings | Theme to replace the template’s standard Search & Post Publisher component.

This code is for a simple search component.

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>