IBM BPM, V8.0.1, All platforms > Create processes in IBM Process Designer > Create user interfaces for business processes > Developing reusable Coach Views

Access a child Coach View

The control ID is the unique ID of the control within the parent view. You can use the control ID to access a subview instance at run time.

At design time, each control in a Coach is given a default control ID, which you can change. This control ID is unique within the parent view. At run time, the parent view is rendered as a <div></div> tag, which contains a nested <div></div> tag for each child Coach View. You can use the control ID to access an instance of the child Coach View at run time by identifying the <div></div> that contains the instance.

The control ID of a view-based Coach is different from the control ID of a Heritage Coach. The control ID of a Heritage Coach is the div node ID. This is not the case in view-based Coaches because Coach Views are reusable and you can have multiple views in a Coach. In view-based Coaches, the control ID is the value for the data-viewid attribute of a <div></<div> tag. By using the data-viewid attribute, View developers can locate the nested View because data-viewid is unique within its parent or enclosing view.

Procedure

To use a control ID in your code:

1. Determine the control ID:
   1. Open the service that contains the Coach that you want to work with, and then click the Coaches tab.

   2. In the design area, select the control that you want to access at run time.

   3. In the properties area, select General. The control ID field contains the unique ID for the control.

2. In the Behavior page of the Coach View editor, add JavaScript code:
   1. Get the control ID by using the this.context.getSubview(subViewId, requiredOrder) method. The method returns an array of nested View instance objects. If the result does not contain a set of repeatable objects, specify the first index of the returned array list, for example this.context.getSubview("myCheckbox")[0].

      If you need the array in the same order as your document order, set the second optional parameter to true. By default, it is set to false.

      subViewID

      The id parameter of the <div></div> tag of the nested view instance object

      requiredOrder

      A Boolean value. If set to true, the method returns the array of view instance objects in the same order as the document tree. The default is false.

   2. Enter your code to interact with the nested View instance as appropriate. See the following example for details.

Example

The following example has a Coach View that uses a check box stock control. The check box is a subview of a parent content box view. At run time, the html rendered is shown in the following code snippet:

<div id="div_2_1" class="ContentBox" data-view-managed=false>
 <div id="div_2_1_1" class="Checkbox CoachView" data-type="com.ibm.bpm.coach.Snapshot_fc633c7d_3b4f_44db_82c1_cfc7ac8b5647.Checkbox" data-binding="" data-config="config2" data-viewid="myCheckbox" data-eventId="" >

The following code checks to ensure that the check box is selected (set to true). If not, the user is prompted to check the check box before proceeding.

if (this.context.getSubview("myCheckbox")[0].context.binding.get("value") == true) {
			 return true;}else{
  			alert( "Check the checkbox");
  			return false;}

Developing reusable Coach Views

Related reference:
The context object