Monday, April 25, 2011

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.

6 comments:

  1. Very usefull post. Are you using enterprise version . Could you help me locate Task.java class or help me undertand how to identify the exact attributes as mentioned by you ("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. ")

    ReplyDelete
  2. Hi,

    I'm currently working on the Community Edition because our client does not need features such as BAM or BRE that are available only in the Enterprise Edition.

    In order to consult the Task.java class, you could either retrieve the source of the Tempo project (I've also blogged about that previously so you could check my other posts), or you could decompile the tempo-tms-common-6.0.3.015 jar.

    This jar is located in %INTALIO_HOME%\webapps\ui-fw\WEB-INF\lib, with %INTALIO_HOME% corresponding to your Intalio server root directory.

    To decompile the jar, I would recommend you to use JD-GUI, which is very light but powerful.

    Within the JSP pages from Intalio, the task related info are mainly accessed through EL (Expression Language) and basically, each task attribute could be accessed via its getter name from which you just need to remove the "get" part.

    For instance, the "taskHolder.task.userOwners" attribute is accessed this way because an instance of Task exposes its owners via the "getUserOwners()" method (which, BTW, is inherited from the BaseRestrictedEntity class).


    Should you still be confused with this explanation, feel free to reach me...

    ReplyDelete
  3. Thanks for the response,

    I used JD-GUI, yes quite easy to use. I tried displaying userwoner values and it worked out successfully for me.

    Will try the Tempo also.

    ReplyDelete
    Replies
    1. Hi Can you help me get the list of instance from intallio server, we need to get those values and display in our java code. please respond me waiting for your kind response

      Delete
    2. Hi Salamon,

      Sorry, I lost the code a while ago when my HD crashed and given that I don't work with Intalio anymore, I haven't reworked this example.

      Regarding the list of instances, I guess you mean the process instances. I can't remember the exact table in which they are stored but in the version of Intalio I used to work with, all Intalio specific data were stored in table whose name starts with 'tempo_'.
      If you try starting some worfklow instances and querying the DB, you should be able to pinpoint the table(s) from which you need to retrieve datas.
      I think that this another post could give you some more hints: http://kh-yiu.blogspot.be/2011/08/intalio-bpms-replacing-derby-in-memory.html

      Hope that helps.

      Delete