Sitecore MVC and the Page Editor / Experience Editor: DataSource Not Configured

Posted by

Recently working on a Sitecore MVC site, I was having trouble coming up with a way to gracefully hide a rendering when the it’s datasource was not set while ensuring that the rendering is still page editor friendly.

Also, I thought it would be nice if I had the ability to debug (or diagnose) the missing datasource in production (and save myself a lot of headaches!)

Then It dawned on me: I can use the MVC framework’s ability to dynamically return any view or content I want to accomplish both of these goals.

Our requirements:

1. If the user is using the page editor,  render a large warning thats impossible to miss for a content editor to miss, but still allow the content author to set the datasource:

2. If NOT in page editor mode, return a dynamic html comment with the name of the rendering.

Assuming you are using Controller Renderings, this will be nice and simple. (And If you are not, I strongly recommend using Controller renderings for [nearly] every rendering when using Sitecore MVC – more on that in a future post).

To get started, in my parent controller, I created a new action method called DataSourceNotConfiguredResult(). (I put this method in a parent controller so all my custom controllers have direct access to it, but you could just as easily put this method directly in your controller):

public class SiteBaseController : SitecoreController
    protected virtual ContentResult DataSourceNotConfiguredResult
            if (Sitecore.Context.PageMode.IsPageEditorEditing)
                var msg = new System.Text.StringBuilder();
“); msg.AppendFormat(“‘{0}’: Rendering datasource is not configured.”, RenderingContext.Current.Rendering.RenderingItem.DisplayName); msg.Append(“

“); return Content(msg.ToString()); } // Return the message in a html comment so we can see the message in the html source if we are viewing the rendering for real! var htmlComment = new System.Text.StringBuilder(); htmlComment.AppendFormat(“{0}{0}”, Environment.NewLine); return Content(htmlComment.ToString()); } } }

In side the first if block, take notice the css class “page-editor-no-datasource-warning“.  This gives us the hook to style this warning anyway we like without changing any server code.  Here is the CSS rule that I added to my stylesheet that will really make this warning pop in the page editor:

.page-editor-no-datasource-warning {
    font-size: 22px;
    font-weight: bold;
    color: white;
    background: red;
    text-align: center;
    padding: 20px;
    margin: 5px;
    border: dashed 5px black;

Datasource not set

Now how exactly do you use this method? Simple. Follow this pattern in all your action methods that leverage datasources:

public ActionResult HeroSlider()
        var model = SitecoreContext.GetItem(RenderingContext.Current.Rendering.DataSource); // GlassMapper + TDS ;)

        if (model == null)
            return DataSourceNotConfiguredResult;

        return View(Views.HeroSlider, model);

If you are not in page editor mode and the rendering’s datasource is empty, the rendering will be completely “hidden”. Now inspect source on your page, do a CRTL+F search for “datasource is not configured”, and you will be taken to the exact locations of where the rendering(s) would have appeared.

And that it. Can you imagine how useful this will be in production? I can! Hopefully this makes your content-authoring experience a little bit better too.

Hopefully you found this post useful. Enjoy!

One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s