Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Brand Your Aura Site
Update a Template with the Theme Panel
Use the CSS Editor for Custom CSS
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Use Expressions to Add Dynamic Data to Aura Sites
Configure Swappable Search and Profile Menu Components
Ensure Custom Components in Orgs with Experience Cloud Sites Are Secure
Develop Secure Sites: Authenticated and Guest Users
Develop Secure Sites: CSP, LWS, and Lightning Locker
Add Pardot Tracking to Your Experience Builder Site
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Avoid Deployment Issues When Moving to Enhanced LWR Sites
Considerations for Deploying Authenticated LWR Sites
ExperienceBundle for Experience Builder Sites
PDF

Configure Swappable Search and Profile Menu Components

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

In Customer Service, for example, 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 theme layout component or a custom theme layout component.
  • 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 component, such as the default Customer Service theme layout component, 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 an Aura component to allow it to be used as a custom profile menu component for the 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.

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 an Aura component to allow it to be used as a custom search component for the 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.

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>