Create your custom attribute editor (part 1)

In this series of posts, we will learn how to develop and use a new attribute/property editor in your Entry Template layout.

ICN_editor_settings

This is not as easy as it first sounds, so I will split this tutorial in 6 parts.

Here is the summary of all parts, they should be taken in order.

  1. Part 1: Principle and configuration injection
  2. Part 2: Create the editor
  3. Part 3: Create the widget
  4. Part 4: Deploy and test
  5. Part 5: Add custom settings
  6. Part 6: Create a fancier widget and extra editor configuration

First part, how is it all connected

It’s good to start with some basic comprehension of how the editor mechanism works in ICN. The most important class is the ecm/model/configuration/ControlRegistry class

Everything starts with this class, this is the main registry storing the configuration of the editors. This consists of:

  • The editors configuration: Label, class, options
  • The mappings: types/cardinality to editor and free/choices/coumpound to editor

This is how looks this class:

{
	editors: {
		editorConfigs: { // Here we are defining all editors, giving them a label, a class and optionnal options
			"anUniqueId": {
				label: "Label for the Entry Template design tool",
				editorClass: TheEditorClass,
			},
			...
		},
		mappings: { 
			types: { // Here we are assigning editors defined above to actual property types
				"string": {
					single: {
						editorConfigs: [
							"textBox",
							"textArea",
							"anUniqueId"
						],
						defaultEditorConfig: "textBox"
					},
					multi: {
						editorConfigs: [...],
						defaultEditorConfig: "dropDownList"
					}
				},
				... // other types like integer, boolean, time, ...
			},
			choices: { // Here we are assigning editors defined above in case the property has choice list
				flat: {
					single: {
						editorConfigs: [...],
						defaultEditorConfig: "filteringSelect"
					},
					multi: {
						editorConfigs: [...],
						defaultEditorConfig: "dropDownSloshBucket"
					}
				},
				hierarchical: {
					single: {
						editorConfigs: [...],
						defaultEditorConfig: "dropDownTreeSelect"
					},
					multi: {
						editorConfigs: [...],
						defaultEditorConfig: "dropDownTreeSloshBucket"
					}
				}
			},
			multiEditors: { // Complex case for making use of several editors, we won't see this today
				editorConfigs: [...],
				defaultEditorConfig: "dropDownList" // Set default to be ICN version of multi-value pickers
			}
		}
	}
}

This is our entry point. Our plugin will inject new editors and/or new mappings in this registry so we can use it in the Entry Template Design tool.

So let’s create a new ICN plugin called CustomEditorPlugin (in eclipse, New > Content Navigator Plug-in). In the main js script (CustomEditorPlugin.js), inject our new editor (MyCustomEditor). We’re going to create this new editor in part 2 because it has some special requirements and want to detail.

require([
    "dojo/_base/lang",
    "ecm/model/configuration/ControlRegistry",
    "customEditorPluginDojo/editors/MyCustomEditor" // our custom editor widget
], function(
    lang, ControlRegistry, MyCustomEditor
) {
    var editorId = "myCustomEditor";

    ControlRegistry.editors.editorConfigs[editorId] = {
        label: "My Custom Editor",
        editorClass: MyCustomEditor
    };

    //register our widget in list of widgets which return single string value (there are other types also)
    // see See ecm/model/configuration/ControlRegistry for other possible types
    ControlRegistry.editors.mappings.types["string"].single.editorConfigs.push(editorId);
});

And that’s it for the first part, which is quite straightforward.

For later use, here is the global file/folder hierarchy of our plugin:

ICN_editor_settings_6

A quick reminder: The editors are defined in the ControlRegistry class. To add your custom editors to the list of available editors in the Entry Template Designer, inject your editor configuration in the array of configuration (ControlRegistry.editors.editorConfigs). Then map your new editor to a type so it will be used by some types:

ControlRegistry.editors.mappings.types["a_type"].a_cardinality.editorConfigs.push(editorId);

In part 2, we create our new editor (customEditorPluginDojo/editors/MyCustomEditor) from scratch.

5 thoughts on “Create your custom attribute editor (part 1)

  1. Bhavik Vora

    I am facing a problem in loading ecm/model/Desktop in custom property editor.

    I am trying to get Current Logged in user for one of my property editor.

    When I am opening my case builder=>case type=>view=>layout then it’s not able to load this custom property editor and it’s throwing following error,

    http://ecmdemo1.ecm.ibm.local:9080/CaseBuilder/release/ecm/model/Desktop.js 404 not found

    Code snippet :

    define([
    // Standard Dojo modules for widget
    “dojo/_base/declare”, “dijit/_WidgetBase”, “dijit/form/Form”,
    “dijit/form/ValidationTextBox”, “dojo/on”, “dijit/_TemplatedMixin”,
    “dijit/_WidgetsInTemplateMixin”, “dijit/Dialog”, “ecm/model/Desktop”,
    // The template
    “dojo/text!./templates/CustomPopup.html”, ], function(declare,
    _WidgetBase, Form, ValidationTextBox, on, _TemplatedMixin,
    _WidgetsInTemplateMixin, Dialog, Desktop, template) {
    // Define the custom editor class.
    return declare(“custom.editor.CustomPopup”, [ Dialog, _TemplatedMixin,
    _WidgetsInTemplateMixin ], {
    // Standard Dojo practices
    // Loading the template.
    templateString : template,
    popup : null,
    widgetsInTemplate : true,
    foo : ‘foo…’,
    bar : ‘bar!’,
    _self : null,

    show : function() {
    console.log(this);
    _self = this;
    this.name.set('value', Desktop.userId);
    this.inherited(arguments);
    }
    });

    });

    Can you tell me how to call ecm/model/Desktop in custom property editor

    Reply
  2. Eaglefly

    Hello,

    I’m working on custom property editor but I’m facing some problems. I was trying to extend some sample project and I’ve added “TextBoxSetting” in RegistryConfiguration.js. Here is what I’ve exactly developed:

    define([
    “dojo/_base/declare”,
    “yesnocheckbox/editors/YesNoCheckBoxEditor”,
    “pvd/widget/designer/settings/PatternSetting”
    ], function(declare, YesNoCheckBoxEditor) {

    return {
    editors: {
    editorConfigs: {
    "customYesNoCheckBoxEditor": {
    label: "Yes No Check Box",
    editorClass: YesNoCheckBoxEditor,
    settings: [
    {
    name: "aCustomSetting",
    controlClass: TextBoxSetting,
    controlParams: {
    label: "A Custom Setting",
    help: "Some Help for this setting"
    }
    }
    ]
    }
    },
    mappings: {
    types: {
    "boolean": {
    single: {
    editorConfigs: [
    "customYesNoCheckBoxEditor"
    ]
    }
    }
    }
    }
    }
    }

    });

    When I’m trying to open Properties Layout view in Case Builder I’m getting error like below:

    “TypeError: _8fc is not a constructor dojo.js… > eval (line 2, col 308641)”

    Do you know what could be wrong there? Can I add “settings” in that why?

    Reply
  3. Shelepaev Oleg

    Hi Guillaume,

    Do you have an sample of a hierarchical choice list?

    choices: { // Here we are assigning editors defined above in case the property has choice list
    hierarchical: {
    single: {
    editorConfigs: […],
    defaultEditorConfig: “dropDownTreeSelect”
    },
    multi: {
    editorConfigs: […],
    defaultEditorConfig: “dropDownTreeSloshBucket”
    }
    }
    },

    Thank you very much!

    Reply
  4. Shelepaev Oleg

    In addition to my previous comment:

    I want to show the hierarchical data from External Data Source to the hierarchical choice list.

    Thank you very much!

    Reply
  5. Vitaliy

    I need to replace a dropdown with the plain text box. I push my editor to multieditors and string multi:

    ControlRegistry.editors.mappings.multiEditors.editorConfigs.push(editorId);
    ControlRegistry.editors.mappings.types[“string”].multi.editorConfigs.push(editorId);

    But when I try to change one of the properties to use my custom editor – the manager goes nuts and it does not let me save the change.

    Is it possible to achieve?

    Reply

Leave a Reply