Create the editor

In part 1, we learned how to inject our new editor in the list of existing editors in order to use it in the Entry Template Designer tool. That’s sweet, but we still don’t have a custom editor. We could, of course use the existing ones (take a look at the pvr/widget/editors folder) if they fit our needs, but if not, this is how to create a new editor from scratch.

Basics

The basic idea is quite simple, an editor is a dojo widget, extending :

• the widget used for editing (TextBox, CheckBox, Select, Custom Widget, …): Allows you to edit the value of the property
• The pvr/widget/editors/mixin/_EditorMixin class: Takes care of all communication between the property object and your editor widget

So let’s start with creating our editor file customEditorPluginDojo/editors/MyCustomEditor.js. The skeleton of our editor will be:

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-style", // We will use this later, although it is not needed at the moment
    "customEditorPluginDojo/widgets/MyCustomWidget",
    "pvr/widget/editors/mixins/_EditorMixin"
], function(
    declare, lang, domStyle, MyCustomWidget, _EditorMixin
) {
    return declare([
        MyCustomWidget, // We extend our custom widget (standard dojo widget)
        _EditorMixin // We extend the _EditorMixin class, taking care off all interfacing between the Property object and the widget
    ], {

    });
});

This could be as simple as that. But like often with ICN, it’s not 😉

Indeed, ICN is expecting some specific behaviors from your editor, that you won’t get by extending only these two classes. But before explaining how to implement the expecting behavior, I would like to introduce what is expected and why:

One UI

All editors are coming from the Dojo Extension for One UI package (package idx). The _EditorMixin class is expecting a specific behavior that classes of this package have. More especially, it is expecting an attach-point called oneuiBaseNode, used in the _EditorMixin.adjustWidth and _EditorMixin.resetWidth functions. Therefore, we have to either provide a oneuiBaseNode attach-point in our widget, or override these two methods with our own code. I will choose the second option in this example because I want my widget to be as independent as possible from ICN and OneUI (Although we can have several attach-points for a same node so that’s not really a big deal).

Validate interface

All editors are implementing the validation interface, which is basically one validate(isFocused) function and one isValid() function. _EditorMixin is expecting these functions or it will fail with a null exception, so you have to either provide them, or extend a widget already implementing this interface (for instance ValidationTextBox)

At this point, our editor now looks like this:

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom-style",
    "customEditorPluginDojo/widgets/MyCustomWidget",
    "pvr/widget/editors/mixins/_EditorMixin"
], function(
    declare, lang, domStyle, MyCustomWidget, _EditorMixin
) {
    return declare([
        MyCustomWidget,
        _EditorMixin
    ], {

        editorClass: "pvrTextBoxEditor", // the css class applied to the main div of your widget
                                         // if not set your node will also have a undefined css class
                                         // not a big deal but that's better to use predefined class or yours
        
        // The _EditorMixin is calling this and is using this.oneuiBaseNode in it,
        // so you have to either have a oneuiBaseNode attach-point in your template, or 
        // overwrite these functions (adjustWidth and resetWidth) or it will fail
        adjustWidth: function(widthSettings) {
            domStyle.set(this.inputField, "width", this.computeAdjustedWidth(widthSettings.computed, widthSettings) + "px");
        },
        resetWidth: function() {
            domStyle.set(this.inputField, "width", "");
        },
        
        // The _EditorMixin is expecting the widget to implement the validate interface
        // So either extend a widget already implementing it (like ValidationTextBox)
        // or implement the validate and isValid functions or it will fail
        //
        validate: function(/*Boolean*/ isFocused){},

        isValid: function () {
            return true;
        }
    });
});

That’s it for the editor. The pvr/widget/_Property class is also expecting one node to exist in your widget, but since this is a fairly standard and convenient node anyway, I will add it to my widget. We will see this in the next part.