Data

The Data control functions as a hidden input field on the page. It can be bound to data that has no presentation need, but is used in supporting code.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

This control is useful for when you need a temporary variable for client-side logic, such as storing a previous value from a field.

This control can also function as an interface between TeamWorks objects and SPARK controls, especially controls that may not otherwise have access to these objects. By binding a TeamWorks object to a Data control, you can then use the Data control and its methods as an interface for your other controls to both read and write to these (otherwise inaccessible) objects.

Example

The first example shows how to use methods to set and get data from the Data control.

The Data control is bound to a string variable...

When the user enters text in the Text control, and then clicks 'Click to Set Data', the Data control then contains that information since the On Click event for the button is using the setData method.

Since the Data control is bound to a string variable, and contains the information that was entered in the Text box after clicking 'Click to Set Data', when you navigate to the next Coach, the Output text displays that same information, since it too is bound to the same string variable.

at runtime...

first Coach

second Coach

The second example shows how the Data control can be used to hold a TeamWorks variable, which then can be saved and altered through a different Coach.

First we pre-initialize a TW variable with a server script...

Just like the first example, the Data control is bound to a string variable, as well as the Output text on the second Coach.

The Text control uses the setText and getValue methods to pull the information from the Data control, so when the page loads it uses the pre-initalized TW variable.

at runtime...

first Coach

second Coach

This final example uses a boolean variable bound to the data control. The getData method can be used to set the checked status of a checkbox control.

First, a boolean variable called "myBoolean" has been created. It has been given a default value of "true" to allow the checkbox control to be checked when calling the getData method on the data control.

Then, the data control is bound to the boolean variable.

In order to have the checked status of the checkbox control be the same as the value of the data control, we need to use the getData in the On Load event of the checkbox.

We can use an "if" statement in the On Load event as such:

This line of code first checks if the data bound to the data control is true using the getData method. If it is true, we then call the setChecked method on the checkbox control.

At runtime...

Alternatively, this method could be used if we wanted to set the status of the checkbox if the data is false.

Events

With the Data control, there are 2 types of event handlers:

On Load When the page loads
On Change When the control is changed; this will fire whether or not the data changes synchronously or asynchronously. An example of an asynchronous change would be a server variable that is changed through a sever call (such as might happen during a boundary event that ends in a stay on page event)

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.

Methods

For detailed information on the available methods for this control, access the JS Doc file.

Events

Methods

Related Article(s)

Comments