Intalio : How to customize the task list in UI-FW console

In this post, I'll explain how the UI-FW console can be customized, that is, how you can add columns to the task list. Note that the additional columns are intended to display task metadata (such a task's status, owner user, owner group, ...). I've never needed to customize the task list to display information other than task related ones, so far, but it's definitely something I'll try to do later.

As an example, I'll add a column to display the user to whom a task is assigned.

Adding a column to the task list is done with the two following steps

1° Adding the new column to grids.jsp

The grids.jsp file is located in INTALIO_HOME\webapps\ui-fw\script

Edit this file and search for "Table for activity tasks" (should be at the line 546). Below this comment, you'll find the definition of the existing columns :

/*
    Table for activity tasks
    */
 var taskIcons = getToolbarIconsCodes(taskIconSet);
    var t1 = $("#table1").flexigrid($.extend({
      <% if(useToolbar) {%> 
        buttons : taskIcons,
        <%} %>
        params: [
        { name : 'type', value : 'PATask' },
        { name : 'update', value : true }
        ],
        colModel : [
        {
          display: '', 
          name : '_description', 
          width : width*0.44, 
          sortable : true, 
          align: 'left'},
        {
          display: '', 
          name : '_state', 
          width : width*0.035, 
          resize : true, 
          sortable : true, 
          align: 'center'},
        {
          display: '', 
          name : '_creationDate', 
          width : width*0.15, 
          sortable : true, 
          align: 'left'},
        {
          display: '', 
          name : '_deadline', 
          width : width*0.15, 
          sortable : true, 
          align: 'left'},
        {
          display: '', 
          name : '_priority', 
          width : width*0.070, 
          sortable : true, 
          align: 'center'},
        {
          display: '', 
          name : '_attachments', 
          width : width*0.12, 
          sortable : false, 
          align: 'center'}
        ]
    },p));

Then, simply add a new column definition block (between brackets) for a column named _userOwner and watch out for the comma (the different column definition blocks are separated by a comma) :

/*
    Table for activity tasks
    */
 var taskIcons = getToolbarIconsCodes(taskIconSet);
    var t1 = $("#table1").flexigrid($.extend({
      <% if(useToolbar) {%> 
        buttons : taskIcons,
        <%} %>
        params: [
        { name : 'type', value : 'PATask' },
        { name : 'update', value : true }
        ],
        colModel : [
        {
          display: '', 
          name : '_description', 
          width : width*0.44, 
          sortable : true, 
          align: 'left'},
        {
          display: '', 
          name : '_state', 
          width : width*0.035, 
          resize : true, 
          sortable : true, 
          align: 'center'},
        {
          display: '', 
          name : '_creationDate', 
          width : width*0.15, 
          sortable : true, 
          align: 'left'},
        {
          display: '', 
          name : '_deadline', 
          width : width*0.15, 
          sortable : true, 
          align: 'left'},
        {
          display: '', 
          name : '_priority', 
          width : width*0.070, 
          sortable : true, 
          align: 'center'},
        {
          display: '', 
          name : '_attachments', 
          width : width*0.12, 
          sortable : false, 
          align: 'center'},
        {
          display: '', 
          name : '_userOwner', 
          width : width*0.035,
          sortable : true, 
          align: 'left'}  
        ]
    },p));

Note that the value of the "key" attribute is used to define which label will be displayed in the column header. These labels can be specified in the internationalization files (properties files) located the INTALIO_HOME\webapps\ui-fw\WEB-INF\classes directory.

2° Editing the updates.jsp file

The updates.jsp file is located in INTALIO_HOME\webapps\ui-fw\WEB-INF\jsp.
This file needs to be edited in order to map the task metadata to the columns from the task list. In the updates.jsp file, there is a "choose" tag that contains a "Notification" section, a "PIPATask" section and an "otherwise" section. Simply add a "cell" definition in that last one and you good to go :

<cell>

     <c:choose>

      <c:when test="${taskHolder.task.userOwners != ''}">

                  ${taskHolder.task.userOwners}

      </c:when>

      <c:otherwise>none</c:otherwise>

      </c:choose>

</cell>

To correctly map a task metadata with a column, you'll need to indicate the correct attribute name from the Task.java class (in my case, taking a peek to the source was very helpful to find out what are the attributes name). For instance, if you use taskHolder.task.userOwnersWrong instead of taskHolder.task.userOwners, you'll get exceptions in the Intalio console and logs when loading the task list.

Here's the result :

 Thanks

Finally, I just want to thank Mr. Ihab El Alami (process expert at Intalio) who gave me some hints to customize the UI-FW console.