Building Tabbed Coaches using IBM Process Designer V8.0

Introduction:

You can build a Coach as the user interface that process participants use to interact with a service. In the first stage of designing a Coach, your goal might be to build a mock-up. The mock-up contains static elements to visualize what data the Coach needs at run time and where the Coach displays the data in its layout. After you complete the first stage to design the look of the Coach, you need to feed real business data to the Coach controls. This step requires creating bindings between the Coach controls and the data structures (variables) that represent the business data within your IBM® Business Process Manager processes. Your process participants can then interact with the business data, which helps them make the appropriate decisions.

Overview:

This article describes the how to build a simple Coach view and build a tabbed coach. To capture or display all of the properties within a single Coach, the tab control is a good choice. Normally, you would reliable the text fields to something more appropriate for end users, but this article will retain the default labels to concentrate on laying out tabbed pages and mapping data to text fields.

In this example, we have an Employee business object that contains many properties. The first tabbed page of the Coach contains text fields that have some general information about an Employee. In this example, you add the fields directly to the Coach using sections to set the page layout.

Drag Coach Views or variables onto the layout of the Coach. These Coach Views can be the Coach Views you created earlier or the stock controls. The variables are business objects and their parameters that have been defined for the human service. For the variables, the Designer puts the Coach View that is associated with the business object or parameter type onto the layout. For example, if you drop variable of String type, the Designer puts a text stock control that is bound to the variable. If variable type does not have an associated Coach View, the Designer puts a placeholder message on the layout instead. You can then use the placeholder to manually set the binding between the variable and a Coach View.

Implementation:

We will complete the following steps to build a simple Tabbed Coach using IBM Process Designer v8.0.

Ø  Create Business Objects.

Ø  Create Coach View.

Ø  Create Human Service.

Ø  Test the application.

Create Business Objects:

Create the Employee business object. Customer EmployeeID (String), FirstName (String), and LastName (String), MiddleName (String), DateOfBirth (Date), Sex (String) parameters. It also has two complex parameters: PhoneNumbers (PhoneNumber) and Address (Address).

• PhoneNumber is a business object that has HomePhone (String), WorkPhone (String), and Mobile (String) parameters.
• Address is a business object that has HouseNO (String), Street (String), City (String), Country (String), and ZIP (String) parameters.

With the Employee business object, Addresses is an array of the Address type, so ensure that you select Is List for it.

Before create Business Object, we should have create Process App in IBM Process Designer. Log in to IBM Process Designer. Create a Process App called as ‘Tabbed Coach Sample’ and open with Process Designer.

Click on + symbol near Data at left side and select Business Object.

Give the business Object name as Address and add the fields as shown below.

Create another business Object name as PhoneNumber and add the fields as shown below.

Create business Object called as Employee and add the fields as shown below.

Create Coach View:

Now we will create the Coach View for the PhoneNumber business object. Click on + symbol near User Interface and select Coach View.

Give name for the coach view as ‘PhoneNumber’ and click on Ok.

Select Variables page, add the PhoneNumber business object as the business data variable named PhoneNumber.

In the Layout page, drag a vertical Section and rename as Phone Number. Drag the HomePhone, WorkPhone, and Mobile parameter variables onto the layout. A text control is added to the layout for each variable because it is the Coach View associated with the String type.

Save the changes.

Create Human Service:

Now we will create a Human Service to implement Tabbed Coach.

Click on + symbol near User Interface and select Human Service. Give the name as EmployeeHS.

Select EmployeeHS diagram view and drag a Coach onto the diagram and rename as Employee Coach. In the Step properties, we can rename the Coach to Employee Coach.

Select the Variables page in EmployeeHS; Click on add Private to add the Employee business object as a private variable.

Create the General page:

Select the Coaches page in EmployeeHS; drag a vertical Section and rename as Employee Details. Drag a tabs stock control onto the Employee Coach. The tabs control is in the Section category of the palette. Drag a Vertical Section inside Tabs control and Rename as General.

Drag a vertical section onto the tab control. A tabbed page can contain only one element directly. By adding the section, you can then add as many elements as you want into that section.

Rename the section to General. The name that you see on the tab comes from the label of the section.

Drag the EmployeeID variable onto the vertical section. Drag a horizontal section onto the vertical section below the EmployeeID text control.

Drag the FirstName, LastName and MiddleName variables onto the horizontal section. Drag DateOfBirth and Sex variables below the horizontal section. The General Page will look like below.

Create the Phone Numbers page:

Drag the PhoneNumber Coach View onto the tab control. If you did not add a tag to the Coach View, you can find it in the NoTags category on the palette. You can see a PhoneNumber tab in the tab control.

Select the PhoneNumber tab à Properties à General; Select the Binding as Employee.PhoneNumber variable. This action means that any data users enter into the fields gets set in the variable for the human service.

Create the Addresses page:

Drag the addresses variable onto the tab control. You can see an addresses 1 tab in the tab control. Select the tab. You can now see a table with a column for each property defined in the Address business object.

Select the table and in the General properties, change the label of the table to Address.

Select Properties àConfiguration properties and select Show Add Button and Show Delete Button. By doing this step, you can add and subtract address rows when you run the human service later in this example.

Drag a button control below the tab section and rename it to OK, The button broadcasts a boundary event and you can use it to wire the Coach in the human service flow

Select the diagram, connect the start node to the Employee Coach and then connect the Employee Coach to the end node.

Save your changes.

Test the application:

Now we have built the application which has tabbed coaches. We need to test the application to see, how the tabbed coaches are shown on the screen.

Open the EmployeeHS, click on Run Service at right corner.

The new web page will be opened in default web browser. The initial page will be look like below. After open the page, enter the employee details like below.

Click on Phone Numbers Tab and enter the details. The page will look like below.

Select the Address tab and enter the details. This tab has possibility of adding rows and deletion of rows as shown below.

Downloads

File Name	Description	Size	Download
Tabbed_Coach_Sample_V1.0.twx	Tabbed Coach Sample	785KB	Download
Tabbed Coaches in IBM BPM V8.0.pdf	Tabbed Coaches Document	687KB	Download