ICN 3.0.x - Cannot update the width of a Custom editor

Following this cool tutorial of Not Only an ECM Place, I aimed to write a custom Editor containing several elements and a field associated to the Property. This custom Editor will be installed through an ICN Plugin. Since the property is multi-valued, the editor will be embedded inside a PropertyTable editor.

Relevant files here are:

• The Plugin JavaScript file which will register the plugin (in the global ControlRegistry object of ICN)
• The custom Editor JavaScript file which will extend both the custom Widget and the _EditorMixin class which maps the Widget to the Property
• The custom Widget JavaScript file with a dojo HTML template

Below the attempt to make the Editor width resizable. In the Editor registration code, I used a DimensionSetting and tried to override onSettingChanged() to make the Editor Widget resizable:

require([ /* [...] */],
        function(lang, ) {
            var editorId = "theWannaBeResizeableEditor";
            ControlRegistry.editors.editorConfigs[editorId] = {
                label: "A dummy label",
                editorClass: AWannaBeResizeableEditor,
                settings:
                [
                    {
                        name: "width",
                        controlClass: DimensionSetting,
                        controlParams: {
                            label: resources.styleSettingsLabel.width,
                            help: resources.styleSettingsHelp.width
                        },
                        defaultValue: "100%",
                        // And here begins the problem...
                        onSettingChanged: function(helper, width) {
                            // Tried to resize the Widget : FAIL
                        }
                    } // [...]
                ]
            }
        });

I tried, amongst others, this implementation:

onSettingChanged: function(helper, width) {
  helper.updateSetting("width", width);
  helper.widget._adjustSizing && helper.widget._adjustSizing();
  helper.widget.view.resize();
}

It didn't work. The Redbooks aren't very talkative about custom Widgets, so - except the tutorial I mentioned previously, it's hard to find information except by "reverse engineering", a big word for JavaScript objects exploration...

Disclaimer: I wrote a similar answer in another place.

After a bunch of find, grep, less (I strongly advise to install Cygwin for this kind of investigation, it really helps). I figured out that some standard Editor Settings widgets relies on TextBoxEditorSettings to make their width updatable. This widget can be found here: pvd/widget/editors/settings/TextBoxEditorSetting.js

TextBox, for example, is one of them. The association between TextBoxEditorSettings and TextBox editor can be found in pvd/widget/registry/BasicHelperConfiguration.js:

define(
    [/* [...] */],
    function (declare,
          /* [...] */,
          textBoxEditorSettings,
          /* [...] */) {
        return {
            editors: {
                editorConfigs: {
                    // [...]
                    "textBox": {
                        settings: textBoxEditorSettings
                    } // [...]
                }
            }
        }
     }
);

TextBoxEditorSettings manages the case of an Editor embedded inside a PropertyTable. Instead of configuring the width configuration editing from scratch I tried to reuse and extend it.

If we need to add other settings (text, etc.). we should not append them directly to TextBoxEditorSettings, otherwise all editors configured with it would get these settings too, especially TextBox, which is not what we want. Instead, we'll use a shallow copy, invoking slice().

require(
    [
        "dojo/_base/lang",
        "ecm/model/configuration/ControlRegistry",
        // [...] Include below all the settings editor you need
        "pvd/widget/editors/settings/TextBoxEditorSettings",
        // Below your custom template
        "AWannaBeResizeableEditorPluginDojo/editors/AWannaBeResizeableEditor",
        // Below for translation support of TextBoxEditorSettings
        "dojo/i18n!pvd/nls/common"
    ],
    function(lang, ControlRegistry, TextBoxSetting,
             TextBoxEditorSettings, AWannaBeResizeableEditor,
             resources) {
        var editorId = "aWannaBeResizeableEditor";

        // Perform a shallow copy to avoid conflicts
        var editorSettings = TextBoxEditorSettings.slice();

        // Additional setting editors
        // Repeat this block for all further setting editor needed
        /// 1. Definition
        var anotherSettingEditor = {
            // [...]
        };
        /// 2. Insertion
        editorSettings.unshift(anotherSettingEditor);
        /// End of this block

        // Registration in the editor configurations...
        ControlRegistry.editors.editorConfigs[editorId] = {
            label: "A Wannabe Resizable Editor",
            editorClass: AWannaBeResizeableEditor,
            settings: editorSettings
        }

        // Registring the widget in the right mapping type
        // [...]
    }
);

Then write your template to make it as easily as possible resizable. I designed it to make the editor resizable from the top node. I named the attach point of the top node oneuiBaseNode so no need to overrride adjustWidth(). and resetWidth().

<div class="searchBoxFillerWidget"
     data-dojo-attach-point="oneuiBaseNode">
    <!--
         Write here HTML code relatively resizeable
         to the top node.
    -->
</div>