Dynamic configuration of view properties

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

References to view instance data

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

Note: References are identified and refactored only within the same layout. References in other artifacts are not updated.
This image shows the Control ID field for a Text view labeled User Name. The default value for Control ID, Text1, has been replaced with UserName.
To refer to the 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 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 view, see the corresponding JavaScript documentation.

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

The following example, which uses the syntax that 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 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");. See User-defined events.
Note: You can select the view to reference using a popup during event script configuration.
In the event properties of the Change User Name button, place the following logic in the On click event: ${UserName}.setText("JSmith");. When the page runs and the button is clicked, the default text for UserName is changed to JSmith.
When you run the page, click Change User Name to obtain the following result:
When you run the page 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 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 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 view must refer to itself, use the me syntax. For example, me.setText("Hello World");${ControlId}.method() is primarily used for communication between views. Use the me syntax when you make self-contained changes within one view.

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

This is the result when the page 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.