Tag Archives: dojo

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

Dojo constraints documentation

I couldn’t find any proper documentation on the constraints object we can use in Dojo to validate Text, Number and Date field, especially for ValidationTextBox. So here is what I gather or figured out from Dojo’s code.

ValidationTextBox:

The documentation says “user-defined object needed to pass parameters to the validator functions“, but actually that’s not true. This actually will never be used, except if you set a pattern abeing a function (this.pattern). If you do that then the pattern function you gave will be called on every validation with the constraints object as parameter, which can be anything since you are the only one using it in your function. The pattern function must return a String. Of course this.pattern can also be a simple pattern as a string, then constraints becomes useless and won’t be used. Example:

this._myValidationTextBox.set('pattern', function (constraints) {
    return constraints + '.*'; // For instance my input must start with my constraints
});
// OR
this._myValidationTextBox.set('pattern', constraints + '.*');
// Are exactly the same, but using the combo pattern function and
// dynamic constraints you can have a more dynamic behavior

I guess this could be used for complex scenarios where validation need to be more dynamic and we on;t want to change the pattern every time. Although I’ve never got to use it.

NumberTextBox:

Actually they put some documentation under the NumberTextBox documentation, so I won’t bother rewriting what they already wrote.

DateTextBox:

And the documentation for this one is here.

Using an external JavaScript (not Dojo module) in your ICN plugin

Sometimes you need to use an external JavaScript libraries in your plugin, because you don’t want to reinvent the wheel. Problem is that often those libraries are not Dojo modules. So how to use them in your dojo class?

Well that’s simple, dojo provides an generic script injection mechanism. Everything declared in the external script will be available in your class. Code is the following:

require(["http://host.com/stuff.js"], function(){
    // Everything declared in stuff.js is available here
});

You can link to an http location, or relative location into your project, for instance /application/stuff.js.

Now how to use that in your plugin? You can place your JavaScript file in another application or a CDN to refer it with an http protocole, example:

require(["http://host.com/application/stuff.js"], function(){
    // Everything declared in stuff.js is available here
});

Or you can leave the file in your plugin so everything is embedded when you deploy:

require(["plugin/MyPluginID/getResource/jszip/zip.js"], function () {
  // Here I can use the variable zip
});

Continue reading