Advanced lay-outing with the page designer

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 =; 
/*Some arbitrary widgets defined in the pagedesigner */
var wInbasket=page.Inbasket4;
var wCustomWidget=page.MijnVWSICMWidget0;
var wWebsiteWidget=page.WebSiteDisplayer1;

/* 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%;"});

	return tc;

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

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:


One thought on “Advanced lay-outing with the page designer

  1. Hi Ivo!
    Really like your blog items!

    Also I am creating an advanced free form layout page design where I dynamically load the case list based on the user’s role. In another tab the inbasket widget displays the current work-items for the selected case. I am trying hard to also manage the responsens from within the in-basket toolbar or by adding a work-item toolbar widget on the tab. But do you know if that last one is even possible? And do you might have an example on how to load and manage the responses for the selected work-item in the in-basket widget?

    Kind regards,

Leave a Reply

Your email address will not be published. Required fields are marked *