Sitecore Help Text in Experience Editor

When building Sitecore-powered websites, it’s easy to forget about the content authoring experience. We live in this system and we’re used to its quirks, so we’re not often reminded that others–like our content teams–don’t share the same level of familiarity and comfort. We also can forget that making Sitecore friendlier for our content team is critical to maintainability of our application. In this post I cover one straightforward but high-impact improvement to the content admin experience: how to easily expose help text in Experience Editor.

At BrainJocks, we’ve built a platform and culture around enabling Experience Editor, and doing everything we can to make it an enjoyable user experience. After I saw my first editor-friendly site, I was totally inspired to create something similar. Dynamic Placeholders, Reusable Component Architecture, Style Selections, Cascading, Snippets, Datasource Locations–all small pieces that add up to a dramatically better editing experience.

So, let’s see how we can improve that experience by working on just one small element: Help text.

 

Setting Help Text

It’s not immediately apparent how to go about getting to help text. To find it, you have to navigate to your template and expand down to your fields. On each individual field, you can access help text by going to Configure > Appearance > Help Text. (Alternatively, you can view standard fields and find the Help section.)

 

help text dialog

 

This is such a simple thing to do, and I recommend that you do it for any field that has special behavior. Once you set the help text, you can immediately see it in Content Editor for any of your fields.

Setting the Long Description gives you a hover effect, and setting the Help Link turns your field label into a hyperlink. This is incredibly useful for linking to documentation or just providing a bit of extra clarification to your content authors.

 

help text in action

 

 

But what about Experience Editor?

Even after setting up help text appropriately, your field still doesn’t have help text in experience editor. You can see this below, where I’m interacting with the same field that I exposed via @Html.Sitecore.Field(“Error Summary”):

experience editor without help text

 

 

 

 

 

This is one of those areas in Sitecore that really bothers me, so I decided to fix it. The solution is so simple that I’m almost embarrassed to show it off:

public static class Extensions
{
    public static HtmlString HelperField(this SitecoreHelper helper, string fieldName, Item item, object parameters)
    {
        var helpText = string.Empty;
        var field = helper?.CurrentItem?.Fields[fieldName];
        var fieldMarkup = helper.Field(fieldName, item, parameters);
 
        if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
        {
            // you could translate your help text to each language, or you could use Translate.Text
            // in this case, I'm just leaving everything in the default system language (en)
            var tooltip = field?.GetTemplateField()?.GetToolTip(Language.Parse("en"));
            if (field != null && tooltip.HasNonEmptyValue())
            {
                // I always use Twitter Bootstrap, but you could change your markup accordingly for your solution
                helpText = string.Format("&nbsp;<i class=\"glyphicon glyphicon-question-sign\" title=\"{0}\"></i>", tooltip);
            }
 
            return new HtmlString(
                string.Format("<div class=\"custom-edit-group\"><label class=\"custom-edit\">{0}{1}:</label>{2}</div>",
                fieldName, helpText, fieldMarkup));
        }
 
        // return standard markup if not in experience editor
        return fieldMarkup;
    }
 
    #region overloads of HelperField
    public static HtmlString HelperField(this SitecoreHelper helper, string fieldName, object parameters)
    {
        return FieldWithLabel(helper, fieldName, helper.CurrentItem, parameters);
    }
 
    public static HtmlString HelperField(this SitecoreHelper helper, string fieldName, Item item)
    {
        return FieldWithLabel(helper, fieldName, item, null);
    }
 
    public static HtmlString HelperField(this SitecoreHelper helper, string fieldName)
    {
        return FieldWithLabel(helper, fieldName, null, null);
    }
    #endregion
 
    // negation of string.IsNullOrEmpty
    public static bool HasNonEmptyValue(this string source)
    {
        return !string.IsNullOrEmpty(source);
    }
}

 

The idea, now, is that you could use @Html.Sitecore.HelperField(“Error Summary”) instead of @Html.Sitecore.Field(“Error Summary”). It’s consistent, your content authors probably won’t realize it’s a customization, and they will learn to immediately recognize any component which has a non-standard behavior.

help text in experience editor

By injecting just a little bit of help text into your components, you can really enable your content authors to make full use of the system that you create for them.

Enjoy!

Dylan McCurry

I am a certified Sitecore developer with a passion for the web. I hopped into the .NET space 5 years ago to work on enterprise-class applications and never looked back. I love building things—everything from from Legos to software that solves real problems. I have a strong foundation of backend skills, with sweet spots like security, portal solutions and APIs. Early on, before I had the benefit of SCORE, I made a lot of mistakes with Sitecore but learned a lot in the course of the struggle. I would like to support other developers by contributing my perspective on doing things “the Sitecore way,” rather than fighting the framework. Did I mention I love video games? Learn more about Dylan McCurry.

Add a Comment

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

Or request call back