To modify the task attributes displayed in the table and their order, configure the file /ws/js/runtime/templates/processinstancehistory.html :
The tracking tab in HTML Workspace is used to display the details of process instances in which the logged-in user is involved. To view the tracking tables, first select a process name in the left pane to see its list of instances in middle pane. Select a process instance to see a table of tasks generated by this instance in the right pane. By default, the table columns display the following task attributes (corresponding attribute in task model is given in parentheses):
- ID (taskId)
- Name (stepName)
- Instructions (instructions)
- Selected Action (selectedRoute)
- Creation Time (createTime)
- Completion Time (completeTime)
- Owner (currentAssignment.queueOwner)
actionInstanceId |
isOpenFullScreen |
reminderCount |
classOfTask |
isOwner |
routeList |
consultGroupId |
isRouteSelectionRequired |
savedFormCount |
contentType |
isShowAttachments |
serializedImageTicket |
createTime |
isStartTask |
serviceName |
creationId |
isVisible |
serviceTitle |
currentAssignment |
nextReminder |
showACLActions |
deadline |
numForms |
showDirectActions |
description |
numFormsToBeSaved |
status |
displayName |
outOfOfficeUserId |
summaryUrl |
forwardGroupId |
outOfOfficeUserName |
supportsSave |
isApprovalUI |
priority |
taskACL |
isCustomUI |
processInstanceId |
taskFormType |
isDefaultImage |
processInstanceStatus |
taskUserInfo |
isLocked |
processVariables |
|
isMustOpenToComplete |
readerSubmitOptions |
For the following customizations in the task table, you need to do semantic changes in the source code. See Introduction to Customizing HTML Workspace fo how you can make semantic changes using workspace SDK and build a minified package from the changed source.
Changing table columns and their order
-
<table class="fixedTaskTableHeader" cellpadding="0" cellspacing="0"> <thead> <tr> <!-- put the column headings in order here, for example--> <th class="taskName"><%= $.t('history.fixedTaskTableHeader.taskName')%></th> <th class="taskInstructions"><%= $.t('history.fixedTaskTableHeader.taskInstructions')%></th> <th class="taskRoute"><%= $.t('history.fixedTaskTableHeader.taskRoute')%></th> <th class="taskCreateTime"><%= $.t('history.fixedTaskTableHeader.taskCreateTime')%></th> <th class="taskCompleteTime"><%= $.t('history.fixedTaskTableHeader.taskCompleteTime')%></th> </tr> </thead> </table>
<table class="taskTable" cellpadding="0" cellspacing="0"> <tbody> <%_.each(obj, function(task){%> <tr class="taskRow"> <!-- Put the task attributes in the order of headings, for example --> <td class="taskName"><%= task.stepName %></td> <td class="taskInstructions"><%= task.instructions %></td> <td class="taskRoute"><%= !task.selectedRoute?'':(task.selectedRoute=='null'?'Default':task.selectedRoute) %></td> <td class="taskCreateTime"><%= task.createTime?task.formattedCreateTime:'' %></td> <td class="taskCompleteTime"><%= task.completeTime? task.formattedCompleteTime:'' %></td> </tr> <%});%> </tbody> </table>
Sorting a tracking table
To sort the task list table when you click the column heading:
-
Register a click handler for .fixedTaskTableHeader th in the file js/runtime/views/processinstancehistory.js.
events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }
In the handler, invoke the onTaskTableHeaderClick function of js/runtime/util/history.js.
onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); }
-
Expose the TaskTableHeaderClick method in js/runtime/util/history.js.
The method finds the task attribute from the click event, sorts the tasklist on that attribute, and renders the task table with the sorted tasklist.
Sorting is done using the Backbone sort function on the tasklist collection by providing a comparator function.
return { //other methods onTaskTableHeaderClick : onTaskTableHeaderClick, //other methods };
onTaskTableHeaderClick = function (event) { var target = $(event.target), comparator, attribute; if(target.hasClass('taskName')){ attribute = 'stepName'; } else if(target.hasClass('taskInstructions')){ attribute = 'instructions'; } else if(target.hasClass('taskRoute')){ attribute = 'selectedRoute'; } else if(target.hasClass('taskCreateTime')){ attribute = 'createTime'; } else if(target.hasClass('taskCompleteTime')){ attribute = 'completeTime'; } taskList.comparator = function (task) { return task.get(attribute); }; taskList.sort(); render(); };
More like this
- Introduction to Customizing HTML Workspace
- Generic steps for HTML Workspace customization
- Managing tasks in an organizational hierarchy using Manager View
- Integrating Correspondence Management in HTML Workspace
- Single Sign On and timeout handlers
- Displaying the user avatar
- Displaying information in the Task Summary pane
- Changing the organization logo
- Changing the color scheme of the interface
- Changing the font on the interface
- Changing the locale of the user interface
- Customizing error dialogs
- Customizing tabs for a task
- Customizing Task Actions
- Customizing the listing of process instances
- Customizing the task Details page
- Displaying additional data in ToDo list
- Getting Task Variables in Summary URL
- Images for Route Actions
- Creating a new login screen
- Minification of the JavaScript files
- Sorting of Tracking tables and adding more columns
- Updating the link to the documentation
- Hosting two HTML Workspace instances on one server