Shared vs Final Layouts in Sitecore explained
I find myself frequently explaining the concept of Shared and Final Layouts and how this works with template inheritance in Sitecore. The concept takes a little time to wrap your head around, so I'll try to boil it down to the essentials with the help of a diagram.
The scenario illustrated below is a simple example of inheritance in Sitecore. It has the following structure:
- At the root is a "Base Template" that all of my other templates inherit from.
- One level down is a "Web Page Template" that inherits from "Base Template". All "Web Pages" use this template.
- At the bottom level is my Content item that is an instance of "Web Page Template".
Each of these three templates have a Shared and Final Layout. The blue boxes represent renderings/sublayouts.
So what is happening with the renderings and templates in this scenario? Let's discuss each template individually.
Base Template
We've added rendering "A" to the Shared Layout of the Base Template. Doing this automatically adds this rendering to the Final Layout of the same template. Now, any template that inherits from Base will have Rendering A in both its Shared Layout and Final Layouts by default.
i.e. The Shared Layout of "Web Page Template" is taken from the Final Layout of "Base Template". The Final Layout of "Web Page Template" will default to values of its own Shared Layout.
As such, Rendering A will appear as a control on any items we create by default. We can also set a default datasource for this control in the Base Template. e.g. you have a control in the footer of every page, but want the datasource to be the same on all pages.
Web Page Template
Rendering B is a special one that we don't want to appear on all items. We can achieve this by adding it to a template that is a child of Base. The Web Page Template in the example has had Rendering B added to the Final Layout.
i.e. Any item that inherits from Web Page Template will now have renderings A and B by default.
Web Page instance (i.e. item in your content tree)
Finally we have our content item that inherits from the Web Page Template. By default it will have Renderings A and B on it.
But what if we want this one instance to be different from the other Web Pages on the website? We can use the Final Layout to override the defaults for this template type.
In this example we have removed Rendering B and added Rendering C on the Final Layout of this item. All other Web Page items will be unaffected, the Final Layout only impacts this one instance.
In Summary
The Shared Layout reflects what we have inherited, the Final Layout reflects our customisation of this.
One gotcha with all of this is when a template inherits from multiple templates. The default renderings will only come from the first template in the list of parent templates. Where possible, keep your inheritance simple; only a couple levels deep and only from one parent.