Siebel Applets in Tabs- Siebel Open UI

@lex in his blog has been exploring various jQuery UI widgets and showing their application in Siebel Open UI. While going through them jQuery Tabs caught my attention and I wondered how can they be implemented in Siebel Open UI. So, going one step ahead of @lex I went on to abuse the whole Opportunity List View :) (instead of just an applet) and below is output that I got:



Opportunity List View was manipulated at run time to display the Applets in tabbed format instead of sequential applets.


There are two approaches to achieve the tabbed layout. This post discusses about using pure JavaScript/jQuery technique to achieve the tabbed layout and in next post I will share the web template approach.

Standard Disclaimer:

This code is not a production Ready code and is for educational purposes only. Use this on your own personal risk

As explained by @lex earlier the best place (till now) to manipulate the whole view is postLoad.js which is executed after every view load. So, I went ahead and put modified code in postLoad.js file and this is how my postLoad.js finally looked like.

if (typeof (SiebelAppFacade.Postload) == "undefined") {
SiebelApp.EventManager.addListner( "postload", OnPostload, this );
function OnPostload( ){
//start of custom code
var view = SiebelApp.S_App.GetActiveView();
var viewName = view.GetName(); //get the active view name
if(viewName == "Opportunity List View"){ //if my intended view then
//define all the variables
var tabHTML = "";
var theApplet;
var appletId ="";
//you can invert the condition if you want to
if($('#tabList').length > 0){
//already tabified don't do anything
//you can also remove and then tabify again
var arrApplets = view.GetAppletMap(); //get array of applets
//prepare you tabs div
tabHTML = "<div id=\"tabs\"><ul id=\"tabList\">";
for(var a in arrApplets){ //run loop around applets
theApplet = arrApplets[a];
appletId = theApplet.GetFullId();
//to display applets as tabs wrap them in li and a tag
//use title of applet as tab title
tabHTML = tabHTML + "<li><a href=\"#" + appletId + "\">" + $("#s_" + appletId + "_div").attr("title") + "</a>";
tabHTML= tabHTML + "</ul></div>";
$('#_sweview').prepend(tabHTML); //attach the html to view div
$('#_sweview').tabs(); //tabify the applets
}//end of else
}//end of view if
}//end of try

I think the code has been commented well enough to understand but here is high level explanation

  1. GetAppletMap –> provides you with array of all the applet objects in view
  2. GetFullId –> gives you the value of id attribute div that can be used for jQuery selector
  3. _sweview –> is the value of the id attribute of the view rendered by siebel (container of applets)
  4. $(‘#_sweview’).tabs() -> jQuery function to initialize Tabs.

Comments and Questions are welcome!!

One Response to Siebel Applets in Tabs- Siebel Open UI

Leave a Reply