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.
- In the Developer Console, add the following attribute to the condensedThemeLayout.cmp file.
<aura:attribute name="showSearch" type="Boolean" default="true" />
- In the component’s markup, wrap the entire search column with an aura:if expression like this.Code Highlight:This expression is reactive, so when the attribute gets updated, the component rerenders. The complete code looks like this.
- Save the file.
- Open condensedThemeLayout.design and add the following design attribute.
- 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.