Click here to Skip to main content
15,946,316 members
Articles / Web Development / HTML

A Basic Single Page Application Using Custom Dojo Templated Widgets

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
31 Jul 2014CPOL3 min read 18.2K   352   5   5
This tip can be used to know more about how dojo templated widgets can be created and used inside a portlet programmatically.


While developing any application in dojo, it requires certain configuration (CDN, modules) and runtime plug-in/out of widgets. A widget creation in dojo also needs certain steps starting from writing namespace till the time consuming the actual widget.

This arcticle has the following pages and related dojo concepts involved in it.

  • Index.html (dojo CDN load, Registering modules, Portlet creation and some useful namespace)
  • Custom widgets
    • Register (templated widget, passing variables, standby widget, Dialog widget, deferred objects, etc.)
    • Profile (templated widget)


To use this tip, the user should have basic knowledge of JavaScript and dojo widgets. Also the zipped file contains the source code. So it can be put in any of the Web server's root folder like IIS or Tomcat. Moreover, it can be added to your other source code or projects as well.

As we are involved in dojo, we definitely need a local server to test this. :)

Using the Code

Once the zipped files are added to a website, to test this a URL (example: http://localhost/DojoTemplatedWidgets/index.html) should be used. The localhost might chnage based upon your website hosted directory and port number.

I had hosted this @ port 80 in an IIS 7 server so my URL does not have a port number associated with it.

Digging Into the Code

It files contain only one HTML file (index.html) which is actually the starting point to the application. It configures the dojo and the module (required for custom widgets).


 var dojoConfig = {
     async: true,
     parseOnLoad: true,
     modulePaths: {Widgets: 'Widgets'}
 <script src="">


The index.html actually has a dojox.widget.Portlet instance which contains a button. On click of the button, a custom widget (Widgets.Register) will be loaded in the same portlet without changing the actual URL.

When the new 'Widgets.Register' widget is loaded, it actually creates form with few fields. The code actually depicts how custom validation can be done along with dojo's inbuild validation.

Once the details are filled and submit button is clicked, I have simulated an Ajax call with the help of dojo.deferred object and window's timeout methods. At this point for 2 seconds, a busy indicator will be shown (stand by) widget. After this, a successful message is shown to the user.

Finally, when the success message is discarded by the user, he can see the username he enterted in a different widget (Widgets.Profile) and the Register widget is removed from the portlet.

I have added a custom method to the portlet which supports dynamic loading of widgets.

//Create a custom method for the portlet and pass the widgetInstance to it.
//The widget will be loaded in the Porlet's containerNode
portlet.loadWidget = function ( widgetInstance) {
    dojo.html.set(portlet.containerNode, '');

The following code creates a custom templated widget:


dojo.declare('Widgets.Profile', [dijit._Widget,  dijit._Templated], {
    postCreate : function(){
        this.parent.set('title', 'User Profile');
        dojo.html.set(this.userName, this.username); //set the user name in the welcome message
    //Provide the html template path
    templateString: dojo.cache("Widgets", "Templates/Profile.html")



  1. Shows the 1st screen. Once the button is clicked, it loads a custom widget as shown in the next screen.

    Image 1

  2. This below screen is the widget with some input fields for account creation with some custom validation.

    Image 2

  3. The notification message displayed to the user after the ajax call simulation.

    Image 3

  4. Another custom widget is loaded which receives the values from the previous widget.

    Image 4


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior)
India India
I am a software engineer working in an MNC. I have 4 years of experience in various web technologies.

Comments and Discussions

QuestionGr8 effort Pin
qpari21-Mar-15 22:20
qpari21-Mar-15 22:20 
GeneralRe: Gr8 effort Pin
SrikantSahu22-Mar-15 5:12
SrikantSahu22-Mar-15 5:12 
Hi Qazi,
Thank you for your comments.
Sure I will try to write some more articles on Dojo.

GeneralDojo 1.10 migration for given example. Pin
Member 1123538821-Nov-14 18:44
Member 1123538821-Nov-14 18:44 
GeneralRe: Dojo 1.10 migration for given example. Pin
SrikantSahu21-Nov-14 21:30
SrikantSahu21-Nov-14 21:30 
GeneralRe: Dojo 1.10 migration for given example. Pin
Member 1123538821-Nov-14 22:03
Member 1123538821-Nov-14 22:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.