How to add a icon to a dojo button in Xpages?

Question

I want to use a dojo button icon on one of my buttons on my Xpage. According to an example seen on the net I should add "dijit.form.Button" to the Dojo Type and then add a dojo attribute "iconClass" with value of my button; "dijitEditorIcon dijitEditorIconDelete".

When I view the debug console in Chrome/Firefox I see an error:

dojo/parser::parse() error Error {} xspClientDojo.js:5
(anonymous function) xspClientDojo.js:5
_450 dojo.js:15
then._45d.then dojo.js:15
$DDLG_ dojo.js:15
$DDUV_ xspClientDojo.js:5
(anonymous function) dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJq_ dojo.js:15
$DDJr_ dojo.js:15
$DDJp_ dojo.js:15
$DDSM_ dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-    
1.8.1/dijit/form/Button.js". dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-1.8.1/dijit/form/_ButtonMixin.js". dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-1.8.1/dijit/form/DropDownButton.js". dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-1.8.1/dijit/_HasDropDown.js". dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-1.8.1/dijit/form/ComboButton.js". dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-1.8.1/dijit/form/ToggleButton.js". dojo.js:15
XHR finished loading: "http://localhost/xsp/.ibmxspres/dojoroot-1.8.1/dijit/form/_ToggleButtonMixin.js".

edit: xp:button

<xp:button id="button1" value="Delete"
    dojoType="dijit.form.Button">
    <xp:this.dojoAttributes>
        <xp:dojoAttribute name="iconClass"  
           value="dijitEditorIcon dijitEditorIconDelete">
        </xp:dojoAttribute>
    </xp:this.dojoAttributes>
</xp:button>

I have djConfig set to parseOnLoad: true.

I have set the property of the Xpage to "Trigger dojo parse on load".

I also have a onClientLoad event with dojo.require("dijit.form.Button");

Using ND9 if that could be the case...

On 8.5.3 the error is: Uncaught Error: Could not load class 'dijit.form.Button xspClientDojo.js:4 (anonymous function) xspClientDojo.js:4 $DBrH_ dojo.js:14 $DBpd_ xspClientDojo.js:4 $DBpe_ xspClientDojo.js:4 _96 xspClientDojo.js:4 dojo.loaded dojo.js:14 dojo._callLoaded dojo.js:14 dojo._modulesLoaded dojo.js:14 dojo._loadInit — Mikael Andersson Wigander
If I add a djButton to the page, then my regular button works as expected. — Mikael Andersson Wigander

Naveen Naveen · Accepted Answer · 2013-03-22T04:59:14

You should not add dojo.require("dijit.form.Button") in onClientLoad event. It serves a different purpose. Remove that code and add dijit.form.Button as Dojo Module in Resources tab of your XPages properties. In source it should come like this:

<xp:this.resources>
    <xp:dojoModule name="dijit.form.Button"></xp:dojoModule>
</xp:this.resources>

How to add a icon to a dojo button in Xpages?

1 Answers