Button

Give the user a button that triggers an action on click.

Create a dynamic query editor

1. Add a Code Editor component from the Components panel to the canvas
2. In the Properties panel, change the Default Value to:

select * from orders

3. Add a Table component from the Components panel to the canvas
4. In the Properties panel, change the Table Data to a new API referencing the [Demo] Orders postgres database
5. In the API step, add the following SQL query:

{{CodeEditor1.stringValue}}

6. Add a Button component from the Components panel to the canvas
7. Update the Button label to "Refresh"
8. In the onClick section choose Run APIs as Action Type and API1 for APIs (executed in parallel)

Now, when you change the SQL query in the Code Editor and click Refresh, the table will re-populate accordingly!

Disable buttons based on other component's state

You can disable the button component based on the state of other component. This allows you to ensure the end user has properly filled out a form before being able to submit the data, for instance. Click on the "Code" button in the Properties Panel for a Button component to be able to use javascript within the component. The following code block is used in the below example:

{
  {
    (function () {
      if (
        DatePicker1.selectedDate &&
        Input1.value &&
        Dropdown1.selectedOptionValue
      ) {
        return false;
      } else {
        return true;
      }
    })();
  }
}

Button Properties

Component Properties

Property	Description
Label	Sets the label of the button
Button Style	Changes the style of the button, options are "Primary", "Secondary", or "Tertiary"
Icon	Selects an icon to be displayed in the dropdown input. If the selected option has its own icon, it will override this icon
Icon Position	Sets the alignment of the icon
Text Style	Changes the style (font, size, etc.) of the button's text. Configure styles in the Typography settings
Text Color	Changes the color of the label
Background	Changes the color of the background
Visible	Controls the visibility of the component, values are a boolean
Disabled	Disables user interaction with this component, values are a boolean

Image showing the different button styles available:

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Button component, and dot referencing the property. For a Button named Button1:

Property	Description
Button1.isVisible	Returns the boolean value of the button's visibility (True, if it is visible)
Button1.isDisabled	Returns the boolean value of the button's disabled state (True, if it is disabled)
Button1.text	Returns the button's label as a string

Events

The following events are triggered by user interactions with Button components. Use event handlers to trigger actions in response to user events.

Table Reference Property	Description
onClick	Triggers an action when the button is clicked