Category Archives: Developing with IBM Content Navigator

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>

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.

Basics

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.

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

Make a MessageDialog larger

I’ve been really busy for the past three months but I’ll be writing again soon. Meanwhile, here is a quick tip that may be handy sometimes to make any MessageDialog larger, because default size is 350x275px, which is really not much if you have large information to display.

Use the following code just before calling the show function on your MessageDialog.

domClass.add(dialog.domNode, "largeMessageDialog");
dialog.show();

You will have to import dojo/dom-class as domClass of course.

And add the following code in your css file of your plugin:

.ecmBaseDialog.ecmMessageDialog.largeMessageDialog {
    height: 90%;
    width: 90%;
}

If you’re using this a lot, I would recommend creating a new dialog extending MessageDialog and putting this in the postCreate but that will do the trick for one dialog.

And last quick thing, if you want to pre-positioned/scrolled down the content at the bottom of the div because the bottom is more important (like success/failure…), you can just do this:

dialog.description.scrollTop = dialog.description.scrollHeight;

It has to be after the call to the show function:

dialog.show();
dialog.description.scrollTop = dialog.description.scrollHeight;

Working with Entry Templates

The two states of the Entry Templates

Be careful with the Entry Template, they can have two states, retrieved or not retrieved. They contain a lot less information when they are not retrieved.

Here is how to check if it’s retrieved or not, and retrieve it if you need to:

if (!entryTemplate.isRetrieved) {
    // Retrieve it
    entryTemplate.retrieveEntryTemplate(lang.hitch(this, function (retrievedEntryTemplate) {
        // Do something with retrievedEntryTemplate
    }), false, true);
}

Here is the JSDoc of the ecm.model.EntryTemplate class, and the one of the retrieveEntryTemplate function. Actually the entry template object itself is updated so most of the time you won’t have to do anything in the callback except wait for it to happen. Example (function converting to classic callback to promise):
Continue reading

Working with documents

Retrieving the ecm.model.ContentItem from the ecm.model.item

repository.retrieveItem(documentOrFolderId, function (contentItem) {
    // Do something with the ContentItem
});
repository.retrieveItem(folderPath, function (contentItem) {
    // Do something with the ContentItem
});

Note: Unlike the documentation says, that does not work with an document path (see this), only with a folder path. However that works with both Document and Folder ID.

Example:

repository.retrieveItem(item.id, function (contentItem) {
    // Do something with the ContentItem
});
repository.retrieveItem('/Folder/MySubFolder', function (contentItem) {
    // Do something with the ContentItem
});

JSDoc.
Continue reading