![\"\"](\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2017\/02\/Pagedesigner-5.3.1..png\")
<\/a><\/p>\n<\/p>\n
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.<\/p>\n
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.<\/p>\n
Non the less, i figured to share these proceedings.<\/p>\n
<\/p>\n
The below prototype code was part of a script-adapter triggered on pageOpened;<\/p>\n
var page = this.page; \r\n\/*Some arbitrary widgets defined in the pagedesigner *\/\r\nvar wInbasket=page.Inbasket4;\r\nvar wCustomWidget=page.MijnVWSICMWidget0;\r\nvar wWebsiteWidget=page.WebSiteDisplayer1;\r\n\r\n\/* this.page.domNode gives the page layout, usable but not for this prototype*\/\r\nvar pageNode = wWebsiteWidget.getParent().domNode;\r\n\r\nvar createTabContainerAt=function (domNode){\r\n\r\n\tvar tc = new dijit.layout.TabContainer({ style: \"height: 100%; width: 100%;\"});\r\n\ttc.placeAt(domNode);\r\n\t\r\n\r\n\treturn tc;\r\n}\r\n\r\nvar appendWidgetToTC=function (widget, title, tc){\r\n\tvar wrapper=document.createElement(\"div\");\r\n\twrapper.style=\"width:100%;height:100%;position:relative\";\r\n\t\r\n\tvar newTab = new dijit.layout.TabContainer({title:title});\r\n\tnewTab.domNode.appendChild(wrapper);\r\n\twrapper.appendChild(widget.domNode);\r\n\t\r\n\ttc.addChild(newTab);\r\n}\r\n\r\nvar tc=createTabContainerAt(pageNode);\r\n\r\nappendWidgetToTC(wInbasket,\"Inbasket widget\",tc);\r\nappendWidgetToTC(wCustomWidget,\"Custom widget\",tc);\r\nappendWidgetToTC(wWebsiteWidget,\"Website viewer widget\",tc);\r\n\r\n<\/pre>\n <\/p>\n
And utlimately transformed this page:<\/p>\n