29 October 2014

Restricting renderings selection for placeholder

Today, I just wanted to talk about a simple thing but quite helpful when starting to develop with Page Editor: How can you specify which rendering can be inserted in a placeholder. This is really useful for Side panels for insance. You have created different types of panel (renderings) and now you want the to allow content editor to insert only those through the Page Editor such as the follownig:



Well, this is quite simple:

1- Placeholder in your code

Let's say you have a 2 columns rendering that will placed int your main layout. This 2 columns rendering will have 2 laceholders: one for the Main content and one for the Side Column. Something like:

< div class="row">
    < h1 class="col-sm-12">@Html.Sitecore().Placeholder("imagebanner")< /h1>
< /div>

< div class="row">
     < h1 class="col-sm-12">@Html.Sitecore().Placeholder("contenttitle")< /h1>
< /div>
< div class="row">
    < div class="col-sm-9 main-column">
        < article class="col-sm-12">
            @Html.Sitecore().Placeholder("contentcolumn")
        < /article>
    < /div>
    < div class="col-sm-3 sidebar">
        @Html.Sitecore().Placeholder("sidecolumn")
    < /div>
< /div>


2- Sitecore elements

On the sitecore side, the only thing you will need to define the Placeholder Settings under the path: /sitecore/layout/Placeholder Settings/xxx

You can noticed the Placeolder Key match the definition of the placeholder in our code:
@Html.Sitecore().Placeholder("sidecolumn")

You can also notice that you can select the Allowed Controls. Those will be the controls that are display to the Content Author when adding a new element in the placeholder. Once this is defined, Sitecore will automatically make the mapping. and now on the Page Editor you will see the "Add" buttons when you select the placeholder...In a future post I will describe how you can overwrite this placeholder settings for specific template...

No comments:

Post a Comment