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 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.
Important: 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:
- Determine the control ID:
- Open the service that contains the coach that you want
to work with, and then click the Coaches tab.
- In the design area, select the control that you want
to access at run time.
- In the properties area, select General. The control ID field contains the unique ID for the control.
- In the Behavior page of the coach view editor, add JavaScript code:
- 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.
- 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;
}