It is very common for content authors to need a little extra assistance when entering content through the page editor. Maybe they will be uploading an image and need to know the recommended dimensions. Instead of having to reference an old email from the developers who built the site or dig up an old conversation in a project-management tool like Basecamp, you can now provide this information to them right in the Sitecore page editor. Below is an example of an example of what this looks like.
In this post, I will describe how you can add help text to improve your client’s page editor experience. Please note that this can be extended to include more than just fields, but my examples will focus on fields.
First, let me describe how you can define the help text that will be pulled in by the pipeline processor I will be creating. Above I have a generic content pod. This template (below) consists of an image, a subheading, some rich text, and a link.
In order to set the help text for a specific field on our template, I will utilize the parameters field on the content pod rendering. I’ve made the decision to create the keys in the format of [FieldDisplayName]_HelpText. For example, if I want to set the help text for the image field on my content pod, I would do so like below. Likewise, if I wanted to also set the help text for my rich text field (named “Copy”), then I would add another parameter with a key of “Copy_HelpText”.
Now that I have established how the help text will be set, I’ll demonstrate how to pull that into the page editor.
The work of pulling in our help text will need to be done in the getChromeData pipeline. The processor is shown below. If you’re interested, an overview of this pipeline, and other important ones, can be found here.
A quick overview of what’s happening in this processor:
- Check the chrome type to make sure you are processing a field. *You can modify this logic to look for placeholders, renderings, and more!*
- Get the current rendering from the rendering context
- Set the parameter key that you will be searching for: [FieldDisplayName]_HelpText
- Check the current rendering’s parameters to see if it contains a parameter matching our parameter key. If no match is present, you will check the rendering item itself for a match. *This gives you the ability to override the help text on specific instances of a rendering!*
- If you have found the value corresponding to our parameter key (our help text), then append it to the current display name for our field
Now that you have a pipeline processor to pull in your help text, you need to add it to the getChromeData pipeline. See the config file below.
You can now add help text to fields on your renderings. Don’t worry, your content authors will thank you later!