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 task details page contains information about a task and its processes. However, you can customize the task details page to add or delete information.
You can add the following information to the task details page:
To customize the task details page:
To show any additional information, add corresponding key-value pairs to the translation.json
file at todo
block > details
block > app
block > [ required
block].
The [ required
block] 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"
}
}
}
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
.
To customize the task details page with tasks created in the **Start Process **tab of AEM Forms workspace, add the new information to /apps/ws/js/runtime/templates/startprocess.html
.
To add new styles for the information added in the details page, modify the CSS file by using the User interface changes section in Workspace Customization.