Saturday, November 18, 2017

Thank You Community Leaders 2017

In the season of Thanksgiving, it felt appropriate to share some appreciation for members of the community. This list is by no means a complete and thorough account of what I received but it's a good start.

Akshay Sura

Akshay is a friend to everyone. Some of my favorite shirts were gifts from him. He's the reason we have and the much needed "Unofficial Sitecore Training". It's no wonder he received the most community votes for the "Core Community Friend Award 2018". Thank you Akshay for all you do for me and the community. Without you there would be a huge hole in the TEAM. Reach him on Slack as @akshaysura.

Kamruz Jaman

Lieutenant Troll and one of the best Sitecore Technical Support members on Slack. Kidding aside, he has helped so much through his blog posts and insights while communicating on the Sitecore Slack Chat. The Core Community Award was a big hit with your help. Overall funny guy and easy to get along with. Thank you Kamruz for all you do for me and the community. Without you the bridge would be a lonely place. Reach him on Slack as @jammykam.

Kam Figy

Thank you for your strangely named open source products like Unicorn, Rainbow, Dianoga, and Pickled Feet Beaver. Unicorn has been a huge time and money saver. Thank you Kam for being the super smart guy we all need. Reach him on Slack as @kamsar.

Mark Cassidy

Thank you for possessing the grit needed to keep the Sitecore Stack Exchange alive. IIRC you stated this was the third try and so far it's a huge success. There is so much we've gained by having a Stack Exchange. Looking forward to our next root beer! Reach him on Slack as @cassidydotdk.

Adam Najmanowicz

Thank you for being foolish enough to let me help with SPE and leaving all the book documentation to me :) Your help with Zen Garden and now SXA has been fantastic.You nominating me for my first MVP award has made all the difference in my participation within the Sitecore community. Thank you Adam for telling me "no" when my ideas are crazy and "yes" when you're tired of arguing. Looking forward to our next root beer....well I'll drink the root beer since you think it tastes like toothpaste. Reach him on Slack as @adamnaj.

Honorable Mentions

Thank you Mike Reynolds for the copious amounts of blogging you did that help me get a jump start on Sitecore development. The Core Community Award was a big hit with your help as was the "Unofficial Sitecore Training". Also, thank you for nominating me for my first MVP award; look how much I've grown! Reach him on Slack as @sitecorejunkie.

Thank you Una Verhoeven for all your Sitecore community work and helping me with SXA. Your help made my first implementation that much better. Reach her on Slack as @una.verhoeven.

Final Thoughts
I encourage you to show your appreciation for those that have really helped you. Consider recommending those same people for Sitecore MVP. Also, try not to DM those people on Slack for support; stick to the group channels and only shift to the DM when they invite you to do so.

Friday, November 17, 2017

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.


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: