Back to Website
Show / Hide Table of Contents

Button

  • 2 minutes to read

A widget to display a button. You can define button text, select button style, and set the actions to be performed when the button is clicked. Clicking the button, you can implement code or manage other widgets.

As for appearance, the button widget shows text and has several color styles.

{
  "name": "my-button",
  "type": "button",
  "params": {...}
}

Text

This is a button without functions added to a main panel.

Simple Button

{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me"
  }
}

Button styles

You can select one of the predefined button styles that mostly differ in their color. By default, buttons are displayed in the colors of the primary UI theme. You can also select a color corresponding to a successful action or a secondary color set. Just use the success and secondary values in the classStyle param.

Success style

Button with Success Style

{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "success"
  }
}

Secondary style

Button with Secondary Style

{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "secondary"
  }
}

Enabled

The Enabled property defines if the button is clickable or not. In this example, we make the button clickable depending on the checkbox value. If selected, the button will be clickable. Here, we use a dynamic expression returning the checkbox value.

Button enabled

{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "primary",
    "enabled": "{{$['checkbox']._ }}"
  }
}

Visible

The Visible property defines the button visibility in user interface.

In this example, we will also display the button depending on the checkbox value. In the dynamic expression for the visible param, we invert the checkbox value. This expression means that the button will be visible if the checkbox isn't selected and vice versa.

Button Visible

{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Click me",
    "classStyle": "primary",
    "visible": "{{!$['checkbox']._ }}"
  }
}

Events

A button allows you to handle the OnClick event. You can define one or more functions to be performed when the user clicks the button.

In this example, we make the checkbox selected on the button click.

Button OnClick

{
  "name": "my-button",
  "type": "button",
  "params": {
    "text": "Select the checkbox",
    "onClick":"{{#function $['checkbox'].value = true}}"
  }
}

Params

Name Type Description Default meaning
classStyle "primary"|"success"|"secondary" defining a button color "primary"
text string adding a text on a button empty string
enabled boolean making a button clickable true
visible boolean making a buttin visible true
onClick a function "{{#function ...}}" or array of functions ["{{#function ...}}","{{#function ...}}", ...] calling a function undefined
Was this page helpful?
Thanks for your feedback!
Back to top Copyright © 2001–2022 Aurigma, Inc. All rights reserved.
Loading...
    Thank for your vote
    Your opinion is important to us. To provide details, send feedback.
    Send feedback