Accessing a child view

Edit online
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.

About this task

At design time, each view 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 view. You can use the control ID to access an instance of the child view at run time by identifying the <div></div> that contains the instance.
Important: View-based coaches 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 page that you want to work with.
    2. In the design area, select the view 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 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.
  3. Click Save or Finish Editing.

Example

The following example has a 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;
}