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.

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.

Page 1

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

Page 2

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.

Page 3

Note:

To perform this task, you must be in the IBM® Process Designer desktop editor.

  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 List for it.

    Customer business object
    For information about creating business objects, see Creating business objects in Process Designer.

  2. Create the coach view for the PhoneNumber business object:
    1. Create the PhoneNumberView coach view.
    2. In its Variables page, add a variable named phoneNumber and set its type to the PhoneNumber business object.
    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.
      The coach view containing Home, Work, and Cell text fields
  3. Create a client-side human service named Customer Human Service.
  4. In the human service diagram, rename the coach to Customer Coach.
  5. In the Variables page, add the Customer business object as a private variable.
    Client-side human service with the Customer business object as a private variable
  6. Go to the Coaches page and start with a default coach.
  7. In the Coaches page, delete the default OK button and drag a tabs stock control onto the Customer Coach layout.
    Customer Coach with a tab stock control
  8. Create the General page:
    1. Drag a section onto the tabs 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 section. The id variable is a parameter of the Customer business object.
    4. Drag another section into the first section below the id text control. In the configuration options of the second section, change its layout to Horizontal.
    5. Drag the firstName and lastName variables onto the horizontal section.
      The general page containing three text fields named Id, First Name, and Last Name

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

  9. Create the Phone Numbers page:
    1. Drag the PhoneNumberView coach view onto the + part of 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 tab in the tab control.
    2. Bind the PhoneNumberView coach view to the customer.phoneNumbers variable. This action means that any data users enter into the fields gets set in the variable for the heritage human service.
    3. Select the tab.
    4. In the General properties, change the label of the PhoneNumberView instance to Phone Numbers.
      The Phone Numbers page containing three text fields named Home, Work, and Cell
  10. Create the Addresses page:
    1. Drag the addresses variable onto the tab control. You can see an Addresses tab in the tab control. If you select the tab, can now see a table with a column for each property defined in the Address business object.
    2. 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 heritage human service later in this example.
  11. 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 heritage human service flow.
  12. In the diagram, connect the start node to Customer Coach and then connect Customer Coach to the end node.
    Start node connected to Customer Coach connected to the end node
  13. Click Save or IBM BPM version 8570 cumulative fix 2017.03Finish Editing.
  14. Test the client-side human service by clicking the Run Service button.
Parent topic: Coach and coach view examples
Related information:
Controls in the Responsive Coaches toolkit