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, now Perficient, 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.)
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.
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”):
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(" <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.
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!
