Håkon Nordli
Nov 3, 2015
(8 votes)

5 things to know about Dojo

This blog post is part 2 of “Learn how to develop your own Dojo widget”. If you haven’t read part 1, I recommend you to read it. You may find it here

In part 1 I promised to write 10 tips, it ended up being 5. I hope you can forgive me. 

1. Including modules – define

When looking at Dojo you will find a lot of definitions at the top. Dojo is separated into several small modules, which means that you only add the parts you are going to use. This is very nice since you only add the once you actually need. On the other hand, it is a bit annoying since you have to keep track of several modules. 

EPiServer has built some modules of their own. To be honest I do not have a complete overview of all of them, but they are documented here http://world.episerver.com/documentation/Javascript-Library/?version=9&product=cms

After the definitions there is a list of function names which is the name you give the added modules. Through these function names you may use the modules in your javascript code.


function (
) {

2. templateString

This is the HTML representing your widget. Say, if you want to create an input text field, this is where you put your HTML. The important thing to know is that instead of using IDs or class names to handle your HTML in the JavaScript you should/must use data-dojo-attach-point. This way Dojo will create a reference to it and it will be available through the widget as this.attach-point-name.

Example templateString:

'<div class="dijitInline">\                            
     <div data-dojo-attach-point="textArea" data-dojo-type="dijit.form.Textarea"></div>\

Notice the data-dojo-type in the example above. Dojo creates new elements based on the Dojo-type. In our case it will create a textarea since we are using the dijit.form.Textarea.

3. startup and postCreate

PostCreate is a built-in Dojo method which runs after all the properties are set up, but it runs before the templateString is added to the DOM. It is a method where you may start/initialize other methods.

Startup is also a built-in Dojo method, but runs after postCreate and after the templateString is added to the DOM. This is where you may add bindings or any other needed setups.

4. Saving changes

When the editor is done, you want to save the data that is changed or added. There are mainly two methods you want to run doing that, this.onChange and this. set.

this._set sets the value to the widget and notify any observers.

this.onChange is for letting the widget wrapper updating the UI when the value is changed.

The exampe below is taken from the other blog post, part 1. It uses both this_set and this.onChange when saving changes.

_setValue: function (value, updateTextarea) {
    //avoids running this if the widget already is started 
    if (this._started && epi.areEqual(this.value, value)) {
    this._set("value", value);
    // set value to textarea 
    updateTextarea && this.textArea.set("value", value); 
    if (this._started && this.validate()) {
        // Trigger change event 

5. Connect vs on

The built-in methods for binding events, connect and on, is two methods for the same thing. I've noticed that connect is used in several EPiServer Dojo examples. According to the Dojo Documentation connect is deprecated. Based on that we should use the dojo/on module to bind events instead.

this.connect(this.textArea, "onChange", this._onTextAreaChanged);

on(this.textArea, "change", lang.hitch(this, this._onTextAreaChanged));

Nov 03, 2015


Nov 3, 2015 09:07 PM

Nice write up, thanks for sharing!

Please login to comment.
Latest blogs
Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog