Reinoud van Dalen

December 24, 2015

Sitecore Partial Layout Presets

With atomic design being a popular thing with Sitecore solutions, bringing great flexibility, it also brings some challenges like making simple -add content component- task quite cumbersome. Let Partial Layout Presets help you!

But Sitecore already has presets

Yes, that’s true. But out of the box they really just do a layout reset with another item’s layout. So that’s an entire layout right there. I want chunks of pages not the entire page. And it has to be smarter. Because adding the same chunk twice will cause problems, even or especially when you use DynamicPlaceholders.

So.. How to install?

Installing this is extremely easy. Just…

1. Install nuget package

PM > Install-Package Sc.Mvc.PartialLayoutPresets

2. Install the Sitecore package

Locate the sitecore package in /App_Data/Sitecore packages/Sc-Mvc-PartialLayoutPresets-1.0.0.zip and install it in Sitecore.

How to use?

Since the main reason I started research on this was because of my affinity for using bootstrap with Sitecore, I’m going to do an example on a Sitecore 8.1 where I already installed my Sc.Mvc.Bootstrap package. But you can use this with other types of solutions as well.

1. Create preset page template, add bootstrap base template

This step is required so that, when you create a new preset, you will have the correct styles and base html markup. So you create a new template based on ‘Base Partial Layout Preset’.

undefined

Then you add another basetemplate of choice, and since I’m using bootstrap I’m adding the ‘Bootstrap page’ template.

undefined

2. Create a preset – ‘Three columns’

Next you can start adding presets by creating a new one under the default folder (there can be multiple folders, just add them to the config).

undefined

Then you open the preset in the xEditor and add components in following order:

  1. Add a container
  2. Add a 'Partial Layout Preset container'
  3. Add a row
  4. Add a column to the row placeholder and set the column width col-md-4
  5. Repeat last step 2 times
  6. Save the page

The result should look like:

Three column preset

3. Create a new page and apply preset

It’s time to create a page where we can add the preset to. So:

  1. Create a new Bootstrap page and open it in the xEditor
  2. Add a container
  3. Add the Three columns preset, adding a component will now also show the Three column preset because, when we configured the preset, we added the component to the container placeholder
  4. Enjoy, result should look like:

undefined

Presets with datasources

The previous example was specifically for bootstrap chunks. But you can also add other components with datasources. Just remember that the datasource will be shared and you possibly need to change it to another one. A good practice would be to make it clear you are dealing with a placeholder datasource.

undefined

Notes and thoughts

There are some things you should know and there’s some stuff I want to share.

Configure preset folders

The package comes with a default presets folder. The library will search in this folder for created presets. If you want more folders then you need to add the id’s of those folders to the GetAllowedPartialLayoutPresets configuration.

As of version 2.0.0 adding locations is a bit changed. You can add a siteName so the location will only be available when editing a page in that particular site. If siteName is not omitted then the location will be shared across all sites.

<getPlaceholderRenderings>
<processor type="Sc.Mvc.PartialLayoutPresets.Pipelines.GetPlaceholderRenderings.GetAllowedPartialLayoutPresets, Sc.Mvc.PartialLayoutPresets" patch:before="processor[1]">
<locations hint="raw:AddLocation">
<presetLocation locationId="{1ECBC6BC-9042-45A0-B1FA-94D116B501ED}"/>
<!--<presetLocation locationId="{guid}" siteName="{optionally add sitename}"/>-->
<!--the siteName attribute is used when a location should only be used for a specific site-->
</locations>
</processor>
</getPlaceholderRenderings>

One preset component per preset page

You should be aware that only the first Partial Layout Preset container will be considered when inserting a preset to a page. The insert processor will take all sub components and inject them:

undefined

Where is the preset?

It would be nice to get a clear view on where the preset resides in the xEditor. I think it’s easily fixed by adding some styling to the PartialLayoutPreset.cshtml file. I might include that later.

Edit: I just uploaded version 1.0.1 containing some styles so its clear what the preset definition is.

It automagically inherits parent placeholder settings

Now I’m not sure why this happens, but I’m happy with it. When you add a Partial Layout Preset container and you want to add components to that container, it somehow will use the parents insert options. I might need to dig in to that ;-)

Hope this helps

I’ve been missing this feature, hope others do too and start using this. This is really fresh and I haven’t used it yet in a live application. When I do, I will of course stuff in all learnings I’ve gathered and hopefully others will do so as well.

Github: https://github.com/RvanDalen/Sc.Mvc.PartialLayoutPresets
Nuget: https://www.nuget.org/packages/Sc.Mvc.PartialLayoutPresets

TAGS: sitecore bootstrap atomic design


Comments
Billy Roebuck

Thanks very much for your work on this and Sc.Mvc.Bootstrap. I've been able to get this to work for pages. Now I'm wondering how to go about using this for in-page layouts. E.g. pretend you have a website with an overall layout of header (12 col), left sidebar (3 col), main (9 col) and you want content editors to be able to insert in-page layouts (e.g. 50/50, 33/33/33) within the main (9 col) content area.


Reinoud van Dalen

Hi Billy, your welcome. You can inject as many presets as you want. So you'd have a preset with 2 rows with the header and a split contentarea. The editor would use that first. Then the editor selects the main column content placeholder and injects the 50/50 preset. Let me know if you're stuck on this, I can make an example package.


Jennifer Jang

Hi, thanks much for this amazing work! This saves me a lot of time for my project. Now I'm trying to set up presets and I've run into couple issues: 1) In step 2, when I create a preset - three cols, the resulting column path is slightly different than what you showed us in the screenshot. I have body> Container> container> Partial Layout Preset container> partiallayoutpreset> Row> row> Column. So I'm having "partiallayoutpreset" instead of container. 2) In step 3, when I create a new bootstrap page and add a container, I only see "Row" rendering to select. I don't see the Three columns preset. Can you please help me how to solve these issues? Note that in step 1, I created a preset page template in /sitecore/templates/Bootstrap/Bootstrap Preset which has bast template = Base Partial Layout Preset & Bootstrap page. Thank you! :)


Reinoud van Dalen

Hi Jennifer, wanted to let you know I just reached out to you by e-mail. Sorry for the late reply.