Wednesday, April 15, 2015

Sitecore 8 defining placeholders, referencing them on a layout and adding a control

In Sitecore a placeholder can be added to a layout or sub-layout and put simply allow controls to be added to an area of the page. In the page editor the policyholder will have an option for the user to add to here, where they can then add add a control - these controls can also be locked down at the placeholder level to only allow certain controls in certain areas.

Define the placeholder by creating placeholder settings


  1. Log into Sitecore admin and open up the content editor.
  2. Under layout select placeholder settings.
  3. Click Placeholder to create a new placeholder settings definition
  4. Enter a name (key) for the placeholder - this is what it will be referenced as, so be descriptive
  5. If required you can now set the allowed controls and a description for the placeholder

Reference the placeholder on your layouts

Now that the placeholder has been designed, it needs to be added to a layout so that it can be used. On the control the following would be added for a web forms layout to reference a placeholder with a name/key of main.
<%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
<sc:Placeholder runat="server" Key="main" />
 For MVC the following would be used:
@Html.Sitecore().Placeholder("main")

 Use the placeholder to add a control

Now that a placeholder setting has been defined and the placeholder has been added to a layout, any Sitecore item which uses that layout can now add a control. This can be done in the page editor or in the content editor using the following steps:

  1. Navigate to the Sitecore item you wish to add the control to.
  2. On the Presentation tab select Details.
  3. Ensure the correct layout has been setup for this item (the one the placeholder was placed on), and then click edit under controls
  4. On the left select the Controls tab and then the Add button.
  5. Now select the control (sublayout or rendering) and enter the name/key of the placeholder.
  6. Click Select, then Ok and Ok to close the dialogues. After a publish your control should now appear as expected on the Sitecore item/page.

No comments:

Post a Comment