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.

Solution:

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.

[code language="javascript"]
if (typeof (SiebelAppFacade.Postload) == "undefined") {
Namespace('SiebelAppFacade.Postload');
(function(){
SiebelApp.EventManager.addListner( "postload", OnPostload, this );
function OnPostload( ){
try{
console.log("Loaded");
//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
}
else{
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
catch(error)
{
//No-Op
}
}
}());
}
[/code]
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!!