Create the widget

In part 2, we learned how to write the Editor and how to inject it in the ICN configuration. In this part, we will write the widget used to edit the property value.

For this tutorial , we will focus on a simple widget, composed only of a text box. I will add an extra part at the end of this tutorial describing a more complex widget.

HTML Template

As you may already know, a dojo widget (dijit) is made of two files, the dojo class (JavaScript) and the template (HTML). First, let’s create the html template, defining our widget presentation. Create the file customEditorPluginDojo/widgets/templates/MyCustomTextWidget.html and paste in it the following content:

<div class="myClass">
    <!-- The node that should get the focus should have the focusNode attach point. pvr/widget/_Property._createEditorWidget needs this because it wants to set the aria-labelledby on it -->
    <input data-dojo-type="ecm.widget.ValidationTextBox" data-dojo-attach-point="inputField,focusNode" name="${id}_inputText" id="${id}_inputText" />
</div>

This is a standard dojo widget, there are only two things required to make it work as an Editor widget. First is the focusNode attach-point, expected by the _Property class for accessibility reason (aria attribute). Second is that the editor is expecting a normal widget behavior. That means it should return its value when doing a get(‘value’), and announce changes via calling its onChange function, that way the editor will be able to update the property’s value. Note that the class you specified in the editor’s field editorClass will be added to the current myClass we defined here.

Dijit Class

Now we can create the dijit class. Since this is a widget, it must extend the _Widget and _TemplatedMixin classes. And since we are using other widgets in our template, it must extend the _WidgetsInTemplateMixin class, and set the widgetsInTemplate field to true.

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/on",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/MyCustomWidget.html"], function (
    declare,
    lang,
    on,
    _Widget,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    template
) {
    return declare([
        _Widget,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
    ], {
        templateString: template,
        widgetsInTemplate: true,

        postCreate: function () {
            // We are listening to our input field for updates, then emit an event
            // by calling our onChange method. In our case, this will notify the 
            // _EditorMixin that it should update the property's value, but that good
            // practice anyway
            on(this.inputField, "change", lang.hitch(this, function (value) {
                this.onChange(value);
            }));
        },
        // _EditorMixin is listening to this, so call it when your widget changes
        onChange: function (value) {},

        // Setter and Getter for the value member should be
        // connected to our input field's value, and can
        // become more complex if we add other inner widgets
        // to our widget
        _getValueAttr: function () {
            return this.inputField.get("value");
        },
        _setValueAttr: function (value) {
            this.inputField.set("value", value);
        }
        
    });
});

In the next part, we will put everything together and test it.