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 Select control using custom HTML

This example shows how you can use scripts to bind selected values in a Custom HTML control to the business data of a Coach View.

Overview of tasks in this example:

As a result, you will create an Account Type selection list that can be reused or extended and then used across multiple Coaches.

Before you begin, you must be familiar with the Coach View application programming interface (API) and you must have already created your Business Data business objects (see Table 2).

  1. Add custom HTML code to a Coach View:

    1. In a toolkit or process application, create a new Coach View named getAccountTypes.

    2. On the Layout tab, from the palette under Advanced, drag the Custom HTML item onto the canvas.

    3. In the properties under HTML, select the Text option and then provide the custom HTML code. For this example, you can use the following code to define a "Select" control: 
      <select name="AccountType" size="1">
  <option value="Savings">Savings Account</option>
  <option value="Current">Current Account</option>
</select>

    4. On the Overview tab, select Can Fire a Boundary Event.

  2. Add business objects to the Coach View.

    1. In the Variables tab, click the plus sign next to Business Data

    2. For the Variable Type, select the TSAPP_ValidateDocumentCaseProperties business object.

    3. In the Name field, type caseProperties (see Table 2).

  3. Configure the load event handler with a custom script for mapping the custom HTML selected value to the business data attribute.
    1. Register the Dojo button module and alias that the Coach View will load dynamically.

      1. In the Behavior tab, select AMD dependencies.

      2. Click Add and then specify the following information:

        • In the Module ID column, type dojo/_base/connect. This declares a dependency on the module that provides event handling for DOM nodes and related functionality.

        • In the Alias column, type connect. This is the alias used in the code to refer to the connect module.

        Tip: This example uses an AMD module that is included in the infrastructure. If the AMD modules are not already included, see Adding custom AMD modules for information about how add and then access these modules.

    2. In the Behavior tab under Event Handlers, select load and then provide a custom script. For this example, you can use the following script: 
      var selectElement = this.context.element.getElementsByTagName("select")[0];

if(this.context.binding){
tempBinding.set("TSAPP_AccountType", newValue.target.value);} });

      If s about the script
      Item Description
      ( this == the view object) The load event has the context of payload data as well as that of the business data object associated with it (added in step 2).
      connect.connect(selectElement, "onchange" The onChangeHandle variable in the script has the new value selected in the Select control. The onChange event of the custom HTML control is called using connect.connect.

      Tip: connect.connect(selectElement, "onchange" is derived from the alias of the dojo/_base/connect entry in the AMD dependencies. Therefore, the script should be modified accordingly based on the alias name.

      For example, if myConnect is the alias name, the script would look like myConnect.connect(selectElement, "onchange".

      this.context.binding.get("value").set("TSAPP_AccountType", newValue.target.value); The new value selected in the Select control is bound to the business data specific attribute (TSAPP_AccountType).

  4. To test your work using a human service, create a human service and then do the following:

    1. On the Diagrams tab, add a Coach.

    2. On the Variables tab, add TSAPP_ValidateDocumentCaseProperties as input, output, and private variable types.

    3. On the Coaches tab, select the Coach, drag the getAccountTypes Coach View onto the canvas, and then select the TSAPP_ValidateDocumentCaseProperties private variable as the binding.

    4. On the Diagrams tab, complete the wiring of the Coach.

    5. Click Run Service. A browser opens and displays the selection list.


Reference

Example business objects
Library item Example name
Business Objects TSAPP_ValidateDocumentCaseProperties

Parameters:

TSAPP_Zipcode (String)
TSAPP_Age (String)
TSAPP_AccountStatus (String)
TSAPP_CustomerType (String)
TSAPP_Name (String)
TSAPP_City (String)
TSAPP_AccountType (String) In the Coach View, TSAPP_ValidateDocumentCaseProperties variable type is bound to caseProperites.

Coach and Coach View examples


Related concepts:
Advanced items for Coach Views


Related information:
Coach and Coach View reference information