Sitecore Experience Accelerator - SXA

Note !!! I have moved my blog to https://pramisoni.wordpress.com/ . Please Visit https://pramisoni.wordpress.com/ for old and new posts.

Hi Friends ,

From last few days, I was reading about a very interesting topic (Sitecore Experience Accelerator).

From last few month, it's getting popular in Sitecore community and discussions. I am sure from some of us must have already started working into this  .   

I found it's interesting to me and thought to share my experience with you .

So What is Sitecore Experience Accelerator ( SXA) ?

It is fully integrated into the Sitecore editing function, Experience Accelerator (XA) reduces your time to market by allowing content teams to design, assemble and deploy web content across channels with fewer development resources.

This is a theoretical definition which you may read into details from Sitecore website .

Sitecore Experience Accelerator come with some new feature and best practices . In my previous post, I have written about Helix best practices . Sitecore Experience Accelerator use helix practices by default

1. Drag-and-drop page assembly
2. Dynamic wireframes
3. Best practice by default
4. Separate IA from design

Let's go into some practicality  

How to configure and work with this new concept ?

Steps to configured

1. Install Sitecore Experience Platform 8.2 rev. 160729 (8.2 Initial release).

2. Sitecore PowerShell extensions (full 4.1 for Sitecore 8) from https://marketplace.sitecore.net/Modules/S/Sitecore_PowerShell_console.aspx

3. Download Sitecore Experience Accelerator 1.1 rev. 161004 for 8.2 from https://dev.sitecore.net/Downloads/Sitecore_Experience_Accelerator/11/Sitecore_Experience_Accelerator_11_Initial_Release.aspx and install it as package installation Sitecore

Note : This required Sitecore license include ( Sitecore XSA )

To Check XSA license are included , Go to Sitecore - Control Panel - Click on “Installed licenses”

And see if you have “Sitecore.SXA” listed in agreement as in attached screenshot.

 

SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel and you can deploy and maintain multiple sites quickly and cost-effectively. Once a basic user experience plan is in place, everyone can get started on the platform. For example, the content author can start entering the content in the wireframe environment, while the front-end developer works on the theme, and the developer sets up the data templates.

XA uses the following concepts:

• Toolbox
• Grid and column layout
• Pluggable themes
• Page designs and partial designs
• Creative Exchange
• Assets Optimizer

In this post, I am more concentrating in the demonstration of how its work . For more theoretical guideline follow Sitecore official site  Experience Accelerator (XA) . In rest of this post, you will see more practical example and screenshots .

Create a tenant and a site

The SXA content architecture includes tenants and sites. SXA supports multi-tenancy, which means that you can run multiple sites on a single instance of Sitecore. Each tenant can include multiple related sites

Create a new tenant.

When you will try to create new tenant you will get the list of the feathers to be selected . Here you can choose which feathers is required to be available on the new website . I will suggest keeping all for learning.

After click on ok “New Tenant”  folder will be generated in 3 location , which will have a specific setting of that tenant and sites reside inside of that tenant . This “New Tenant” folder will have default template structure for pages and setting creation  .

After creation of tenant now we need to create sites inside of talent .

The new site will have the list of options to be configured  . When you will click on site a new configuration window will be appeared and will have 3 Tabs to configure site setting ( General , Feature , Theme ). General option is to configure hostname , site name etc. See in attachment for General Setting.

In feature option , a list of features to be configured for that site will appear which is nothing but available rendering options for this site . The only selected option will appear as part of available rendering option in site . This selection will affect on 2 places

1. Tool Box in experience editor
2. “Select a Rendering “ window In Experience Editor when click “Add Component ”

The third and last tab , Theme , it will give the option to choose a theme . Sitecore Experience Accelerators provide default theme “wireframe “ .  A theme can be added more .

Sitecore Experience Accelerators support multisite . These are the basic setting that requires configuring a site in Sitecore Experience Accelerators.

Let's move to the site structure and options .

Here will talk about all options which come default when we create a site  .

1. Home :  This is the home page for the site and will have subsequence pages of the site .
2. Media :  Will contain media item for the site
3. Data : It will come with all empty container to keep data source . Example : Accordions , Carousels etc . This will have an impact based on the feature/ Rendering we have selected while creation of a site as described above . That means only selected rendering will have Data container folder to keep data source .This can be modified of course .

4. Presentation : There are a bunch of options are available and every option has their own purpose and meaning . Will describe some of the important options here .

 

4.1   Available rendering :  This option will provide all the available renderings into groups . This option will also have an impact from the feature list , only selected features option , while creation of the site , will be part of the available rendering .

Let's go into details

As said , All renderings are grouped into based on behavior .

Let's take the example of Navigation as shown in the screenshot .

Here I consider navigation is a group and have multiple rendering available default based on behavior.

I really liked this option as it gives a clear separation between renderings based on their behavior and makes work very handy as it's give same option in toolbox and Experience editor.

4.2  Page Design : Page design will give you flexibility to manage

1. Design
2. Theming .

It gives the option to map design( Layout)  with page type ( Template ) . SXA provide the option to choose addition partial design/ Layout  apart from the one from the main layout in presentation . In screenshot , Home Template mapped to “default Page design /Partial Layout ”

And page Template is mapped to other “page design/ Partial Layout  “

Let's look inside more

What is inside of Page Designs option  ?

As shown in screenshot , page design option will have option select Partial layout which will be part of the page design and provide partial layout apart from the main layout .

4.3 Rendering Variant :

SXA comes with a set of default renderings and rendering variants. Rendering variants are configurable adaptations of the default renderings. To further encourage reusability, designers and front-end developers can also create new rendering variants. This gives authors more options in the way they present their content.You can create your own variation of a rendering by adding a variant in the Content Editor. More detail is available in Sitecore site Sitecore Experience Accelerator . I Really found this is very handy . In my previous post Deck Modifier , we used a similar concept but not exactly same and it was without SXA . Somewhere I can relate with to as a rendering parameter for my own understanding .

For selecting a variant you need to go to Experienced editor and select a variant as shown in screenshot .

And here you can see how it will look in Experience editor . Remember accurate field name is very important . Variant will be applied based on the field name .

4.4 Style : Sitecore accelerator comes with a default set of styles with wireframe themes . Styles can be customise added / Deleted / Modified .

So that means if a class can be created and can be available for rest of the rendering based on the selection in Allow rendering .

Let's see the example .I have created a demo Style and selected bunch of rendering where this new style will be available .

So that means My “Demo Style” should appear in all the rendering which I have selected .

Now let's move to the Experienced editor to see how it work .

It will appear in “Control Properties” after click on “Edit component property” while adding a Component from experience editor .

We forgot to talk about template and layout structure in SXA. Let's go into template structure first . I have highlighted 3 major part here . The feature , Foundation, and Project .

Feature :The Feature layer contains concrete features of the solution as understood by the business owners and editors of the solution, for example, news, articles, promotions, website search etc.

Foundation : Conceptually, it is helpful to think of all the frameworks and software you rely on in your solution as foundation modules. This includes the Sitecore platform,NET, and other technology frameworks .These are typically very stable modules.

Project : The Project layer provides the context of the solution. This means the actual cohesive website, such as the page types, layout, and graphical design.

So whenever you create a new tenant it will automatically generate a default structure as shown in screenshot inside of project folder .

These folder structure has been generated based on helix principles .  I suggest looking into helix principles also for better understanding about SXA structure .