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)