edit: The post below finally became obsolete as IBM finally created the layout-widgets our client’s had been asking is for! Introduced as of 5.3.1. are: tabs, columns and titlepanes!

While i aimed this post to contain a first prototype of, what i call an advanced layout widget for IBM Case Manager, unfortunately i have only been able to create a proof of concept for the idea that configured widgets (page designer) can be reorganized, while maintaining their original wiring functionality.

While this knowledge will ultimately result in something cool, i guess at this point it’s only a boring prototype combining three widgets on a custom page within a tabcontainer.

Non the less, i figured to share these proceedings.

The below prototype code was part of a script-adapter triggered on pageOpened;

var page = this.page; 
/*Some arbitrary widgets defined in the pagedesigner */
var wInbasket=page.Inbasket4;
var wCustomWidget=page.MijnVWSICMWidget0;
var wWebsiteWidget=page.WebSiteDisplayer1;

/* this.page.domNode gives the page layout, usable but not for this prototype*/
var pageNode = wWebsiteWidget.getParent().domNode;

var createTabContainerAt=function (domNode){

	var tc = new dijit.layout.TabContainer({ style: "height: 100%; width: 100%;"});
	tc.placeAt(domNode);
	

	return tc;
}

var appendWidgetToTC=function (widget, title, tc){
	var wrapper=document.createElement("div");
	wrapper.style="width:100%;height:100%;position:relative";
	
	var newTab = new dijit.layout.TabContainer({title:title});
	newTab.domNode.appendChild(wrapper);
	wrapper.appendChild(widget.domNode);
	
	tc.addChild(newTab);
}

var tc=createTabContainerAt(pageNode);

appendWidgetToTC(wInbasket,"Inbasket widget",tc);
appendWidgetToTC(wCustomWidget,"Custom widget",tc);
appendWidgetToTC(wWebsiteWidget,"Website viewer widget",tc);

And utlimately transformed this page:

into: