Icon for property help texts in Episerver

This article was migrated from an older iteration of our website, and it could deviate in design and functionality.

Web editors sometimes overlook the fact that properties may have helpful descriptions available by hovering property names in edit mode. This simple example demonstrates how to add an icon in edit mode to draw attention to these tooltips.

Estimated read time : 2 minutes

Jump to

The basic idea is to use Dojo's extend feature to slightly modify how fields (i.e. property editors) appear and behave in edit mode.

First, we add a JavaScript file called ExtendedField.js to a folder named field inside ClientResources in our site root:

We'll come back to it, but first we modify our module.config file to ensure our Dojo class will be loaded when the CMS starts (don't forget to rebuild your project after making modifications to module.config):

<module>

  <dojo>
    <paths>
      <add name="tedgustaf" path="" />
    </paths>
  </dojo>

  <clientResources>
    <add name="tedgustaf.field" path="/ClientResources/field/ExtendedField.js" resourceType="Script" />
  </clientResources>

  <clientModule>
    <moduleDependencies>
      <add dependency="CMS" type="RunAfter" />
    </moduleDependencies>
    <requiredResources>
      <add name="tedgustaf.field" />
    </requiredResources>
  </clientModule>
  
</module>

Next, let's put some JavaScript code into our ExtendedField.js file to extend the original Field widget in Episerver:

require([
    "dojo/_base/lang",
    "dojo/dom-construct",
    "dojo/dom-style",

    "epi/shell/form/Field"
    
], function (
    lang,
    domConstruct,
    domStyle,

    Field
) {
    lang.extend(Field,
    {
        postCreate: function () {

            if (this.tooltip) { // The property has a description, i.e. tooltip

                // Create an HTML element for the icon
                var icon = domConstruct.toDom('<span class="dijitInline dijitReset dijitIcon epi-iconInfo" data-dojo-attach-point="descriptionIcon"></span>');

                // Add the icon after the pre-existing icon for read-only properties
                domConstruct.place(icon, this.readonlyIcon, "after");

                // Avoid icons ending up on top of each other, by nudging the original read-only icon to the left
                domStyle.set(this.readonlyIcon, "right", "17px");
            }
        }
    });
});

Here's the final result in the "All properties" view in edit mode, where we now have icons displaying for the properties where a tooltip is available on hover: