Creating user interfaces for processes

Create user interfaces that a user sees for the process instance in Process Portal.

To create a process instance user interface, first create a client-side human service, which includes a generated coach. You can then create your customized interface by modifying the generated service and coach.

1. Open the process for which you want to create the user interface.
2. Switch to the Views page.
3. Select the interface that you want to create, for example Default under Details UI or Launch UI.
4. Click New beside Client-side human service and enter a name for your user interface.
5. Click Next. In the New Client-side Human Service page, you see a list of properties and variables that you can pass to and return from the client-side human service.

   You do not need to map the variables between the process and the human service. The process variables are already mapped to the human service variables with the same name.

6. Click Finish.
7. The client-side human services editor opens. Switch to the Variables page. Notice that the input and output variables that are mapped from the process are locked. You can edit these variables only in the process editor. You can, however, add private variables that are available only to the human service.

   If you are creating a launch UI, Process Designer generates a cancelLaunch variable of type Boolean. The default value is false. You can only view this variable, you cannot change or delete it. The value of the variable is set by the launch UI human service. If the value of cancelLaunch is true when a user completes the human service during the launch, the launch is canceled. If the value is false, the process is started.

8. Switch to the Diagram page. A basic diagram is generated for you. If you are creating a details UI, the diagram includes a data change event handler for managing data changes in the UI at run time. The event handler is ready to use. You can, however, customize the implementation by double-clicking the Data Change node. For more information, see Handling data changes.
9. Complete the human service diagram and customize the coaches.
   • For a Details UI, the generated human service has two coaches:
     • View Instance Details coach, which contains the following coach controls:

       Default Instance Details Template

       Displays the instance details in IBM Process Portal.

       Data section

       Displays the values of the variables that are passed into the human service.

     • Show error, which returns an error if the instance is not found.
     The human service is generated from a template in the Dashboards toolkit, called Instance Details UI Services Template. For more information, see Instance Details UI Service template.
   • For a Launch UI, the generated human service has an Enter Data coach, with a control for each mapped process variable and property. When you specify a launch process UI, Process Designer generates a cancelLaunch variable of type Boolean. The value of the variable is set by the launch UI human service. If the value of cancelLaunch is true when a user completes the launch human service, the launch is canceled. If the value of cancelLaunch value is false, the process is started. The default value is false. The generated Launch UI has one coach with two buttons; OK and Cancel. If a user clicks Cancel, the cancelLaunch variable is set to true.
     You can modify your Launch UI so that a user can view or add documents in the process folder that you specified in the Folders page. To do so, use coach controls that are provided in the Content Management toolkit for viewing and retrieving documents in the content store. For example, the Document Explorer control. These controls are available in the Content Management toolkit. For more information, see:

     • How to use coach views to store or view documents
     • Document Explorer control

     Note: If the process launch is canceled, the documents and folders located in an external Enterprise Content Management system that are referenced from the process folder are not deleted.
10. Click Save or Finish Editing.
11. Test the client-side human service.
    • For Launch UI, click Run to test the client-side human service and the coach.
    • For Details UI, do one of the following:
      • If the human service flow is not customized, run the instance UI in Process Portal.
      • If you want to incrementally test and build your custom UI:
        1. Run an instance of the process that is associated with the custom UI and make a note of the instance ID.
        2. The human service has logic that shows an error if the process instance ID is null. Remove this logic by wiring the Start node directly to the Client Side Init Data node.
        3. In the Client Side Init Data script, modify the first line as follows:

           tw.local.selectedInstanceId ='6'; 

           where 6 is the instance ID that you noted in step a.
        4. Run the human service.
        5. After you are satisfied that the service works as expected, revert the changes that you made in steps b and c. Test again by running the instance UI in Process Portal.