Tooltips makover – Siebel Open UI

Few weeks back I had published a post that showcased how you can use power of Siebel Open UI to actually implement tooltips for fields in List and Form applets in truly SRF independent way. If you haven’t gone through the post I would suggest doing that before continuing. You will also be able to see it in action next year in first ever Siebel Open UI book published by packt along with several other advanced example that allow to fully understand and use power of Open UI for creating truly wonderful User Experience. So, don’t forget to get your hands on as soon as one comes out (I know I will be getting one ).

I felt it was good and really useful example but it lacked one thing ability to truly style the tooltips in the way you want. Let’s say for some fields I would like to emphasize the tooltip, for others I would like to appear it in red color so that user pay more attention to it or for some fields you would like to present it in blue (you get the point). I really wanted it to be flexible in terms of style so I started exploring ways to achieve it. Soon I realized that it would not be possible without a plugin and after some research I zeroed in on qTip2.

Here is what I have achieved with the plugin.

The starting point of our new solution will be the old solution. So, if you don’t have that handy download it from here

Before diving into the code let’s discuss the new structure of the JSON file :

{
  "Account List View": {
     "SIS Account List Applet": {
        "Row Status": {
           "tooltip": "Status of Account.",
           "type": "warning"
         },
        "Name": {
           "tooltip": "Name of the Account",
           "type":"warning"
         },
        "Type": "Type of Account"
      },
     "SIS Account Entry Applet": {
        "Name": "Name of Account",
        "SalesRep": "Sales Team for Account"
     }
  }
}

Basic structure of the file is same having following hierarchy
1. View Name
2. Applet Name
3. Control details
Control tooltip can be plain string OR
Control can be an object having following properties
1. content (required) : The content of the tooltip.
2. type (Optional): define the tooltip at this point it can have info or warning as possible values but you can extend it as you want.

Now the code changes:

I have introduced a new function to get the tooltip string. Now the tooltip string will be inserted as a span tag next the control instead of title attribute of the control.

TooltipPR.prototype.buildTooltip = function(tooltipObj){
    var tooltip = "";
    //if string then just process it as text
    if(typeof(tooltipObj) === "string" &amp;&amp; tooltipObj){
        tooltip = "<span style='display:none'>"  + tooltipObj + "</span>";
    }
    //if it is a object then process the properties that comes along with it
    if(typeof(tooltipObj) === "object"){
       var text = tooltipObj.tooltip; //get the content
       if(typeof(text) === "undefined")// there is no content property
         return tooltip; //go back .. do not process

       var spanClass = "";
       var type = tooltipObj.type; //get the type
       //making sure type is defined otherwise
       //can there be a better way to do it ????
       if(typeof(type) === "string"){
         //differnt types are just different type sytle based on classes
         //you can create your own if you want.
         switch(type){
            case "info":
              spanClass = "class='qtip-blue'";
            break;
            case "warning":
               spanClass = "class='qtip-red'";
            break;
            default:
              spanClass = "class='qtip'";
            break;
          }//end of switch
        }//end of if type
       //create the tooltip span
       tooltip = "<span style='display:none' " + spanClass + ">" + text + "</span>";
   }
  return tooltip;
}

The finally few modifications in the code of SetRenderer function

TooltipPR.prototype.SetRenderer = function(){
     var viewName = this.GetPM().GetName();
     //pass view name so that we get only data for that view
     var tipsObject = this._readTips(viewName);
     var appletTipsObj = "", strTip = "", ctrlName = "", ctrlSelector = "", oCtrl = "",sTooltipSpan = "";
     var oApplets = this.GetPM().GetAppletMap();
     //run through all the applets in the view
     for(var oApplet in oApplets){
        appletTipsObj = tipsObject[oApplet]; //check if we have tooltip definition for this applet
        if(typeof(appletTipsObj) === "object"){//if applet found
           SiebelJS.Log("Processing Tips");//process the tooltip data
           var appletProp = this._GetAppletProp(oApplets[oApplet].GetFullId()); //get the current applet id
           var oControls = oApplets[oApplet].GetControls(); //get the controls
           //run loop around all the controls in file for this applet
           for(var tip in appletTipsObj){
               strTip = appletTipsObj[tip]; //get the tooltip text
               oCtrl = oControls[tip]; //get the control from the applet
               if(typeof(oCtrl) === "object"){ // make sure specified control is found
                  sTooltipSpan = this.buildTooltip(strTip); //this is the new function to get tooltip data in span
                  ctrlSelector = this._GetControlListColSelector(appletProp, oCtrl.GetName()); //get the label selector
                //append our image to control and add tooltip span next to image for tooltip to work
                if(sTooltipSpan){ //process only if something's there
                    $(ctrlSelector).append("<img class='help-icon' height='12px' width='12px'  src='images/help-icon.jpg' true=''/>" + sTooltipSpan);
}
                }//end of if
           }//end of for
         }//end of if
         else{
             SiebelJS.Log("No Tips found for Applet :: " + oApplet );
         }
      }//end of for loop of applets

//initalize tooltip for our images
$("img.help-icon").each(function(){
     $(this).qtip({
          content: {
           text: $(this).next('span') // Use the "span" element next to this for the content
          },
         style:{
           classes: $(this).next('span').attr("class") + ' qtip-shadow'
        }
     });
 });
};//end of setr

Following are the differences in code:

The way to get the tooltip text instead of straight processing we evaluate if it is an object or string and then create a span tag
The way tooltips are initialized. We are using a 3rd party plugin qTip2 for tooltips so the initialization based on it requirements.

Now something about qTip plugin

This is one of the leading tooltip plugin used across thousands of website. It supports HTML tooltips and offers plethora of features such as ajax, iframe, embedded videos etc. All I had to do was to include the JS and CSS file of this plugin and I was good to go.

On a side note I tried to use code from my last post to recreate it in my local and I ran into some issues. So this time I am sharing link of the actual JS file that is working on my local so that you don’t have to go through the same issues. You can download it by clicking here.

Below is video that shows the functionality in action along with another surprise functionality so don’t forget to watch till the end.