Get appWebUrl and hostUrl in SharePoint Online / Office 365

When you are developing in SharePoint Online / Office 365 you will have to fetch appWebUrl and hostUrl if you want to perform any operation on your lists and libraries. I could find two ways of getting these values.

1. Reading values of SPAppWebUrl and SPHostUrl from query string

When you run your project it opens up the page Default.aspx. The URL of this page looks something like this.

Notice the query string parameters of SPAppWebUrl and SPHostUrl. You can fetch these values via a helper function.

Split string in JavaScript using regular expression

JavaScript has split() method which returns array of the substrings based on the separator character used. But you can also split a string using regular expression.

Say you have a credit card number which you want to split in array of four substrings with each substring consisting of 4 digits. For that you would use the match method of string.

var strValue = "1111222233334444";
var splitValues = strValue.match(/(\d{4})(\d{4})(\d{4})(\d{4})/);

// Start looping array from 1st index position as 0
// index position contains the entire parent string
for (var i=1 ; i<splitValues.length ; i++) {
 // Loop through the elements
}

Here, you use the match method and pass it the regular expression of (\d{4})(\d{4})(\d{4})(\d{4}) to split it into four equal substrings of four digits each. One thing to remember here is that the string returned here contains the parent string at the 0 index position and then the split substrings start at 1st position.

There is limitation here though — you need to know the number of characters in the string before hand, which might not be the case always.

Using ‘html’ option in SP.UI.ModalDialog.showModalDialog

I was trying to use SP.UI.ModalDialog.showModalDialog with html option using the below code:

var options = {
    title: "Title",
    width: 400,
    height: 600,
    html: "Content of dialog"
};
SP.UI.ModalDialog.showModalDialog(options);

But I was running into this weird error:

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");
}

Functions and properties of the XSP object

Stephan Wissel has blogged about some useful functions of XSP obeject. But the list is not complete. So I decided to put the XSP object through my helper JavaScript function listPropsAndFunctions. Below is the list of whatever I could find. I would be updating this list with explanation of whatever properties and functions I am able to find from time to time.

_allowDirtySubmit

_dirty

_dirtyFormId

_eventNameHtmlToWidget

_listeningForDojo

_listeningForDojoOnload

_onLoadListeners

_submitValue

_submitValueSet

Getting properties and functions of JavaScript objects

I was looking for a way to get all the properties and functions for a particular JavaScript object. Looking around the web I found this discussion of StackOverflow which gave me my answer. I created a small helper function to which you pass your object and it spit out all its properties and function in the console. This is how it looks like:

function listPropsAndFunctions(object) {
    var o;
    for (o in object) {
        console.log((typeof object[o] == "function" ? "function " : "") + o);
    }
}

You may argue that content assist in IDEs already give you this information. But there are slight differences in implementation of JavaScript of each browser. Looking into the document object on Chrome I found a property webkitIsFullScreen, but on Firefox there is not corresponding property with name mozIsFullScreen (I am looking at Firefox 16).

Using indexOf method on array in server side JavaScript

Sometime back I was trying to use indexOf method on an Array object in server-side JavaScript (SSJS) code. But it was giving me error that indexOf method is not defined. I also couldn't find this method in help documentation. It was then it struck me that the implementation indexOf method in client side JavaScript itself is a bit fuzzy with Internet Explorer not supporting it. It can be defined using prototype property.

I found a simple solution here which implements the method. Just add the below code snippet to your SSJS code and then you would be able to use indexOf method.

if(!Array.indexOf) {
   Array.prototype.indexOf = function(obj) {
      for(var i=0; i<this.length; i++) {
         if(this[i]==obj) {
            return i;
         }
      }
      return -1;
   }
}

Remember that this would be required for SSJS. For client side JavaScript I would recommend using dojo.indexOf.

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.

Importing script library in Domino Designer

Domino Designer provides facility to import image resources, style sheets and file resources.

But for script libraries, there is no such option.

So when I need to import a third-party JavaScript script library I usually would create one and then copy-paste the contents into it. But there's an easier way to do it.

Creating ticker using JavaScript inside Lotus Notes client

I always felt that the power of JavaScript is Lotus Notes client is underrated. Some articles which do describe this are here and here. I realized this power when a some time back I had create a ticker that worked in Lotus Notes client. You can simply embed an Java applet in the form but, Java applet and Lotus Notes don't gel together very well. You also go for animated table, but then you there would be only specified number of entries (rows) which you be able to cycle through.

Using JavaScript to create a ticker is very similar to creating one for Web browser. To start off create two computed fields on your form - TickerURL & TickerText with their respective field names in their value.

Put an action hotspot around the field TickerText and write the following formula: