IBM BPM, V8.0.1, All platforms > Create processes in IBM Process Designer > Create user interfaces for business processes > Coach and Coach View examples

Example: creating a tabbed Coach

This example shows how to create a Coach that contains three tabbed pages.

In this example, you have a Customer business object that contains many properties. To capture or display all of these properties within a single Coach, the tab control is a good choice. Normally, you would relabel the text fields to something more appropriate for end users, but this example will retain the default labels to concentrate on laying out tabbed pages and mapping data to text fields.

The first tabbed page of the Coach contains three text fields that have some general information about a customer. In this example, you add the fields directly to the Coach using sections to set the page layout.

The second page contains a set of phone numbers. You use a Coach View to add the fields to the page.

The third page contains a table of addresses. In this case, the Coach View you add to the page is a list, which results in a table.

  1. Create the Customer business object. Customer has id(String), firstName(String), and lastName(String) parameters. It also has two complex parameters: phoneNumbers(PhoneNumber) and addresses(Address).

    • PhoneNumber is a business object that has home(String), work(String), and cell(String) parameters.

    • Address is a business object that has number(String), street(String), and city(String) parameters.

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

    For information about creating business objects, see Create business objects.

  2. Create the Coach View for the PhoneNumber business object:

    1. Create the PhoneNumberView Coach View.

    2. In its Variables page, add the PhoneNumber business object as the business data variable named phoneNumber.

    3. In the Layout page, drag the home, work, and cell 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.

  3. Create a human service named Customer Human Service.
  4. Open its diagram and drag a Coach onto the diagram. In the Step properties, rename the Coach to Customer Coach.

  5. In the Variables page, add the Customer business object as a private variable.

  6. In the Coaches page, drag a tabs stock control onto the Customer Coach layout. The tabs control is in the Section category of the palette.

  7. Create the General page:

    1. 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.
    2. Rename the section to General. The name that you see on the tab comes from the label of the section.

    3. Drag the id variable onto the vertical section.

    4. Drag a horizontal section onto the vertical section below the id text control.

    5. Drag the firstName and lastName variables onto the horizontal section.

      The id, firstName, and lastName variables are parameters of the Customer variable.

  8. Create the Phone Numbers page:

    1. Drag the PhoneNumberView 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 PhoneNumberView 1 tab in the tab control.
    2. Bind the PhoneNumberView Coach View to the customer.phoneNumber variable. This action means that any data users enter into the fields gets set in the variable for the human service.

    3. Select the tab.

    4. In the General properties, change the label of the PhoneNumberView instance to Phone Numbers.

  9. Create the Addresses page:

    1. Drag the addresses variable onto the tab control.

      You can see an addresses 1 tab in the tab control.

    2. Select the tab. You can now see a table with a column for each property defined in the Address business object.

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

    4. In the Configuration properties, 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.

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

  11. In the diagram, connect the start node to the Customer Coach and then connect the Customer Coach to the end node.

  12. Save your changes.
  13. Test the human service by clicking the button.

Coach and Coach View examples


Related reference:
Stock controls