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:
- Information available in the JSON object of a task (Task section in HTML Workspace JSON Object Description)
- Information available in the JSON object of a process instance (Process instance section in HTML Workspace JSON Object Description)
-
-
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" } } }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.
To customize the task details page with tasks created in the Start Process tab of HTML 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.
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