24

It used to be, that next to the collapsible sections in the Content Editor tab; the section icon would display on the tab. This made it very easy for me to identify the section I was looking for.

To clarify; this is where I mean:

enter image description here

In recent Sitecore versions, this has gone away. I presume it has to do with the Content Editor moving to SPEAK but I am not sure.

Is there any way to get this back? A setting or so? And if not, does anyone have an example of how this functionality could be overridden to bring the icons back in?

  • 2
    Slightly not what you are asking but there is an extension to chrome which makes navigation in CE a lot easier (collapse and expand all sections, search for fields). It's called Sitecore Extensions – Szymon Kuzniak Oct 3 '16 at 21:19
  • +1 to this, I've been missing the section icons. – Kasaku Oct 5 '16 at 14:19
24

Sitecore supports two ways to render the Content Editor.

  1. Standard Sitecore Render
  2. Themed XML Skin Rendering

The pipeline you want to focus on is <renderContentEditor>.

You'll find the following: enter image description here

For the purpose of this answer, I'll focus on how to override the Standard Content Editor. I would probably advocate for using the Theme/Skinning option that is available, but will need to defer that answer until I am more versed in how to do the themeing.

If you look at Sitecore.Shell.Applications.ContentEditor.Pipelines.RenderContentEditor.RenderStandardContentEditor pipeline process you'll find that it is calling the EditorFormatter class RenderSections(...)

  public class RenderStandardContentEditor
  {
    /// <summary>Gets the field value.</summary>
    /// <param name="args">The arguments.</param>
    /// <contract>
    ///   <requires name="args" condition="none" />
    /// </contract>
    public void Process(RenderContentEditorArgs args)
    {
      Assert.ArgumentNotNull((object) args, "args");
      args.EditorFormatter.RenderSections(args.Parent, args.Sections, args.ReadOnly);
    }
  }

Digging down further, you'll find that RenderSections is calling RenderSectionBegin(...).

The real issue with the Section Icon going away is that Sitecore decided just not to render the image. But as you can see from the decompiled code below, Sitecore still supports the section icon, just never utilizes it.

public void RenderSectionBegin(System.Web.UI.Control parent, string controlId, string sectionName, string displayName, string icon, bool isCollapsed, bool renderFields)
{
  Assert.ArgumentNotNull((object) parent, "parent");
  Assert.ArgumentNotNullOrEmpty(controlId, "controlId");
  Assert.ArgumentNotNullOrEmpty(sectionName, "sectionName");
  Assert.ArgumentNotNullOrEmpty(displayName, "displayName");
  Assert.ArgumentNotNull((object) icon, "icon");
  HtmlTextWriter htmlTextWriter = new HtmlTextWriter((TextWriter) new StringWriter(new StringBuilder(1024)));
  if (this.Arguments.ShowSections)
  {
    string str1 = isCollapsed ? "scEditorSectionCaptionCollapsed" : "scEditorSectionCaptionExpanded";
    string str2;
    if (UserOptions.ContentEditor.RenderCollapsedSections)
      str2 = "javascript:scContent.toggleSection('" + controlId + "','" + sectionName + "')";
    else
      str2 = "javascript:return scForm.postRequest('','','','" + StringUtil.EscapeQuote("ToggleSection(\"" + sectionName + "\",\"" + (isCollapsed ? "1" : "0") + "\")") + "')";
    htmlTextWriter.Write("<div id=\"{0}\" class=\"{1}\" onclick=\"" + str2 + "\">", (object) controlId, (object) str1);
    ImageBuilder imageBuilder1 = new ImageBuilder()
    {
      ID = controlId + "_Glyph",
      Src = isCollapsed ? "Images/accordion_down.png" : "Images/accordion_up.png",
      Class = "scEditorSectionCaptionGlyph"
    };
    htmlTextWriter.Write(imageBuilder1.ToString());
    ImageBuilder imageBuilder2 = new ImageBuilder()
    {
      Src = Images.GetThemedImageSource(icon, ImageDimension.id16x16),
      Class = "scEditorSectionCaptionIcon"
    };
    htmlTextWriter.Write(Translate.Text(displayName));
    htmlTextWriter.Write("</div>");
  }
  if (renderFields || !isCollapsed)
  {
    string str1 = !isCollapsed || !this.Arguments.ShowSections ? string.Empty : " style=\"display:none\"";
    string str2 = this.Arguments.ShowSections ? "scEditorSectionPanelCell" : "scEditorSectionPanelCell_NoSections";
    htmlTextWriter.Write("<table width=\"100%\" class=\"scEditorSectionPanel\"{0}><tr><td class=\"{1}\">", (object) str1, (object) str2);
  }
  this.AddLiteralControl(parent, htmlTextWriter.InnerWriter.ToString());
}

Note that in this class, the icon comes in as part of the argument of the method. Highlighting the following piece:

enter image description here

imageBuilder2 contains everything that we need to know in order to render the Section icon. however, scanning this method, imageBuild2 is never utilized. Instead, immediately after imageBuilder2 is created, it writes the displayName.

However, if you look at the accordion image just above this:

enter image description here

You'll note that it's sending the image to the htmlTextWriter which sets up an awesome example as to how to implement the section icon as well.

SUMMARY

This actually smells like a Sitecore Bug. However, if it's completely intentional, and you want to activate the icon, I would create a custom RenderContentEditor pipeline processor, extend the EditorFormatter class and override RenderSectionBegin method, sending the icon to the HtmlTextWriter.

OP ED

Responding to @jammykam's comment, the amount of code changes that this would require, the reward gained by getting the icon back may not be worth it (in fact not worth it).

One must take into consideration upgradability, and maintainability.

Using a new processor, as described above, allows you to pull out the change relatively quickly and the approach above does not harm core functionality. However, if changes occur with this class (as they most certainly will) in order to maintain the icons, you'd have to update this custom class.

Lastly, while my professional recommendation is to not utilize all of this, just for the icon, and nor do I think creating a whole new XML Skin just for icon make sense either, this is a often requested feature from client who are used to the section icon.

Therefore my true feeling is to appeal to Sitecore to offer an easier toggle, config setting or otherwise, in order to display it. Otherwise, I would advocate against trying to implement this at all.

But it is possible! =)

  • 1
    Given the extent of the changes and the amount of code you would essentially have to copy/paste to add the single line back in to display the icon, would you recommend following this approach and overwriting the editor? – jammykam Oct 4 '16 at 21:49
  • I replied by adding an OP ED to my answer. – Pete Navarra Oct 4 '16 at 22:12
  • I actually directly questioned Sitecore UX people whether this was an intentional decision or not, I'm still awaiting a reply. When I reported it as a bug to support beginning last year they gave me basically the same response as @PeteNavarra and did not file it as a bug. – IvanL Oct 5 '16 at 15:25
  • 1
    Along these lines, you might be able to add to <renderContentEditor /> to add the icons back into the sections using JavaScript, thereby avoiding the code "double-handling" that @jammykam and @PeteNavarra are referring to. It would still be a brittle solution though, dependent on Sitecore maintaining the HTML structure in the editor - something you ultimately have no control over. – Richard Hauer Oct 9 '16 at 2:56
3

The simple answer is that when Sitecore redesigned the content editor for 8.0, they removed icons from the sections, probably to keep the design cleaner.

  • I actually disagree that the point is moot. You still see section bars for various actions, such as "Editing related item" from Experience Editor, or Datasource Params. – Pete Navarra Oct 5 '16 at 22:32
  • 1
    Edited to remove subjective statement. – Sergeant Sitecore Oct 7 '16 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.