Customize tracking tables

Last update: May 24, 2024

CREATED FOR:

  • User
  • Developer

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:

actionInstanceIdisOpenFullScreenreminderCount
classOfTaskisOwnerrouteList
consultGroupIdisRouteSelectionRequiredsavedFormCount
contentTypeisShowAttachmentsserializedImageTicket
createTimeisStartTaskserviceName
creationIdisVisibleserviceTitle
currentAssignmentnextRemindershowACLActions
deadlinenumFormsshowDirectActions
descriptionnumFormsToBeSavedstatus
displayNameoutOfOfficeUserIdsummaryUrl
forwardGroupIdoutOfOfficeUserNamesupportsSave
isApprovalUIprioritytaskACL
isCustomUIprocessInstanceIdtaskFormType
isDefaultImageprocessInstanceStatustaskUserInfo
isLockedprocessVariables
isMustOpenToCompletereaderSubmitOptions

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

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

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

    <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

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.

    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);
}

  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.

        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();
    };

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now