How to make the best use of toolbox and creative exchange in Sitecore Experience Accelerator?

Let us first talk about SXA toolbox which is really cool.

You can create any page very quickly by using the common renderings from the toolbox.

So I have created default tenant and default site in this tenant and I get blank homepage like follows. You can see the toolbar available. 

Let me try to use one of the available renderings.

I select the tab (composite rendering) to see how it works. It let you either select existing data source or create the new data source. 

If you select new data source then it will create this new data source in /Sitecore/content/{tenant name}/{site name}/Data by default.

Using this tab composite rendering, it gives following UI. This is like wireframes where you can update theme (color, CSS etc.) later.

Let us see what features available and how it ease the process of working on different work items in parallel.

Export Theme Feature

While developer (backend) working on Sitecore, front end developer can work on the theme, CSS etc. So how do we do it? We can export the site with one page or complete site to normal HTML pages with markup and CSS files. 

Click on Export and it will provide the following screen with different options to export the site.

You can either save on server in folder or zip it. This creates the zip file in Data\packages\CreativeExchange folder by default.

You can see there are multiple options to export your site to ease the process of collaboration with other team members with minimum dependency on each other. 

So let us see how this export feature helps. When you export the site or any page then it provides HTML pages along with CSS files. 

So for example, typically exported files in Agency Mode will be something like follows:

Front end developer can add the new classes in CSS files. Additionally in the HTML pages, it provides you placeholders for you to add your css classes. So for example, you may have something like follows in your body class.

{94013261-4413-4AA2-896D-303789FA0F56} {en} {FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3} [Ignore-This] sc82 preview default-device [Ignore-This-End] add-your-css-classes-here

You can add your new class in the css file and update your class here. 

Export Modes

There are three different modes available to export the pages with themes.

Agency drop (importable) – This drop can be used for updating the themes. Like I have mentioned that this provides placeholders for updating the css classes. Once updated, you can import these themes back into Sitecore. 

Author mode (importable) – This is exported from experience editor mode and comes with additional markup that enables on-page editing. So main advantage is that if you open this page in a browser then you can edit the content like you can do in experience editor in Sitecore. 

This mode has all the markup which is there in Agency drop and there are additional markups. Let me try to put few additional tags available in this mode.

Viewport Meta tag

<div class="meta-component-wrapper">

  <meta name="viewport" content="[Viewport field is empty on the theme item]">

  </div>

Viewport Meta tag is used to control layout on mobile browsers where content can be something like width=device-width, initial-scale=1.

SEO Meta tags

<div class="meta-component-wrapper">

<meta content="[MetaDescription field is empty or is missing on the context item]" name="description"><meta content="[MetaKeywords field is empty or is missing on the context item]" name="keywords">

  </div>

This is also once updated, you can import these themes back into Sitecore.

End-user site (non-importable) – This usually used for sampling purpose or to review as how your site will look to your visitors. This cannot be imported back into your site. Purpose for this export is to provide HTML files to your stakeholder to review the site or for some other agency to review the work offline.

Exporting buckets

There is an interesting option to export all bucketable items. This is explicitly asked for because of the simple reason that bucket can contain huge content and may not be required to export all the data. 

Once the HTML and CSS files are exported then front and back-end developer can continue working in parallel.

Import Theme

Once front-end developer provides the changes, you can import the theme and other changes.

You can either use a folder on server or import zip package. Once you import you can see the changes on site or pages wherever you have made the changes. Please note that you need to keep the folder structure intact.

Sticky Notes

SXA provides a way to exchange your notes with other developers working on the same solution. If click on rendering where you want to add the sticky notes, you will see following icon in tools bar.

SEO

You have SEO button in “Experience Accelerator” which helps in entering the SEO content. You get the following screen to enter the SEO.

Tagging Metatags 

There is tag button to add tags.

Social Metatags

You can also add metatags for social engines like twitter. So whenever any share the page, these metatags will be used. 

Prerequisites

You need to install Sitecore PowerShell extensions (full 4.1 for Sitecore 8) before you install Sitecore Experience Accelerator.

Tip: If you get running script message box after trying to create any item like tenant or site, then you may not have the correct permission on PowerShell to run.