Adding caption to image in form

When you add an image on to your form in Lotus Notes you can specify a caption for that image. In the image properties you will find this option along with where do you want to position this caption.

I usually use this technique to put text on fancy button images. So with just one image resource I can have multiple buttons with each having different text on it. You can even change the font by clicking on the image and then setting font properties in toolbar.

Some limitations of this technique are that the caption cannot be computed and it does not work on web.

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.

Getting resources in database as stream in XPages (SSJS / Java)

Some time back I was trying to get the resources in database (to be precise image resource) in my SSJS / Java code. I tried a lot of options like ClassLoader.getResourceAsStream, MyClass.class.getResourceAsStream but no success. Then today while going through the sample database of Extension Library I ran into a piece of code which got the image resource as stream using a single line of code.

var inStream:java.io.InputStream = facesContext.getExternalContext().getResourceAsStream("<RESOURCE NAME>");

As simple as that. In case of Java you would write like this:

InputStream inStream = FacesContext.getCurrentInstance().getExternalContext().getResourceAsStream("<RESOURCE NAME>");

In my tests this worked for getting image resources, file resource and style sheets as streams.

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.

Error of "Invalid field name" while saving form

While working on a legacy Lotus Notes client based application, I did some modifications on a form but while trying to save it I was getting error message "Invalid field name" and the form simply refused to be saved. I checked all the field names trying to find out any invalid character amongst them, but no luck.

So I went to my faithful old friend — Google. And it took me to this discussion on Notes/Domino 8.5 Forum where a user was having the same issue. He resolved it by removing and adding existing sections. Why it happened, he didn't know.

Other ways to use @DeleteField

The help documentation of @DeleteField only displays one way on its usage:

FIELD fieldName := @DeleteField

But recently while working on an application I found out that there are other ways in which this command can be used.

@SetField("<FIELD NAME>"; @DeleteField);
@SetDocField("<DOCUMENT UNIVERSAL ID>"; "<FIELD NAME>"; @DeleteField)

Would love to hear if you know any other ways to use the command?

Expand / Collapse particular category in a view in XPages

In XPages, you can expand all / collapse all categories in a view either using the expandLevel property of view control or using view control API. The API technique can further be extended to expand / collapse a particular category in a view. So to expand the code goes like this: