Tag Archives: icn

Write a filtered Repository File Selector Dojo dialog

This tutorial will explain how to write a dialog allowing users to choose a file in a repository with a pretty tree selector. We will also add a feature to filter files based on extension. The tree will only show documents ending with a valid filter.

This is the final result:


Continue reading

Bug in resize of ecm.widget.FolderTree

I just noticed a bug in the FolderTree widget. It is setting its size based on the first ancestor widget, not parent dom node. That means if your FolderTree is in a div or anything not widget, it will take the size of the first ancestor widget, which can be a lot bigger than the dom element it is in and give you some weird behavior.

To fix this, wrap it in a BorderContainer, ContentPane or any sort of widget, or override the resize method to behave nicely with your configuration.
Continue reading

Create your custom attribute editor (part 5)

Add custom settings to your editor

We learned in previous parts how property editors work, how to write a custom editor, a widget for the editor, and how to test it.

In this part, we will learn how to add custom settings to your editor, located right below the editor select box in the Entry Template Designer tool. It looks like this: (remember, in our current version there is nothing)


Settings are part of the the editorConfig you are injecting in the ControlRegistry object (ControlRegistry.editors.editorConfigs array). The config can have a settings property, which is an array of object defining the settings. Here is how it looks like:
Continue reading

Create your custom attribute editor (part 4)

To summarize what we’ve done so far:

  • In part 1, we created a new plugin and learned how to inject a custom editor in the ICN configuration
  • In part 2, we wrote our custom editor
  • In part 3, we wrote our custom widget

We will now deploy the plugin and use our custom editor in an entry template. Then we will add a new document using this entry template, and we should see our custom editor in used.
Continue reading

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" />

Continue reading

Create your custom attribute editor (part 2)

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.


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:
Continue reading

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.


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:
Continue reading