DocumentationAEM 6.4Forms Guide

Customize tracking tables customize-tracking-tables

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

The tracking tab in AEM Forms 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)

The remaining attributes in the task model available for display in the task table are:

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 AEM Forms 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 changing-table-columns-and-their-order

  1. To modify the task attributes displayed in the table and their order, configure the file /ws/js/runtime/templates/processinstancehistory.html :

    code language-as3 
    <table>
    <thead>
        <tr>
            <!-- put the column headings in order here, for example-->
            <th><%= $.t('history.fixedTaskTableHeader.taskName')%></th>
            <th><%= $.t('history.fixedTaskTableHeader.taskInstructions')%></th>
            <th><%= $.t('history.fixedTaskTableHeader.taskRoute')%></th>
            <th><%= $.t('history.fixedTaskTableHeader.taskCreateTime')%></th>
            <th><%= $.t('history.fixedTaskTableHeader.taskCompleteTime')%></th>
        </tr>
    </thead>
</table>
    code language-as3 
    <table>
    <tbody>
        <%_.each(obj, function(task){%>
        <tr>
            <!-- Put the task attributes in the order of headings, for example -->
            <td><%= task.stepName %></td>
            <td><%= task.instructions %></td>
            <td><%= !task.selectedRoute?'':(task.selectedRoute=='null'?'Default':task.selectedRoute) %></td>
            <td><%= task.createTime?task.formattedCreateTime:'' %></td>
            <td><%= task.completeTime? task.formattedCompleteTime:'' %></td>
        </tr>
        <%});%>
    </tbody>
</table>

Sorting a tracking table sorting-a-tracking-table

To sort the task list table when you click the column heading:

  1. Register a click handler for .fixedTaskTableHeader th in the file js/runtime/views/processinstancehistory.js.

    code language-as3 
    events: {
    //other handlers
    "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
    //other handlers
}

    In the handler, invoke the onTaskTableHeaderClick function of js/runtime/util/history.js.

    code language-as3 
    onTaskTableHeaderClick: function (event) {
        history.onTaskTableHeaderClick(event);
}

  2. 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.

    code language-as3 
        return {
        //other methods
        onTaskTableHeaderClick  : onTaskTableHeaderClick,
        //other methods
    };
    code language-as3 
    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();
    };
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da