Create your custom attribute editor (part 3)

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.

2 thoughts on “Create your custom attribute editor (part 3)

  1. George Bredis

    Hi, Guillaume! It’s George again… 🙂 Sorry for disturbing You, but I’m again in a stuck – now with the Custom Editors, which are just my another headache… 🙂
    The question is simple. I’m using custom editor with the TextBox input. It’s set as read-only in HTML template. I need to assign some initial value to it while creating new content item, depending on user settings (I’m unable to use EDS in this case, since don’t know how to pass custom user information to it, in order to form the initial value for the property). Value is assigned to property in custom editor’s “startup” and is seen to user in entry template. Sounds good. Unfortunately, after item checkin that assigned value is not stored for the item property.
    However, if I place a button within the custom editor, which assigns the value exactly in the sane way – the value is both displayed and stored after checkin. Looks like custom editor’s startup is a wrong place to assign the initial value, but which is the right one? That’s a question… 🙂

    Sincerely Your’s
    George

    Reply
  2. George Bredis

    Guillaume, sorry for the above stupid question! 🙂 I solved the problem by just adding
    this.inherited(arguments);
    at the begining of the custom editor’s startup. Now everything works fine!
    Once again, sorry for bothering You! 🙂

    George

    Reply

Leave a Reply