Chromes are sometimes fragile

Chromes

Sitecore uses special markers – chromes – to tell apart placeholders, renderings, fields, and edit frames in the Page Editor. A chrome is server-generated and marks the beginning and the end of a potentially editable section. It also provides all the essential metadata for the client side scripts to rely on:

<code type='text/sitecore' chromeType='placeholder' kind='open' 
      id='Content_Main' key='Content Main' class='scpm' data-selectable='true'></code>
    {
        // JSON metadata
    }
<code type='text/sitecore' chromeType='placeholder' kind='close' 
      hintName='Content Main' class='scpm'></code>

The metadata for the placeholder, for example, contains things like placeholder’s display name, its editable status, associated commands, allowed renderings, etc. The <code> markup and enclosed metadata is interpreted by the client side Sitecore.PageModes.ChromeManager and respective Sitecore.PageModes.ChromeTypes.* objects.

Chrome’s metadata for the editable elements is generated by the getChromeData pipeline. The <code> markup is inserted around the elements by the AddWrapper processors as part of respective render* pipelines – renderField, mvc.renderRendering, mvc.renderPlaceholder.

It was a very short introduction into the world of chromes. I should probably set some time aside and write a more comprehensive series about chromes and what you can do with them and why you might want do it but this short intro will do for what I will write about next. By the way, I have just submitted two papers for the upcoming Sitecore Symposium and, if I am lucky, I may end talking about some of it there on the Developer Track.

Contract

The client side JavaScript makes certain assumptions about what it should receive from the server-side code. When it comes to chromes it’s fairly reasonable to expect that a section has an opening and a closing marker as otherwise it’s really hard to tell what is what.

I sympathize with the Sitecore.PageModes.ChromeTypes.Placeholder here and I would too expect both markers and would probably too throw something if I didn’t receive one or the other. The Placeholder class throws an error.

Accidentally breaking it

A simple controller rendering that returns an arbitrary string content that is not HTML markup will (accidentally) break something and breach the chrome markers contract:

public class MyTestController : SitecoreController 
{
    public ActionResult Test()
    {
        return Content("Sitecore");
    }
}

This simple UI component, once inserted into a placeholder, will not render “Sitecore” and will instead write the following in red ink in the console window and break the rest of the client-side initialization logic:

[Uncaught] 
Loaded unexpected element while trying to get rendering html from server. 
Expecting last tag to be closing script marker

I looked a little bit into it and I can tell that the server side code only sent the opening marker. There’s no closing <code> and it very much upsets Placeholder‘s stomach.

The workaround is to enclose the content into a valid HTML markup – <span>Sitecore</span> will do just fine.

@AlenPelin confirmed that it’s a defect (my support issue #410489 posted against 7.1 Update 1).

Add a Comment

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

Or request call back