Technical Blog Post
Abstract
Customize the In-basket widget column style
Body
With IBM Case Manager 5.2, you can customize the style of the in-basket by building a custom in-basket widget, starting with the standard one, and adding a custom column decorator. Developers can override the getColumnDecorator() function on icm/pgwidget/inbasket/Inbasket class, which returns an object with a column id to the decorator function pairs.
The following sample will highlight the property name “flo” by its value range.
getColumnDecorator: function(){ //Get the decorator from the original ICM In-basket var deco = this.inherited(arguments); //Add decorator for property flo, mark it as red if it is below the value of 100. (Note: the property id is prefixed by the solution prefix) var propertyName = this.getSolution().getPrefix()+"_flo"; deco[propertyName] = lang.hitch(this, function(data, rowId, rowIndex) { //Get current work item var cl = this.contentLists[this.selectedIndex]; var item = cl.grid.row(rowId).item(); // Get a property value var property = item.getValue(propertyName); // return "" if the property is absent if (!property) { return ""; } // Set style per the property value var style; if (property < 100) { style = "color:red;" } else if (property >= 200 && property < 500) { style = "color:green;" } else if (property >= 500) { style = "color:yellow;" // Set the cell content, you can embed traffic light or something in the div for highlight var fieldsHTML = '<div style="' + style + '">' + property + '</div>'; return fieldsHTML; }); return deco; }
The steps for creating page widget can be found in the article "Creating custom widgets with the IBM Case Manager JavaScript API". (http://ibm.co/1arIqxr)
The custom in-basket sample (icm.custom.pgwidget.custominbasket.CustomInbasket) could be found in the sample code package of the above article.(http://ibm.co/1jCb9zM)
UID
ibm11281238