Skip to main content


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.

(function ($) {
    $(document).ready(function () {
        $(".scEmptyPlaceholder").each(function (i, obj) {
            var siblingEl = $(obj).prevAll("code[type='text/sitecore'][kind='open'][chrometype='placeholder']:first");
            var m = siblingEl.html();
            var x = $.parseJSON(m);
            $(obj).css("text-align", "center").css("vertical-align", "middle").css("font-size", "x-large").css("color", "lightgray").css("padding-top", "30px").css("width","100%");
        $("[sc-part-of='placeholder rendering']:not([style])").not("meta").not("script").not(".scEmptyPlaceholder").not("title").not("link").not("style").each(function (i, obj) {
            var siblingEl = $(obj).prevAll("code[type='text/sitecore'][kind='open'][chrometype='placeholder']:first");
            var m = siblingEl.html();
            var x = $.parseJSON(m);
            var newDiv = "<div style='background: transparent url(/sitecore/shell/themes/standard/images/pageeditor/EmptyPlaceholderBg.png) repeat; text-align: center; font-size: x-large; color: lightgray; padding-top: 30px;'>" + x.displayName + "</div>";

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:

@if (Sitecore.Context.PageMode.IsExperienceEditor)
  <script type="text/javascript" src="~/assets/js/lib/jquery-2.2.1.js"></script>
  <script type="text/javascript" src="~/assets/js/app/EEPlaceholders.js"></script>

The results of the javascript inclusion in Experience Editor are shown below.
Blank Page:
Existing page with some content:
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 .

Thoughts on “Display placeholder names in Sitecore Experience Editor”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

William Cacy

More from this Author

Follow Us