Thursday, September 14, 2017

Sitecore Practical Series-5 - Setup layout, sublayout and rendering- key consideration.

The layout is a first window or entry point for the page, For creating any page it's recommended to define one layout.

Layout:-
  1. This is an outer and first part of the HTML.
  2. Most of the structure related items should be there like Head section.
  3. One page one layout but for preview purpose, multiple preview version can be configured.
  4. Options available for  WebForms (.aspx) and MVC (.cshtml)

This is like a master page in the web form application and in MVC it's like Views\Shared\Site.master

Sitecore location for the layouts-


Create your first layout for the site, Here you need to consider your information architecture, We are considering all possible scenario like multisites, custom components, and custom layouts.

First, create a folder for your main site and consider multisite setup


There are two options to define your layouts - one for web form based layout and second for MVC, We will be using here MVC layout.

Now create a folder for the Main site, site1 and site 2 then define MVC layout for the Main site.



Let's give it a name - HomeLayout

Select the location of the layout.



#SitecorePoint - Here we have to choose the location, Although we clicked on the selected folder, on this screen, Ideally it should default provider selection for the selected folder, instead of developer choose this item or location again.

Ok, Let's move forward.

Now at this position, we have to define where in the code/solution we want to save this layout.

Tip# Make sure our project structure and this structure should be the same to avoid the problem later.



If your project folder structure is different with the above path then please update the location here,

We have created below folder structure in the project solution, So we must need to update the path.


Update the path in the Sitecore and this will look like this

Publish the site, After the publish verify the location of deployed layout


Verify to the Sitecore virtual directory that this page has been moved there or not?

it should look like below


Layout:-
  1. Sub part of the main layout and parent of components.
  2. This is only applicable for web forms.
  3. Multiple sub layouts can be created within the placeholder.
  4. It's like dot net user control - .ascx
  5. available for  WebForms (.aspx) and MVC (.cshtml)
Note:- As this is only compatible with Webform hence we are not using this anymore


Rendering - 

This is the main section where actual site content will be rendered, there are several options within the rendering.

Controller rendering - This rendering will be based on controller and action name, in short, it will call a call file and that will run some logic or may invoke view itself.

View rendering - .chstml file can be directly plugin and can be executed.

Default section


Let's create some folder structure for the sample rendering.

Available options for the renderings.


  1. XSL Rendering - This is one of the oldest rendering in Sitecore, I rember in past this was using to render the items through XSLT, it's required a good understanding of XSLT to render the items.
  2. WebControl - Mostly used for the web form - We will not be using here.
  3. Method Rendering -Will discuss this in advance topic.
  4. URL Rendering - Will discuss this in advance topic.
  5. Controller Rendering - Controller can be defined and used here.
  6. Item Rendering - Will discuss this in advance topic.
  7. View Rendering - MVC view can be use here to render the view.

2 comments:

  1. Hi Jitender...Is there any part3,4 for the cook book?

    ReplyDelete
  2. Hi Yogesh,

    Yes, Here are the details

    http://jitendrasoni.blogspot.co.uk/2017/09/sitecore-practical-series-2.html
    http://jitendrasoni.blogspot.co.uk/2017/09/sitecore-practical-series-3-branch.html
    http://jitendrasoni.blogspot.co.uk/2017/09/sitecore-practical-series-4-sitecore.html
    http://jitendrasoni.blogspot.co.uk/2017/09/sitecore-practical-series-3-branch.html

    ReplyDelete