Extending the Sitecore Device Editor Dialog with Datasource Information

Back in time, most pages used to have a number of fields directly on the page item and maybe three or four inserted renderings at the most. However, in recent time I have noticed that more and more of the websites that at least I am seeing consists of empty page items with no fields at all and a large number of inserted renderings. This of course gives the content editors a high degree of freedom to tailor individual pages to their exact requirements but it also makes it a bit of an administrative nightmare to remember exactly which datasource items that are linked to which renderings. Especially when you have a lot of the same type of renderings inserted in the page. Usually it looks something like the following.

Image may be NSFW.
Clik here to view.

Here it would clearly be nice if you could see exactly which datasource each of the renderings were linked to. Then it would look something like the following.

Image may be NSFW.
Clik here to view.

Now it is a lot easier to see exactly what is going on in the page and it is not too hard to extend the device editor to do this. This is how I did it in Sitecore 8.2 update 3.

First, I took a copy of the existing DeviceEditor.xml file that is located in “/sitecore/shell/Applications/Layouts/DeviceEditor” and placed it in the override folder “/sitecore/shell/Override”.

Then I changed the codebeside information in my DeviceEditor.xml file from

<CodeBeside Type="Sitecore.Shell.Applications.Layouts.DeviceEditor.DeviceEditorForm,Sitecore.Client"/>

<CodeBeside Type="DeviceEditor.DeviceEditorForm, DeviceEditor"/>

I then reflected the original DeviceEditorForm code and made a few modifications to the RenderRenderings method as follows.

private void RenderRenderings(DeviceDefinition deviceDefinition, int selectedIndex, int index)
{
 /* modified code */
 Item contextItem = null;
 var itemId = WebUtil.GetQueryString("id");
 if (!string.IsNullOrWhiteSpace(itemId))
  contextItem = Client.ContentDatabase.GetItem(new ID(itemId));
 /* end modified code */

 Assert.ArgumentNotNull((object)deviceDefinition, "deviceDefinition");
 ArrayList renderings = deviceDefinition.Renderings;
 if (renderings == null)
  return;
 foreach (RenderingDefinition rendering in renderings)
 {
  if (rendering.ItemID != null)
  {
   Item obj = Client.ContentDatabase.GetItem(rendering.ItemID);
   XmlControl webControl = Resource.GetWebControl("DeviceRendering") as XmlControl;
   Assert.IsNotNull((object)webControl, typeof(XmlControl));
   HtmlGenericControl htmlGenericControl1 = new HtmlGenericControl("div");
   htmlGenericControl1.Style.Add("padding", "0");
   htmlGenericControl1.Style.Add("margin", "0");
   htmlGenericControl1.Style.Add("border", "0");
   htmlGenericControl1.Style.Add("position", "relative");
   htmlGenericControl1.Controls.Add((System.Web.UI.Control)webControl);
   string uniqueId = Sitecore.Web.UI.HtmlControls.Control.GetUniqueID("R");
   this.Renderings.Controls.Add((System.Web.UI.Control)htmlGenericControl1);
   htmlGenericControl1.ID = Sitecore.Web.UI.HtmlControls.Control.GetUniqueID("C");
   webControl["Click"] = (object)("OnRenderingClick(\"" + (object)index + "\")");
   webControl["DblClick"] = (object)"device:edit";
   if (index == selectedIndex)
    webControl["Background"] = (object)"#D0EBF6";
   this.Controls.Add((object)uniqueId);
   if (obj != null)
   {
    webControl["ID"] = (object)uniqueId;
    webControl["Icon"] = (object)obj.Appearance.Icon;

    /* modified code */

    var datasourceDisplayName = "";
    var datasourcePath = "";

    if (!string.IsNullOrWhiteSpace(rendering.Datasource))
    {
     if (ID.IsID(rendering.Datasource))
     {
      var datasourceItem = Client.ContentDatabase.GetItem(new ID(rendering.Datasource));

      if (datasourceItem != null)
      {
       datasourceDisplayName = datasourceItem.DisplayName;
       datasourcePath = datasourceItem.Paths.Path;
      }
     }
     else if (contextItem != null)
     {
      var datasourceItem = Client.ContentDatabase.GetItem(contextItem.Paths.Path + rendering.Datasource.Replace("page:", ""));

      if (datasourceItem != null)
      {
       datasourceDisplayName = datasourceItem.DisplayName;
       datasourcePath = rendering.Datasource;
      }
     }
    }

    if (!string.IsNullOrWhiteSpace(datasourceDisplayName))
     webControl["Header"] = (object)obj.DisplayName + "<span style=\"position: absolute; font-style: italic; font-weight: normal; right: 4px; max-width: 50%; max-height: 90%; overflow-y: hidden; text-align: right\" title=\"" + datasourcePath + "\">" + datasourceDisplayName + "</span>";
    else
     webControl["Header"] = (object)obj.DisplayName;

    /* end modified code */

    webControl["Placeholder"] = (object)WebUtil.SafeEncode(rendering.Placeholder);
   }
   else
   {
    webControl["ID"] = (object)uniqueId;
    webControl["Icon"] = (object)"Applications/24x24/forbidden.png";
    webControl["Header"] = (object)"Unknown rendering";
    webControl["Placeholder"] = (object)string.Empty;
   }
   if (rendering.Rules != null && !rendering.Rules.IsEmpty)
   {
    int num = rendering.Rules.Elements((XName)"rule").Count<XElement>();
    if (num > 1)
    {
     HtmlGenericControl htmlGenericControl2 = new HtmlGenericControl("span");
     if (num > 9)
      htmlGenericControl2.Attributes["class"] = "scConditionContainer scLongConditionContainer";
     else
      htmlGenericControl2.Attributes["class"] = "scConditionContainer";
     htmlGenericControl2.InnerText = num.ToString();
     htmlGenericControl1.Controls.Add((System.Web.UI.Control)htmlGenericControl2);
    }
   }
   RenderDeviceEditorRenderingPipeline.Run(rendering, webControl, (System.Web.UI.Control)htmlGenericControl1);
   ++index;
  }
 }
}

In essence I am simply changing the content in the webControl[“Header”] to insert the additional datasource information and that is all it takes.

I hope that maybe someone else will find this modification useful.