Add Configuration Properties to the Theme Layout

Add Configuration Properties to the Theme Layout

Now let’s add one more element of flexibility to the search feature. In this step, you add a property to the theme layout component, which lets you hide the search component completely in Experience Builder.

1. In the Developer Console, add the following attribute to the condensedThemeLayout.cmp file.
   <aura:attribute name="showSearch" type="Boolean" default="true" />
   
2. In the component’s markup, wrap the entire search column with an aura:if expression like this.
   

   <aura:if isTrue="{!v.showSearch}">
      <div class="slds-col">
          {!v.search}
      </div>
   </aura:if>

   Code Highlight:This expression is reactive, so when the attribute gets updated, the component rerenders. The complete code looks like this.
   

   <aura:component implements="forceCommunity:themeLayout">
       <aura:attribute name="search" type="Aura.Component[]"/>
       <aura:attribute name="sidebarFooter" type="Aura.Component[]"/>
       <aura:attribute name="showSearch" type="Boolean" default="true" />
       <div class="slds-grid slds-grid--align-center">
           <div class="slds-col">
               <div class="slds-grid slds-grid--vertical">
                   <div class="slds-col">
                       <div class="logoContainer"></div>
                   </div>
   		     <aura:if isTrue="{!v.showSearch}">
                       <div class="slds-col">
                  	        {!v.search}
                       </div>
   		     </aura:if>
                   <div class="slds-col">
                       <c:verticalNav></c:verticalNav>
                   </div>
                   <div class="slds-col">
                       {!v.sidebarFooter}
                   </div>
               </div>
           </div>
           <div class="slds-col content">
               {!v.body}
           </div>
       </div>
   </aura:component>

3. Save the file.
   
4. Open condensedThemeLayout.design and add the following design attribute.
   

   <design:component label="Condensed Theme Layout">
      <design:attribute name="showSearch" label="Show Search Box" />
   </design:component>

5. Save the file.
   

Refresh the browser window in Experience Builder. Now when you go to Theme | Theme Settings, you have an option to show or hide the search component. Deselecting the checkbox causes the page to rerender and...poof!...the search component disappears.

Project Summary

Well look at you! All kitted out with your very own custom theme layout component! Whether you’re a Salesforce SI partner (such as Get Cloudy Consulting) or simply want to redesign your site, theme layout components provide a powerful way to customize the look and feel of an Experience Builder site. And when paired with other custom Lightning components, such as search and navigation, theme layout components offer even greater flexibility.

Now just one task remains: Proudly pat yourself on the back and admire all your hard work.