Conventionally, IBM BPM developers have used data binding to store and manipulate data within a Coach.
For example, you might create a private variable in Process Designer, initialize data in a server side script, and bind the variable to a control or a configuration option. Now, in many cases to create a working coach you don't even need to bind a variable to a control or even create variables at all!
IBM BPM developers miss having easy access to the controls at client side when using Coach View Frameworks. SPARK puts the power back in the developer’s hands with a lot of ease.
Referencing Control Data
A good practice to follow when creating controls is to update the default Control Id to reflect the purpose of the control. For example, the control id below should be changed from 'Text1' to 'UserName.'
When you have a properly named control id, you can now use one of two methods to reference the control:
Option 1: ${Your Control Id}
Option 2: page.ui.get("Your Control Id")
Examples: ${UserName}.method() or page.ui.get("UserName");
You can use different methods to retrieve different types of data depending upon the type of control, ranging from bound data, to the values of its different configuration options (for more information on the different methods available for each control, please see the documentation).
Dynamically Change Text using ${ControlId}.method();
In this example, following the syntax stated above, when the user clicks the button, it sets UserName to the string SSMith. Note that we placed this in the On Click event of the button, since we want the text to change when the user clicks the button. See Event Handling for further details.
Note: setText() is one of the methods specific to text-based controls, such as the Text control.
This is what it looks like when you run the Coach and after the user has clicked the button.
Dynamically Change Text using page.ui.get("ControlId")
This option is available if you need to manipulate the data within JavaScript logic, and may come in handy for debugging purposes in the console (which employs JavaScript logic). The following example uses JavaScript logic to change the text when the page loads.
Retrieving the Text control information with page.ui.get("UserName"), we set the expression to a variable called changeUserName. Note that UserName is the Control Id of the Text control.
Here we invoke the function that was defined above (see the Creating Custom Functions article for more details). Here we are telling the Text control that whenever the page loads, we want it to call the specified function.
Accessing Data (Control that self-references)
When a control needs to reference itself, the me syntax should be used.
Example: me.setText("Hello World");
${ControlId}.method() is primarily used for communication between more than 1 control. me should be used when making self-contained changes within one control.
Example:
The result:
- Author: Lisa Leung
- Date Created: June 2, 2015
- Date Modified: June 29, 2015
Comments