Adding functionality onto web pages is the core of all web projects. In today’s tutorial, I’m going to cover the basics of creating a sub layout in Sitecore and then adding it to a page.
Creating The Sub Layout
First open your Sitecore editor and in the content tree go to the Layouts->Sub Layouts area. Right click on ‘Sublayouts’ and select the ‘Create New’ option.
Next, we select where we want the SubLayout to appear in Sitecore. If you have a lot of controls, then you should organise this by folders etc.. in this example, I’m just going to whack it in the Sublayouts.
Next, you need to select where in your webroot you want Sitecore to create the sub layout. Sitecore will automatically create the sub layout as a user control. After you have created your control, it’s time to add some text onto it so we can see it rendering. In Visual Studio open up your project and navigate to the layout we created above.
In here we can now add any HTML we want. Remember that you need to wrap your text in tags otherwise it will not render!
Creating A Place Holder
In Sitecore, a place holder is an area that content editors can drop components into. We can add restriction to only allow certain users to add it. To add our sub layout we will need a place holder to allow us to add the control on the page.
In the content tree, again go to Layouts and right click on ‘Placeholder Settings’. As I’m only going to use this place holder on the home page, I’m going to call it ‘HomepagePlaceHolder’.
After you have created a new place holder, we now need to add our Sub layout into the allowed controls list. This is pretty straightforward, just hit the ‘edit’ button in the ‘Allowed Controls’ section. After we have the place holder set-up we need to add it onto the Homepage layout.
<form id="mainform" method="post" runat="server"> <div id="MainPanel"> <sc:placeholder key="main" runat="server" /> Before <sc:placeholder ID="Placeholder1" runat="server" key="homepagePlaceholder" /> After </div> </form>
To add a place holder, we use the Sitecore control, ‘placeholder’ and add the key in as the same name we called the place holder above. Now we should have everything we need to add the sub layout onto the page. Go to the home page in Sitecore and click ‘Page Editor’ in the Publish section in the top ribbon.
From the page editor you should now see a placeholding area on your page. Click the ‘Add to here’ button
Add your control onto the page
Now you should see the Html being displayed on the page
In today’s guide, I talked a little about what a sub layout is and how they can be used to allow content editors to drag dynamic content onto their pages. To render a sub layout onto a page we can use Sitecore place holders. A place holder creates an area on a webpage where content editors can drag sub layouts onto a page. Creating one is very quick and simple. We can then add the layout to the page and render it accordingly.