Using dojo.query with IDs containing colon symbol

While working on my XSnippet to move between pages in a pager control using arrow keys I required to get elements based on pager ID. So I went with dojo.query. But selectors in dojo.query cannot contain characters like colon which XPage extensively uses for generating IDs.

So the code dojo.query("view:_id1:viewPanel1:pager1") will not work. To make it work you need to escape the : with \: or even better with \3A, for backward compatibility with IE.

I wrote a simple helper function escape colon characters from ID.

function escapeColon(controlID) {
    return controlID.replace(/:/g, "\\3A");
}

Drag out file links from download control to save just like in Gmail

Google adds a lot of interesting features in it products. One of them is dragging a file link in your Gmail on to your desktop (or a folder) to download it. This article on CSS Ninja explains exactly how it is done.

We can also put this feature in our download control so that each file link can be dragged on to your folder to start download without going through save dialog.

Step 1: Identifying the file links in a download control

This is actually pretty simple. XPages by default sets the class name of the file links in download control to xspLinkFileDownload. So all you need to do is to use a simple dojo.query to find all those link and loop through them.

Step 2: Adding attributes to anchor tag

Now you need to set two attributes in the anchor tags of file links - draggable and ondragstart. The draggable attribute needs to be set to true, that's all.

Setting ondragstart requires a bit more details. You need to call event.dataTransfer.setData("DownloadURL", "application/octet-stream:<FILE NAME>:<FILE DOWNLOAD URL>"). Note that while specifying <FILE DOWNLOAD URL> make sure its the complete path start from http://. These attributes can be set using dojo.attr.

So your final JavaScript code looks something like this:

dojo.query(".xspLinkFileDownload").forEach(
    function(node, index, arr) {
        dojo.attr(node, "draggable", "true");
        dojo.attr(node, "ondragstart", "event.dataTransfer.setData('DownloadURL', 'application/octet-stream:" + node.innerText + ":" + node.href + "')");
    }
);

One limitation here is that this only works for Google Chrome. I have put this script block on XSnippets here. Just copy it from there and put it into your XPage.

Using dijit.form.CheckBox in check box group in XPages

dijit.form.CheckBox adds a fancy styling to the plain check box, which I love. Adding it to a single check box is pretty straight forward. Just set the dojoType property of the check box to dijit.form.CheckBox. But in case of check box group its not that straight forward.

When a check box group is rendered in browser it is rendered inside <fieldset> tag. So setting the dojoType property doesn't give the desired result. You need to set the dojoType property individually on each of the check boxes in the group. Fortunately, all the check boxes share the same name so they can be targeted using simple dojo.query.

Let's say the name of your check box group is "checkBoxGroup", then just add this script block to your XPage:

<xp:scriptBlock>
<xp:this.value><![CDATA[dojo.query("input[name=\"#{id:checkBoxGroup2}\"]").forEach(
function(node) {
dojo.attr(node, {dojoType: "dijit.form.CheckBox"});
}
)]]></xp:this.value>
</xp:scriptBlock>

Make sure you place this script block after your check box group. Needless to say that you need to add dijit.form.CheckBox in your XPages resources as Dojo module.

You can also extend this technique to set dijit.form.RadioButton in radio button group.

Add custom icon to dojo button in XPages

Adding icon to a dojo button is pretty simple. Jut set the dojo type to dijit.form.Button and add a dojo attribute named iconClass with value dijitEditorIcon dijitEditorIconCut.

And you get something like this:

But what if you want your own custom icon to appear on the button? The Dojo Themes and Theming Documentation explains about using custom icons. First of all import the icon image in your database. Now create a style sheet with following CSS class.