In this series of posts, we will learn how to develop and use a new attribute/property editor in your Entry Template layout.
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.
- Part 1: Principle and configuration injection
- Part 2: Create the editor
- Part 3: Create the widget
- Part 4: Deploy and test
- Part 5: Add custom settings
- 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:
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.
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
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?
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!
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!
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?