Button Web Control Button Web Control

Button Web Control

Adam Evans Adam Evans

Overview

The button control creates a button or text that when clicked can run Actions. This control differs from the Hyperlink control in that it does not allow for navigating outside of Airkit's Web Flows.

 

Example 1: Default button

mceclip3.png

In this example we have a button with the default style with static text "Click Me"

 

Example 2: Just text button

mceclip4.png

In this example, we've just change the style to "buttonText" in the default theme as a preset to show how it's easy to make a button just text using styling.

 

Example 3: Disabled unless valid

button_-_is_disabled.gif

In this example we have a Text Input control that is bound to the variable first_name and we're making the button either enabled or disabled based on whether a value has been entered into the text field.

To do this we're taking advantage of the Is Disabled property that is under the Advanced options and using the simple Airscript expression to check if there's a value.

 

Is Disabled

ISEMPTY(
first_name
)
  • if first_name is empty then Is Disabled = TRUE
  • if first_name has a value then Is Disabled = FALSE

Learn more useful tips and functions for checking for empty and null values

 

Example 4: Hidden unless valid

button_-_is_visible.gif

In this example we have a Text Input control just like the example above that is bound to the variable first_name however we're making the button either visible or invisible based on whether a value has been entered into the text field.

To do this we're taking advantage of the Is Visible property that is under the Advanced options and using the simple Airscript expression to check if there's a value.

 

Is Visible

ISNOTEMPTY(
first_name
)
  • if first_name is empty then Is Visible = FALSE
  • if first_name has a value then Is Visible = TRUE

Learn more useful tips and functions for checking for empty and null values

 

Control Details

Control Properties

Text

The label that the user will see for the button

 

Control Actions

Clicked

This event is fired when a user clicks the button.  Learn about how to use Actions

 

Data Binding

There are no data binding variables for this control

 

Styling

Most web controls have a common set of styling properties you can also learn more about different layout scenarios and tips

 

button_states.gif

Notice that buttons can be in different shapes & sizes including just a plain text link as well.

 

Theming

This control is able to have its style set quickly using Themes, also learn more about about best practices of defining theme variants for controls that make working with templates easy.  Additionally it's important to understand how values with a variant of a theme are inherited automatically unless they are specific as overrides.

 

Default Theme Variants

Variants are preset styles for a given web control and variants defined within the default theme are considered best practices to allow for easier sharing of templates across applications.  Learn more

  • default
  • buttonToggle
  • buttonStripe
  • buttonSecondary
  • buttonText
  • buttonSelection
  • link

mceclip0.png

 

Available Control States

Control states are available on some controls that allow setting different style values depending on the state of a control.  For example a button or a text input could be disabled or enabled.  

  • default - this is the state if the button is enabled and not being interacted with
  • pressed - this is the state when the button is temporarily depressed by the user
  • disabled - used if the Is Disabled property is true
  • focused - used if the control is focused with the tab key or with accessibility commands

 

mceclip1.png

 

Add comment

Article is closed for comments.