Instance Details UI Service template
Use this service to customize the default Details UI for processes and BPDs. The Details UI displays instance details in Process Portal.
When you create a new Details UI for a process, the generated
client-side human service uses this template to provide basic function.
To create a Details UI for a BPD, you must copy and modify this template.
For both processes and BPDs, you can then further customize the human
service.
Important: If you created
a process application in IBM® Business Process Manager V8.5.6
that contains one or more custom Instance Details UI and you have
subsequently upgraded the Dashboards toolkit to V8.5.7, you
must add a dependency in the process application to the Responsive
Coaches toolkit V8.5.7.
Service elements
The service contains the following elements.| Service element | Description |
|---|---|
| Client Side Init Data | This node uses the client-side human service JS APIs to initialize local variables that are used by the View Instance Details coach to display, for example, breadcrumbs in the instance details UI. For more information about the JS APIs, see JavaScript API for client-side human service development. |
| Data Change | The Data Change node manages data changes in the details UI at run time. It is bound to the manual refresh boundary event that is triggered by the Service Controller control when the Refresh button is clicked. The data change event handler contains only a Collect Change Information node. This node handles data
change events from the server in the following way:
|
| Get Process Variables | This script node refreshes the input variables
to the client-side human service with the latest data from the server.
For more information about calling services from a client-side human
service, see Tools available from the client-side human services palette. Attention: This script overwrites all local changes.
|
| Init Data Change Support | This script node initializes the variables that are required to track and merge data changes on the server into the client data. Because this node is part of the refresh path, the script can run several times. However, the variables are initialized only the first time the script is run. |
| Merge Changes | This script node invokes the function that merges the updates to the client data with the server changes. If there is a merge conflict, the script uses the boundary event type that is set by the Data Section coach view to determine whether the client or the server changes are kept. |
| Reset Pending Data | This script node is called after updates to the client data are saved or when local updates are discarded. Because saving or discarding updates synchronizes the client and server data, the script calls a function to reset the variables that track pending changes. |
| Server Side Init Data | This node makes a service call to initialize the data that is required by the View Instance Details coach. |
| Show Error | Displays an error message if a human service is run without an associated process instance. |
| Update Process Variables | The service node saves the updated client data to the server. For more information about calling services from a client-side human service, see Tools available from the client-side human services palette. |
| Validation | This script node is provided as a placeholder for client-side validation of the data that is to be saved. For more information about implementing client-side validation, see Validating coach data without exiting a coach. |
| View Instance Details | The View Instance Details coach contains the following controls:
|
Refresh behavior provided by the template
The View Instance Details coach that is included in the service template is implemented by using the Default Instance Details Template. The template provides support for automatic and manual refresh of all the controls in the coach view except the Data Section control. This behavior applies only to non-federated environments.
The template contains two Service Controller controls:
- A Service Controller that is bound to the template's Manual refresh trigger configuration property. The boundary event from this control is bound to the data change event handler. The boundary event is triggered when a user clicks the Refresh button to check for updates from the server.
- A Service Controller that is bound to the template's Automatic refresh trigger configuration property. The boundary event from this control is wired to the Server Side Init Data step.
The Data Section control is refreshed by the Data Change node. It collects information about the data changes on the server and in the local coach control. This information is stored in local variables that are bound to the Data Section control. The control uses the information to present the merge choices to the user. The merge functionality is provided by functions that are contained in the instanceDetailsUIHelper.js file in the Dashboards toolkit.
Save data behavior
If the Edit mode configuration property in the Data Section control is set to true, users can update the variable values in the Data section of the Details UI and save their changes. You can update the Validation script node with validation code for the variables that are exposed in the Data Section control. The tw.system.coachValidation.addValidationError API can be used to report errors with the data. If validation is successful, the Update Process step refreshes the variables with the last saved variable values from the client-side human service.Tip: In the Implementation tab for the step, the Send variable updates to the instance setting is selected. The Map input data automatically check box is also selected so that the input variables are automatically
mapped. You can clear the check box and go to the Data
Mapping tab to enter the data mapping yourself.