Dojo Data Grid in XPages - Lessons Learned

Here are some things i came across when implementing a dojo data grid (the default dojo 1.6.1 in domino 8.5.3) on my xpage projects:

• include the correct css ("/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css" will work)
• if you use an expensive web service, use the store to get the items and add them to the store manually, this way client side rendering and sorting will be faster (here is how you can do it)
• use dojo.data.ItemFileReadStore as a container for your items if you do not want to bother implementing your own sorting and caching
• do not use "auto" columns - it can only work if you are not using a store in the grid and you load all the data only once and push it to the grid, and even then it is discouraged
• do not set the style of element that contains the grid to "display: none" it will just not work
• try not to encapsulate the grid inside other panels or divs if possible, some css settings might break the design - in most cases the grid did not even show a single visible pixel for me, but it was definately there and populated
• set a style in px to tell dojo what dimensions to render, directly in the div / panel like this: style="width: 400px; height:300px"
• declare your own datastore to process data and connect easily to the fetch and _processResults methods and not mess with the original implementation (here is how its done)
• use a loading screen and connect to the _processResults to hide it after the data has been loaded

Useful Tool: Domino Error Codes (Freeware)

I just found this handy tool, that helped me translate a notes error box into a lotus script error code. Pretty nice and saves some debugging for the right code. The help is not helpful in this context anyways.

Domino Error Codes (Freeware)

Would be nice to get it in other languages like german too, but well... pretty helpful as it is.

Open Attachments In A XPage In Client Application

I recently stumbled about how to open a file attachment like a picture, if you are in a xpage in client application - the url is a completely different one than that in a browser, and it is pretty much undocumented.
In my case, i even had to access an attachment in a differten database, what adds another layer of complexity.
So in addition to the infos in the post "Attachment URLs in XPages", i discovered the complete, correct format how to do it.

http(s)://127.0.0.1:[theRandomXPINCPort]/xsp/[currentServer]!![yourCurrentApplication.nsf] /xsp/.ibmmodres/domino/OpenAttachment/[yourTargetServer]!![yourTargetapplication.nsf]/[UNID]/$File/[AttachmentName]?Open

First part is easy - your local host and the image of the xpage on the server and database you are  just working in. Then add the openattachment url part, then the target server and database.

Easy - when you know it. Have fun!

As a bonus, here is a complete library code, that does the magic for you, modifying the code from the post "XPages in Notes Client!! How to build URLs".

var debug = false; 
/**
Builds path to an attachment
*/

function getAttachmentPath(doc:NotesDocument, attachmentName, rtFieldName){
 if(rtFieldName==null || rtFieldName ==""){
  rtFieldName = "$File";
 }
 if(context.isRunningContext("Notes")){
     var dbPath = getDbPath();
  var dbPathTarget = getDbXPInCPath(doc.getParentDatabase());
     return "" + dbPath[0] + "/xsp/.ibmmodres/domino/OpenAttachment/" + dbPathTarget + "/" + doc.getUniversalID() + "/"+rtFieldName+"/" + escape(attachmentName)+ "?OpenElement";
 }
    else{
     var url = doc.getHttpURL();
  return url.replace("?OpenDocument","/$File/"+attachmentName+"?OpenElement");
    }
}

/**
Cache the XpagesInClient path variables in an applicationScope variable
*/
function getDbXPInCPath(db:NotesDatabase){
    var dbCacheName = "dbpathxpinc-"+@LeftBack(db.getFileName(),".");
    if(debug||isCacheInvalid(dbCacheName, 600)){
     synchronized(applicationScope){
      var res = db.getServer()+"!!"+db.getFilePath().replace("\\","/");
      applicationScope.put(dbCacheName,res);
     }
    }
    return applicationScope.get(dbCacheName);
}

/**
Cache the dbPath variables in an applicationScope variable
*/
function getDbPath(){
    if(debug||isCacheInvalid("dbpathweb", 600)){
     synchronized(applicationScope){
      var dbPath = @Left(context.getUrl().toString().replace("\\","/"), ".nsf") + ".nsf";
      var pos = (context.isRunningContext("Notes")) ? 4 : 3;
      var secondPathElements = dbPath.split("/");
      var secondPath = "";
      for (pos; pos<secondPathElements.length; pos++){
       if (secondPath != "")
       secondPath += "/";
       secondPath += secondPathElements[pos];
      }
      var res:Array = new Array();
      res.push(dbPath);
      res.push(secondPath);
      applicationScope.dbpathweb = res;
     }
    }
    return applicationScope.dbpathweb;
}

/**
A generic caching mechanism for each key will check to see if it is 'n' seconds
since it was last updated. Use for things that change relatively infrequently  
*/
function isCacheInvalid(key, cacheInterval){
    var currentTime = new Date().getTime();
    if (!applicationScope.containsKey(key + "_time")){
     applicationScope.put(key + "_time", currentTime);
     return true;
    }
    var diffInSecs = Math.ceil((currentTime - applicationScope.get(key + "_time")) / 1000);
    if (diffInSecs < cacheInterval) {
     return false;
    } else {
     applicationScope.put(key + "_time", currentTime);
     return true;
    }
}