Customizing the task details page

Follow Generic steps for AEM Forms workspace customization.

To show any additional information, add corresponding key-value pairs to the translation.json file at todoblock > detailsblock > appblock > [ requiredblock].

The [ requiredblock] refers to available blocks, such as the task block for task information, process block for process information, and currentpendingtask block for pending tasks information.

For example, to add information about Route Selection Required in the task details page, you can add the following key-value pair in the task block:

"todo" : {
    .
    .
    .
    "details" : {
        .
        .
        "task" : {
            .
            .
            "RouteSelectionRequired" : "Route Selection Required"
        }
    }
}

NOTE

Add corresponding key-value pairs for all the supported languages.

Copy /libs/ws/js/runtime/templates/taskdetails.html to /apps/ws/js/runtime/templates/taskdetails.html.

Add the new information to /apps/ws/js/runtime/templates/taskdetails.html. For example:

<div class="detailsContainer">
    .
    .
    <ul>
        .
        .
        <li>
            <label for="routeSelectionRequired" title="<%= $.t('todo.details.task.RouteSelectionRequired')%>"><%= $.t('todo.details.task.RouteSelectionRequired')%></label>
            <div>
                <span id="routeSelectionRequired"><%= isRouteSelectionRequired != null ? isRouteSelectionRequired : ''%></span>
            </div>
        </li>
        .
        .
    </ul>
</div>

Open /apps/ws/js/registry.js for editing.

Search and replace text!/lc/libs/ws/js/runtime/templates/taskdetails.html with text!/lc/apps/ws/js/runtime/templates/taskdetails.html.