Improve the Experience for Designers in SXA with Styles

Recently I saw a nice article by Barend Emmerzaal proposing a way to improve the Experience Editor when using SXA. The article reminded me of an improvement the team and I made when rolling out a website on SXA. The problem I wanted to solve revolved around the search components and their default behavior.

Overview

Here's a brief overview of a few scenarios I may be able to address for you in this article:

• The Search Results component displays results automatically. How do you hide the results when a user has not yet performed an explicit search, such as with an address using the Location Finder component (Location Aware) or free text with Search Box component (Query Aware)?
• The Rich Text component can be used to display a message to the user until an explicit search is performed. How do you hide the message after a search is performed?
• The component is hidden when the page loads for the user, but the Designer needs to see it in the Experience Editor. How do you signal to the user which components are Search [Query|Location] Aware?

The approach I've taken requires a few steps:

1. Add SXA-supported styles to components that should be hidden/shown when certain conditions are met.
2. Add JavaScript to toggle visibility for components that should be shown/hidden after specific conditions are met.

Note: Screenshots are taken from an instance of Sitecore running XA.Reference. 

Final Result

Let's have a look at the final results in the Experience Editor. If you are still interested afterwards, keep on reading.

Example with hidden Search Results

The Search Results component is currently hidden in the left column. Here's how that looks in the Experience Editor. The component is part of a Partial Design, which explains why no other component is seen.

Style "Show If Query" indicated on Search Result component

Search Box visible on Page

The "Show If Query" indicates that a style is applied to show the Search Result component when a user-provided query exists.

Getting Started

Begin by adding the stylesheet and script linked below into your theme. To keep things simple I've added the items in the Basic(2) theme; you could however separate between Editing Theme and Basic(2).

Next I've added two styles to the component, the first to make it query-aware, and the second to show when a query has been entered.

Styles added using SXA selector

You can make these new styles available by navigating to the Presentation->Styles section under your sit and using the appropriate insert options.

Style value matches Stylesheet

So how does this all work together? Let me explain:

1. The style "search-query-aware" tells the JavaScript that it should monitor components with the class whenever the query hash changes.
2. The style "search-query-show" tells the JavaScript that the component should be hidden on page load but made visible when the query hash is not empty.
3. The style "search-query-true" is added and "search-query-false" is removed when the query hash is not empty. Reverse this when "search-query-hide" is used.

Now let's have a look at this in action.

All the sample code can be found here: