Display placeholder names in Sitecore Experience Editor | Microsoft
Microsoft Blog

Display placeholder names in Sitecore Experience Editor

When working in the Sitecore Experience Editor, sometimes it can be a bit annoying to find various placeholders on a page. This can also cause some frustrations for content authors if they aren’t sure what they are looking for. To help with this, I wrote a bit of javascript to display the names of the placeholders on the page making it a little easier to locate them.

*This javascript works with Sitecore 8.1 update 2 (rev 160302) and wasn’t tested in other versions, so the markup generated in Experience Editor may be different.

With the above javascript, I’m grabbing each empty placeholder and querying the <code> element that precedes it. Within the <code> element is a bit of JSON that defines the placeholder and from that I can pull the ‘displayName’ value. The second section grabs the non-empty placeholders and does the same thing, except that it pre-pends a <div> to display the placeholder name and uses the Sitecore EmptyPlaceholderBg.png to decorate it.

I only wanted this js run when the page is in editing mode, so I included the following code block on the page:

The results of the javascript inclusion in Experience Editor are shown below.

Blank Page:

placeholdernamesnewpage

Existing page with some content:

placeholdernames

 

The javascript and styling could be cleaned up a little but this was a good starting point for displaying those, sometimes, hard to find placeholders.

If you have any comments or suggestions, please feel free to reach out to me in the comments below or on Twitter @bill_cacy .

 

Subscribe to the Microsoft Weekly Digest

* indicates required

2 thoughts on “Display placeholder names in Sitecore Experience Editor

Leave a Reply

Perficient Microsoft Blog

Insights, best practices and technical perspectives to help you leverage your investment in Microsoft technology solutions to power your business growth

Archives