Create Custom Search and Profile Menu Components for Experience Builder | Using Components | Lightning Aura Components Developer Guide

Create custom components to replace the Customer Service template’s standard Profile Header and Search & Post Publisher components in Experience Builder.

forceCommunity:profileMenuInterface

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

Here’s the sample code 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    <lightning:avatar variant="circle" src="" fallbackIconName="standard:person_account" alternativeText="Account User"/>
4    <lightning:buttonMenu alternativeText="Profile Menu" variant="container" iconName="utility:connected_apps">
5        <aura:iteration items="{!v.options}" var="itemLabel">
6            <lightning:menuItem label="{!itemLabel}" />
7        </aura:iteration>        
8    </lightning:buttonMenu>
9</aura:component>

forceCommunity:searchInterface

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

Here’s the sample code for a simple search component.

1<aura:component implements="forceCommunity:searchInterface" access="global">
2    <div onkeyup="{! c.handleKeyUp }">
3    <lightning:input
4            aura:id="search-input"
5            label="Search"
6            type="search"
7            variant="label-hidden"
8        />
9    </div>
10</aura:component>

1({
2    handleKeyUp: function (cmp, evt) {
3        var isEnterKey = evt.keyCode === 13;
4        if (isEnterKey) {
5            var queryTerm = cmp.find('search-input').get('v.value');
6            //do something with user input
7        }
8    }
9})

See Also