Lightning Aura Components Developer Guide
jNewer Version Available
Create Custom Search and Profile Menu Components for 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 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 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})