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:
