When a business process has a user interface, it is possible for the process to accept end-user input to enable human-machine interaction. Using IBM Business Process Manager, the interface is implemented as a process application that contains one or more human services. In turn, each human service contains Coaches, which are the implemented interfaces. With Version 8.0, Coaches can be implemented as either Heritage Coaches or Next Generation Coaches, which are referred as Coaches hereafter. The benefits of a Coach versus a Heritage Coach include, introducing concept of Coach View to facilitate view component reuse, Web 2.0 appearance, and behavior enablement with client-side model. This article focuses on using Coach Views.
Note: Visual representations are available within this document when you see text within [ ].
We start with analyzing a common use case scenario, ask user for personal information, and confirm input. We have chosen this specific scenario due to its popular usage within applications, such as user registration, online shopping, request submission, and so on. As shown in the following figure, two interfaces, user input interface and confirmation interface, are to be implemented with two Coaches within a Human Service, which is, in turn, contained in a simple Business Process.
Between the two interfaces, personal information is a common element that is shared. Therefore, we can develop a Coach View, [Person-CV], and use it as a component for both user input interface and confirmation interface.
Developing User Input Confirmation Process
Our first step is to create a new process application, User Input Confirmation, which is a container for all our development artifacts. We launch IBM Process Designer and we see the initial screen, Process Center. On its right hand side, we select Create New Process App
to create the application, User Input Confirmation with Acronym UIC as shown in the following image: [Create-User-Input-Confirmation-App
Once created, we highlight the application and click Open in Designer as shown in this image: [Open-in-Designer].
After the application is opened in Process Designer, we need to create a new Business Process Definition (BPD), User Input Confirmation BPD, to model our business process. We hover our mouse over Processes so that a + sign is displayed next to it. We click + and select Business Process Definition from the
pop-up menu to bring up the BPD creation wizard. See this image to view the selection. [Create-Business-Process-Definition]. The following image shows the creation wizard: [Open-BPD-Creation-Wizard]
We type in the name of the BPD and click Finish. The BPD is created with default Start and End activities and opened in Designer. See this image to see the new BPD: [Open-Created-BPD]
The next step is to add a Human Service, User Input Confirmation HS to User Input Confirmation BPD and wire the User Input Confirmation HS with Start and End activities.
We have two ways to implement the task.
The second approach is to drag and drop an activity from toolkit palette, rename it as User Input
Confirmation HS and connect the activities, Start, User Input Confirmation HS, and End. See the following image: [Drag-Drop-Activity]
- Highlight User Interface click + next to it, and select Human Service from the pop-up menu. See the following image to see the selection: [Create-Human-Service]
- Type in User Input Confirmation HS in the Human Service creation wizard as shown in the following image: [Create-User-Input-Confirmation-HS]
- Click Finish. The User Input Confirmation HS is created and opened in Designer.
- Toggle on drop-down menu, as shown in the following image, to display User Input Confirmation BPD in the Designer: [Toggle-on-Drop-Down]
- Click User Interface and select User Input Confirmation HS from the pop-up menu. See the following image: [Drag-Drop-User-Input-Confirmation-HS]
- Hold down the mouse button to drag and drop it into User Input Confirmation BPD canvas.See the following image: [Add-User-Input-Confirmation-HS-to-BPD]
- Click the [Sequence Flow] from the toolkit palette, mouse hover over Start, and it turns to [Hover-over-Start].
- Hold down mouse button and drag the mouse toward User Input Confirmation HS to create a link from Start to User Input Confirmation HS. See the following image: [Connect-Start-to-User-Input-Confirmation-HS]
- Follow the same steps to link the User Input Confirmation HS and End. Click [Selection-Tool] to change the mouse mode to tool kit selection.
- Save changes with Ctrl+S.
So far, the process application User Input Confirmation is created and opened in Process Designer. The Use Input Confirmation BPD, which contains User Input Confirmation HS, is the only process developed with this application. The process diagram is shown as below.
In this section, we focus on Coach development. As previously discussed, we need to develop a shared Coach View, Person CV. We notice that the Coach View represents an underline data structure, a Business Object (BO) that we named Person. Therefore, we start off with creating the Business Object, Person. To create the Person Business Object, complete the following steps:
- Hover on Data to bring up the + sign, click +, and choose Business Object from the pop-up menu. See the following image: [Create-Business-Object]
- Type in the name Person. See the following image: [Create-Person]
- Click Finish.
Person is created and
opened for editing as shown in the following image: [Created-Person
We need to add the following parameters to Person.
To add the parameters to Person, complete the following steps:
- Click [Add] in the Parameters section. A new parameter named Untitled1 with a String type is
- In the Parameter Properties section, change Untitled1 to firstName as shown in the following image: [Change-Untitled1-to-firstName]
- Follow the same steps to add lastName and email. See the following image: [Person-Business-Object]
After Person is created, we add a private variable, person, to the User Input Confirmation HS. This variable, person, is used to transfer data within the Human Services, that is, between the Coaches.Complete the following steps:
- Toggle on the downward to switch to User Input Confirmation HS.
- Click the Variables tab.
- Click Add Private and a Untitled1 private variable is created as shown in the following image: [Select-Variables-Tab]
- Change the Name to person and change the Variable Type by clicking [Select] and select Person as the data type for person variable. See the following image: [Choose-Person-Data-Type]
- Save the changes.
Here are the results:
Then, we need to create Coach View, Person CV. We know that Person CV presents the person data in a HTML form. Therefore, the input fields of Person CV are bound to Person parameters accordingly. Complete the following steps:
- Hover on User Interface to display the + sign.
- Click + to choose the Coach view from the pop-up menu.
See the following image: [Choose-Coach-View]
- Name the new Coach View as Person CV as shown in the following image: [Create-Coach-View-Person-CV]
- Click Finish.
Person CV is created and opened in Layout view. See the following image:
Next, we need to add a Business Data variable, person of BO type Person, to the Coach View, so that we can bind Person parameters to the Coach View fields.Complete the following steps:
- Click Variables to switch to Variables view.
- Click + next to Business Data. A new Business Data variable is created. See the following image: [Add-Business-Data-Variable]
- On the [Variables] tab, change the Name to person. See the following image: [Business-Data-Variable-Person]
- Click Select and choose Person from the pop-up list.
The Variable Type is changed into Person [Business-Data-Variable-Person-with-Data-Type-Person]
- Save the changes.
Switch back to Layout view by clicking on Layout. We need to add three Input Text fields into Person CV, firstName, lastName, and email. Complete the following steps:
- Select the [Vertical Section] while holding
down the mouse button and drag it to the canvas as shown in the following image: [Add-Vertical-Section-to-Person-CV]
- Change the Label to Person Section as shown in the following image:
- Drag the [Text] field to the Person Section as shown in the following image:
- Change the Label to First Name as shown in the following image:
- Click [Change] next to Control ID and change the text to firstName.
Note: The Control ID is an unique identifier that is used to identify the component and firstName within the current Coach View. Its uniqueness is enforced by the development environment. See the following image:
- Click [Select] next to Binding and choose firstName from the pop-up list. See the following image:
- Save the changes. See the following image:
- Follow the same steps to add another two Text fields under Text field, First Name.
- Save changes.
Now, we need to add two Coaches, User input form NG, and Input confirmation form NG to the User Input Confirmation HS. Complete the following steps:
- Open User Input Confirmation HS in Process Designer by selecting it from the User Interface pop-up list.
- In Diagram view, click Coach, hold down mouse button, and drag it to the canvas. See the following image: [Drag-Drop-Coach]
- Change the Name to User input form NG and save the changes. See the following image:
- Follow the same steps to add another Coach and Input confirmation form NG. See the following image:
- Click the Coaches tab to implement these two Coaches.
- While User input form NG highlighted and selected, drag a Vertical Section into the Canvas and change its label as User Input Form. See the following image: [Drag-Drop-User-Input-Form]
- Add a Coach View and Person CV, and bind it to private variable, person, as shown in the following image:
- Drag a Button to the canvas and change the Label to Submit. As shown in the following image: [Drag-Drop-Button]
- Click and highlight the Input confirmation form NG and follow the same steps to add a vertical section labeled Input Confirmation Form, a Person CV bound to person, and a button labeled Confirm.
See the following image: [Input-Confirmation-Form-NG-(Person-CV)]
Here is a view of the Confirmation button: [Input-Confirmation-Form-NG-(Confirm-Button)]
- Click the Diagram tab to switch to the Diagram view.
- Using Sequence Flow, link the Start towards User input form NG, then towards Input confirmation form NG, and at last End as shown in the following image: [Complete-User-Input-Confirmation-HS]
- Save the changes.
Testing the Application
Now that our application is fully developed, we are ready to execute it. Complete the following steps:
- Open the process from the Processes pop-up menu.
- Click the run button at the right-hand corner. This action brings up the Process Inspector. See the following image: [Switch-to-Process-Inspector]
The process stops at the User Input Confirmation HS.
- Open up Process Portal by clicking the [Refresh] button on the Process Inspector. See the following image:
- Log in with your user ID as admin and Password as admin.
Note: Depending on your configuration, your portal URL, login ID, and password might be different from shown here.
See the following image: [Login-Process-Portal]
The default screen shows My Tasks.
See the following image: [Display-My-Tasks]
- Click Step: User Input Confirmation HS to claim the task.
See the following image: [Claim-Task-User-Input-Confirmation-HS]
- If you are prompted, click Claim Task. The User input form NG is executed and User Input Form is displayed. See the following image: [Display-User-Input-Form]
We can key in personal information as shown in the following image:
- Click the Submit button. The
application continues with executing the Input confirmation form NG. We see that the personal data input fields are pre-populated with previous user input as shown in the following image: [User-Input-in-Input-Confirmation-Form]
- Click the Confirm button and the task is completed. See the following image:
If we switch back to Process Inspector and click Refresh
, we see that the process status is changed to Completed.
See the following image:
In this article, we discussed how to implement a Human Service activity containing Next Generation Coaches. We developed two Coaches, User input form NG and Input confirmation form NG, which share reusable view component, Coach View and Person CV. We demonstrated that by using the Coach View, the development of a process with user interface is simplified.
If you have any feedback on this article, leave a comment below and we will respond. We welcome your feedback!