Sitecore Experience Accelerator SXA 1.6: Snippets

Sitecore Experience Accelerator 1.6

Together with Sitecore 9.0 update-1 we welcomed SXA 1.6.

Together with #Sitecore 9 update-1, we warmly welcome #SXA 1.6 https://t.co/OTCNIqcSx0 Snippets, caching, splitter enhancements and so much more! pic.twitter.com/7ZQTt46Pa0

— Gert Gullentops (@Gatagordo) January 8, 2018

One of the things I was really looking forward to are Snippets:

The Snippet rendering lets you create a reusable group of renderings. It is a composite rendering that consists of several renderings that can be designed separately in the Experience Editor.

Our analists asked for this a while ago as it makes life for editors potentially a lot easier. Partial designs are nice, but their content is fixed - you cannot alter anything on the page itself, not even switch datasources. With snippets you can now create your own "composite rendering" (in the end, that is indeed what it is) and reuse this on lots of pages. Unlike partials designs, you do need to place the snippet on the page yourself - it doesn't come automatically with the page design.

Create a grid based on (multiple) splitters and add other renderings in it. Save this bunch, reuse it, and be able to still adapt the content if needed. Oh yes, this will be used!

I installed SXA 1.6 on a vanilla Sitecore 9.0-1 (installing is still a piece of cake btw) and tried them out.

Creating a snippet

To add a snippet on your page, select Snippet from the Composites section in the toolbox (experience editor). Just as you would add any other rendering. Select the location -placeholder- where you want the snippet to appear and drag & drop.

You will get the screen to select the "Associated Content" or datasource. This is an item of type Snippet. You get 2 possible locations presented: a global folder for your site called Snippets and the local Data folder (which is located as a child underneath your current item). People working with Sitecore will recognize such a screen. 

If you want to reuse your snippet on other pages, make sure to put it in the global Snippets folder as your local Data one will not be available on other pages in your site. 

The screenshot shows an example after we had created a demo item in each folder.

Filling the snippet

You can add anything you want to the snippet. Just drag & drop all the desired renderings on it, enter content, add more datasources and so on. Just as if the snippet wasn't there. 

For my test, I just added a column splitter with a RichText component in the first column and a reusable RichText component in the second.

If you check the created items in the content editor you will notice that all was done as expected - the local datasources are underneath the snippet item in a Data folder and the reusable RT component datasource item was also on it's normal place in the global texts folder.

Reusing the snippet

Datasource Configuration

Before you start reusing the snippet, take a look at this section in the snippet item:

This is the datasource configuration which by default (standard values) will be set on "Do not copy".

You need to think about this one. I didn't find a way to set this in the experience editor by the way - if someone knows how to do that please share.. and if not possible the SXA team may put this on their backlog ;)

What are the options here:

• Do not copy - use global datasource : if this is set when the snippet is reused, the datasources are not created locally but instead the snippet will refer to the original datasources. Meaning that if you change anything, it will also change on all other locations where the snippet is used. The snippets remain coupled.
• Copy global data source to local context upon slection: if this is set when the snippet is reused, the snippet item and all the related datasources (it's children) are copied to the current item's local Data folder. Meaning that you can change all data within the snippet without affecting anything else. The snippets are not coupled anymore.
• Ask user whether the copy of global data source to local context is required upon selection: seems obvious.. ask the user which of the above he wants.

I tried all three of them and will focus further on the last one. 

If this is set, and the user added his snippet a screen is presented to him/her as seen in the screenshot on the right. For me this was crystal clear, but I did get the comment that for a (simple) end user that might not be the case. Haven't been able to test that yet, so future will tell. Anyway, I added the snippet I created twice on a new page - once with "yes" and once with "no".

If I looked in the content editor all looked fine (at first sight). The items were created locally one - for the snippet where I selected "yes" as expected. Also, as expected, the reusable RichText component datasources were not copied - the remained in the global data folder.  In the experience editor all looked fine as well. 

Small issue

Too bad I did find a little issue though.. apparently in case of "yes" the datasource items were created fine, but were not set in the snippet rendering - so the snippet was still using the global ones. It does work when you use the "copy to local" settings, so the issue is only when letting the user choose. I created a ticket with Sitecore Support and will edit here when I get a fix. 

Conclusion

As I was really looking forward to it, it's a shame I found an issue - but as I'm sure the sxa team will fix this (and I will keep you posted). The feature has everthing I think I wanted so actually: Hooray for Boo.. no, snippets :)