Skip to main content

How do I use the Button component?

Updated

The Button component can either be used on its own to set a variable or to co-ordinate multiple User Input Control components.

Setting a variable

On its own, the Button component can be used to set a variable when a user clicks it.

  1. Add a Button component and select the Properties tab.
  2. Set Use Variable to the variable to be controlled by the Button component.
  3. Set Scope as required.
  4. Optionally assign a Default Value to the variable set by the button.
  5. Edit the Value subcomponent: add the formula that will calculate and set the variable when the Button component is clicked.
  6. Edit the Label subcomponent as required.

Example of setting a variable

Add a Button component to toggle between today and yesterday.

  1. Add a Button component and select the Properties tab.
  2. Click New Variable and create a variable named toggle.
  3. Set Scope as required.
  4. Set Default Value to today.
  5. Set the formula in the Value subcomponent: IF( (toggle = yesterday), today, yesterday )
  6. Set the formula in the Label subcomponent: toggle

Co-ordinate multiple User Input Control components

Without a Button component, a User Input Control updates its associated variable immediately when a selection is made. With a Button component, User Input Control variables are not updated until the Button is clicked by a user. In turn, Klips and data sources do not react to individual User Input Control changes, but instead react when the Button is clicked. This functionality is particularly valuable when the variables set by these User Input Controls are used to create dynamic data sources since a new dynamic data source will not be created until all variables are set and the button is clicked.

The Button component is used in a multicomponent Klip in combination with multiple User Input Control components. A multicomponent Klip may contain multiple Button components, however a User Input Control component can be associated with only one Button component.

  1. Within a multicomponent Klip, add a Button component and edit the Label as required.
  2. In the same multicomponent Klip, add and configure User Input Control components.
  3. Associate each User Input Control with the Button component:
    • Change Set Value to On button press.
    • Set Use button to the name of the Button component.
    • Or Drop-Down Lists only: if the User Input Control needs to react to variables set by other User Input Controls contained within the same multicomponent for example, a City Drop-Down List could be created based on a Country Drop-Down List variable), select Instantly react to variable updates.

Important Concepts

These articles provide an overview of important concepts for working with variables:

 

Related articles