7/22/2013

Render View Column Color in a XPage

In Notes you can easily change the color of columns (background and text) with a list of integers in a hidden column. In Xpages it is not as easy, you need to either translate the colors to hex, oder into style classed that do the work for you. I found an interesting article on how to transform the information into styles, you can find it here, but i wanted to have the flexibility to change the notes view and have the xpage change automatically according to it, too.



So i came up with this little function that can be used in a computed style for a row, or a single cell. Make sure to use the advanced properties of the view to make the column entry accessible, in this example i chose "rowData" as the name for the variable, then just use the function like this

getColumnColorStyle(rowData, 3, "width: 15px;");

Its as easy as that, and if you put the function into a script library, you can make it accessible to all of your pages easyily (i chose to use a new namespace for all of the tool functions i use, but here you have got the plain function).

function  getColumnColorStyle(rowData, column, baseStyle){
   var styleString = baseStyle?baseStyle:"" ;
   var arr=rowData.getColumnValues().get(column);
   if(arr){
      var f = function twoDigitHex(anInteger){
         return ("00"+parseInt(anInteger).toString(16)).right(2);
      };
      var hexcolor = "#"+f(arr[0])+f(arr[1])+f(arr[2]);
      if(hexcolor!="#000000" )
         styleString+= "background-color: "+hexcolor+";";
      if(arr.length > 5){
        hexcolor = "#"+f(arr[3])+f(arr[4])+f(arr[5]);
        if(hexcolor!="#000000" )
           styleString+= "color: "+hexcolor+";" ;
      }
   }
   return styleString;
}

7/03/2013

Enabling Cross-Server Database Access for XPages

Did you ever encounter a "NotesException: Database has not been opened yet" when trying to open a database on another server from an XPage? This would be something like this:

var db = sessionAsSigner.getDatabase("server","some/database.nsf");
return db.getView("someView");

Here is the solution:

As the XPage is like an Agent on the executing server, you need to put this server into the "Trusted Servers" field in the "Security" tab of the target server's "Server Document", as only agents from servers listed in the "Trusted Servers" can access databases from remote agents.

Here is an example, better use a group for production, as it is more flexible:






5/17/2013

Fancy Dojo Widget: A Simple Image with Lazy-Loading Tooltip Content

Today i needed an image displaying some data from a webservice. Only catch is, the data should only be loaded, when the tip is displayed - so i had to code my own custom widget for Dojo 1.6 (.1).

Here it is for you to use it in your projects, if you like:

Code:

        dojo.provide("dijit.ImageTooltipWidget"); 
        dojo.require("dijit._Widget"); 
        dojo.require("dijit._Templated"); 
        dojo.declare("dijit.ImageTooltipWidget",
            [dijit._Widget,dijit._Templated],{ 
                id: "someId", 
                src: 'info.jpg', 
                templateString: '<div id="${id}"><img src="${src}" data-dojo-attach-point="imgNode"/></div>', 
                tooltip: null, 
                defaultLabel: "Lade...", 
                showDelay: 250, 
                getData: null, 
                onTooltipFocus: null, 
                postCreate: function(){ 
                        dojo.require('dijit.Tooltip'); 
                        var tooltip = new dijit.Tooltip({ 
                                connectId: this.domNode, 
                                label: this.defaultLabel, 
                                showDelay: this.showDelay 
                        }); 
                        tooltip._destroyOnRemove =true; 
                        tooltip.startup(); 
                        if(this.onTooltipFocus) 
                                dojo.connect(this.imgNode,
                                  "mouseover",this,"onTooltipFocus"); 
                        else if(this.getData){ 
                                this.onTooltipFocus = function (){ 
                                        tooltip.set("label",this.getData()); 
                                } 
                                dojo.connect(this.imgNode,
                                  "mouseover",this,"onTooltipFocus"); 
                        } 
                        this.tooltip = tooltip; 
                    this.inherited(arguments); 
                }, 
                constructor:function(args){ 
                        this.inherited(arguments); 
                        //do some other stuff 
                } 
        }); 


Useage:

new dijit.ImageTooltipWidget({src: "anImage.jpg", id:"toolTipImage", "getData": someFunctionThatReturnsData});

where the someFunctionThatReturnsData could be something like:

function someFunctionThatReturnsData (){
     return "<div> Data from 'service'... </div>";
}

or you can create your own onToolTipFocus as a function hook.