Dynamic configuration of coach view properties

Typically, you would use data binding and variables to configure data in a coach. To configure a BPM UI coach view, you can use references to the coach view instance data and public methods to dynamically change the coach view configuration.

References to coach view instance data

When you create coach views, it is a good practice to update the default Control Id to reflect the purpose of the coach view. In the following example, the default value for Control Id is updated from Text1 to UserName.

This image shows the Control ID field for a Text coach view labeled User Name. The default value for Control ID, Text1, has been replaced with UserName.

To refer to the coach view with the Control ID property, you can use one of the following methods:
  • Option 1: ${Your Control Id}.method()
  • Option 2: page.ui.get("Your Control Id").method();
For example:
  • ${UserName}.method(), or
  • page.ui.get("UserName").method();

Based on the coach view type, you can use different methods to retrieve different types of data, from the bound data to the values of different configuration options. For more information about the methods that are available for each coach view, see the corresponding JavaScript documentation.

Dynamic text changes using ${ControlId}.method();

The following example, which uses the syntax described earlier, shows you how to set the UserName value of the Control ID to a string by clicking a button. The example uses the setText() method, which is one of the methods that are specific to text-based coach views.
Tip: Because you want the text to change when you click the button, place the method in the On click event of the button: ${UserName}.setText("JSmith");. For more information, see User-defined events.

In the event properties of the Change User Name button, place the following logic in the On click event: ${UserName}.setText("JSmith");. When the coach runs and the button is clicked, the default text for UserName is changed to JSmith.

When you run the coach, click Change User Name to obtain the following result:

When you run the coach and click Change User Name, the text in the User Name field changes to JSmith.

Dynamic text changes using page.ui.get("ControlId").method();

For debugging purposes, you can use this option if you need to change data in the JavaScript logic in the console. The following example uses JavaScript logic to change the text when the page loads.

To retrieve information from the Text coach view by using page.ui.get("UserName"), you can set the expression to a changeUserName variable.

This image shows the JavaScript logic to can be used to retrieve the UserName value for the Control ID of a Text coach view by using page.ui.get("UserName"). The expression is set to a changeUserName variable, which changes the value to JSmith.

To call the function described earlier whenever the page loads, place the text-changing logic in the On load event, as follows:

The logic to change the user name, @changeText();, is placed in the On load event of the User Name field.

Self references

When a coach view must refer to itself, use the me syntax. For example, me.setText("Hello World");${ControlId}.method() is primarily used for communication between coach views. Use the me syntax when you make self-contained changes within one coach view.

The self-referring logic is placed in the On load event of the User Name field.

This is the result when the coach runs:

At run time, the text in the User Name field is I am referring to myself, triggered by the self-referring logic in the On load event.

Parent topic: Coach views