Sunday, September 20, 2009

Creating a custom WCM form widget in Alfresco using Dojo -- part 1

I'm going to start detailing my steps towards the creation of a new dojo form widget. I have found a number of forum questions around this process, but no answers or hints.

Please feel free to add any comments and suggestions.

Alfresco-based resources: - Details on incorporating widgets into an xsd - Details on creating XForms Widgets


Testing on Alfresco Labs 3.2
using the embedded dojo version 0.4.1
Application server: tomcat 6.0.18
OS: Ubuntu 9.04 x64
Linux kernel: 2.6.28-11-server
Using the WCM form created from Dr. Q's Web Form tutorial (, the "advanced-press-release" form

Trace example:

I'm starting the process by tracking down exactly what's going on in the ootb code. Tracing the current code will allow us to see what and where things happen.

File: /WEB-INF/classes/alfresco/web-client-config-wcm.xml


The elements contain the references for each of the dojo widgets. Let's pick the Drop-Down List (aka ComboBox or Select List) widget for this example. The widget entry is:

Let's look at the attributes:

"xforms-type" defines a specific Chiba XForm Control **
"javascript-class-name" defines a specific javascript class which is declared and instanciated in

** The xs namespace elements which are used in schema definations are mapped to xf namespace xform elements


File: /scripts/ajax/xforms.js

Using the value from the javascript-class-name element which we found in the previous step, "alfresco.xforms.ComboboxSelect1", we can find the following entry in xforms.js:

alfresco.xforms.ComboboxSelect1 = alfresco.xforms.AbstractSelectWidget.extend({

Existing JIRA issues regarding this process: -- states that the ootb xforms.js must be touched instead of having an external overriding copy as would be the usual method of overridding and extending.

No comments:

Post a Comment