Understanding Composite Renderings in SXA Sitecore Experience Accelerator

Naturally every well planned traditional (i.e. non-SXA) should be built on the idea of layers. This begins at the data template level with proper template inheritance setup, that is then followed by a well-planned presentation layer leveraging a combination of structural renderings (some fashion of columns and rows) and content renderings.

Sitecore Experience Accelerator (SXA) formalizes this idea through Composite Renderings, Partial Designs, and Page Designs. Each providing a little more structure and detail to the page as you assemble it.

Composite Renderings

Composite Renderings are nothing new to a Sitecore based site, as the name suggests it is a single rendering that wraps children items as well as other renderings simplifying complex presentation needs.

The most basic example of a composite renderings is the all-powerful Accordion. An accordion is a popular method for placing large amounts of related, and important content, on a single page without it feeling overwhelming. When thinking of an accordion we expect to have the following, where callout #1) represents some sort of title that represents the hidden content and #2) is some form of content, which could be as simple as text, or as complex as a video or interactive map.

Composite Renderings - Accordion Explanation

SXA provides right out-of-the-box the following composite renderings Accordion, Carousel, Flipping, Snippet, and Tabs. From this list you are probably very familiar with accordions, tabs, and carousels and how they fundamentally function.

Flipping was a new concept to me by name, while the functionality is something I’ve seen (and sure you have as well) many time over. The idea of a flipping rendering is that on hover or click a different set of content will display. As with all composites, this content can be simple text or other renderings can be layered into it. See the official details at Sitecore Flip Documentation.

sxa_Full_Empty_Cup

Snippets

I consider the snippet to be the purest form of a composite rendering. The snippet provides a single place holder that you can layer any number of renderings. What makes this useful, is that the snippet can be built with full focus on just it, without concern for the page(s) it will be used on. Once constructed a snippet can be placed on any number of pages to re-use the presentation setup.

Data Source Configuration

A unique feature of the snippet, is that the usage can take a couple of paths depending on intent of usage. Through the Content Editor there are three setting options for a snippet item regarding how to handle the data sources of applied to any renderings placed within the snippet.

Snippet - Data Source Configuration

  • Do not copy – use global data source
    • This is the default setting
    • On this path the renderings within the snippet will ALWAYS reference the content as defined in the site’s data folder
    • Every re-use of the snippet on a page will point to the same content (i.e. data source)
    • If a change is made on a page, all pages will be updated as well
    • When to use this option:
      • This option is helpful if the snippet is leveraged for page structure needs such as columns and rows, allowing the structure to be defined once then re-used through-out the site
      • When placing actual content related renderings within, you must be concerned with the possibility of an update occurring and having that propagate automatically across all usages of the snippet. This could be reasonable for some form of global promotion item but needs to be well considered.
  • Copy global data source to local context upon selection
    • A copy of the snippet, its configuration, and content are added to the page (the data folder below the current page)
    • Changes made to the snippet are only applied for that specific page
    • The user is not prompted of this occurring, it just happens
    • Interesting fact, is all the naming used for the original snippet will be the new copied item as well
    • When to use this option:
      • This option is used when the snippet is a repeatable visual element, where content will differ per page context
      • Use this option when layering snippets into partial designs
  • Ask user whether the copy of global data source to local context is required upon selection
    • This option allows the content editor to choose how to reuse the snippet
    • The editor will get the following message and displays the following message:
      Create Snippet - Prompt to copy or use global
    • When to use this option:
      • Useful for instances where content re-use maybe required in some instances and others the visual appeal is all that is required
      • Need to take into account the level of expertise of the editors, when choosing this setup option

Design and Building a Header Snippet

The best way to understand the snippet is for us to build out a global element for the Paragon Coffeehouse, such as the header.

There are two ways to go about creating our snippet. The first way is working from the context of a page.

  1. Expand the content tree to your Home page.
  2. Right click and select the option for Experience Editor
    Create Snippet - Open Experience Editor
  3. Once in Experience Editor, from the Toolbox expand ‘Composites’ section
  4. Click on Snippet
  5. Drag Snippet into the Header placeholder and drop it.
    Create Snippet - Drag Snippet to Page
  6. After dropping the Snippet, you’ll be created with the familiar ‘Select the Associated Content’ modal. From this modal we will create a new snippet content item that will be referenced by the rendering by clicking Create next to the folder we want to place the information into…for this sample click next to ‘Snippets’ for the current site.
  7. Next you will see the ‘Insert Item’ modal, in which we decide what to create…select Snippet Item
  8. Provide a name, for the example will call it Global Header.
  9. Click OK
    Create Snippet - Create Snippet Item
  10. After creating the ‘Select the Associated Content’ modal will refresh with our new item. Select Global Header and click OK
    Create Snippet - Select Global Header Snippet
  11. The page will update, and you will see a helpful message in the header placeholder now stating, “No components in snippet.” By clicking into the rendering, the toolbar will pop-up and provide an action to ‘open item for editing’. Click this.
    Create Snippet - Edit Snippet
  12. Upon clicking a new window/tab will open with the Experience Editor of the snippet. This allowing you to start building it by dragging the different elements required.
  13. Our header is constructed of the following elements
    Create Snippet - Snippet Header
    A. Page Structure creating 3 rows for content
    B. Image (re-usable), within a column
    C. Flip Composite Rendering
    D. Login control within Flip-side
    E. Navigation in own row
    F. Breadcrumb in own row.
  14. Closing the Snippet tab, and refreshing our home page we see the following
    Create Snippet - Snippet Header on Home Page
  15. Let’s return to the Content Editor and create a second page (calling it ‘Company’) and open it in Experience Editor.
  16. From the Experience Editor, drag the Snippet rendering into the ‘Header’ placeholder. When the ‘Select the Associated Content’ modal appears, select Global Header and click OK.
  17. You should end up seeing the same header as above.
    Create Snippet - Snippet Header on Company Page

Reference

Advertisements

One thought on “Understanding Composite Renderings in SXA Sitecore Experience Accelerator

  1. Pingback: Partial and Page Designs in SXA | The Code Attic

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.