The Variant control is a single  control that can be used to represent the following controls: Text, Masked Text, Single Select, Date, Decimal, Integer

This is advantageous since there is no need to bind each control to their own variable.

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).

There is low overhead with this control, as opposed to the Stack control, which would instantiate all of the views that was declared during development. If you bind a control to an ANY type, during runtime, if for example, a date is chosen, the control will show a date control. If you update the value of the control inside of the variant, then the variant value itself will be updated, and vice versa.


Auto Select Control Auto-selects control based on type of data

Control Index Expression This expression should return a 0-based index corresponding to the control to be shown.  This allows you control to decide which view/control to show rather than automatically.


These are the configuration option settings...

The Variant control and Output Text control (displays the current value of Variant) are bound to an ANY variable type.

To toggle between the different controls, the buttons use the showControl method.

This is the result...


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

  • On Load When the page loads
  • On Change When there is a change

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.


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


  • Author: Courtney Silva
  • Date Created: June 29, 2015
  • Date Modified: September 21, 2015
Was this article helpful?
0 out of 0 found this helpful