Dynamic Button

Dynamic Button

Click on a dynamic button and it will perform different actions, depending on criteria that you set. Dynamic buttons can perform all the functions that buttons can, like calling APIs, updating data or inserting new data. This lets you have a single button that can do lots of different things.

Note: Dynamic buttons are inserted in-line within another component, like a table or card list. The underlying data that determines how the button behaves comes from this component.

Ways to use a dynamic button

Simple toggle settings

Use a dynamic button that sets the desired field to Y if the field is X, and vice versa, to create a quick toggle button.

Example: You can create a dynamic button to toggle the status field of a Scooter. If the Scooter’s status is ”active” the button will display “Deactivate” and when clicked, will set the status field to ”maintenance”. If it’s in ”maintenance” status, the button will show “Activate” and will set the status back to ”active”.

Multi-stage processes

You can use a dynamic button that will perform different functions for each stage in a process (or any other dynamic setting).

Example: You have a multi-stage process for onboarding customers. First they go through enrollment, then there’s an implementation phase, and finally you activate them as a customer.

You can set up a dynamic button in your Onboarding Customers table that will perform different functions based on if the company is in enrollment, implementation, or activation. We’ll go through a step-by-step example below.

Configuring your dynamic button

When this happens

First you'll want to set up your button "states", the governing rules that define button functionality. Click "Add state" to get started.

Each state is comprised of rules that must all be fulfilled for the button to be in a given "state". Basically, a rule compares a data field against a value. Some example rules:

  • Battery_level [is less than] 20
  • Status [is equal to] active
  • Email [contains] ""
  • LastName [is not null]

Show this

For each state, you can choose whether to display a button, a pop-up form, or nothing. By default, an Else state covering all other cases will show nothing (empty column).

Configuration Note:
Since dynamic buttons are embedded in another component, you’ll see some special options for using a value from a component. For example, in a table component, you’ll see This Row and This Table.

This Row will pull data from the row that this button is in. Whereas This Table will allow you to pull data from the selected row in the table, which can be different than the row the button is in.

A common way to use This Row is to pull the primary key for the row (id), which is needed if you want the button to manipulate the data in its row.

This "id" field is set to the value from the "id" column of this row


Let's continue on the above example for multi-stage processes. You have an Onboarding Customers table, and you've placed a dynamic button to move along each stage of the process: from new to enrolled to implemented to active.

You set up button states, based on each customer's onboarding stage.

Each button and pop-up form is configured to perform different custom functions. The Enroll button calls an API to go through enrollment, and also changes the stage to "enrolled". The Implement pop-up form lets a user fill in implementation details in form fields and then progresses the stage to "implemented". The Activate button changes the stage to "active" and calls a notification API. At this point, since there's no button state governing the "active" stage, the "Else" criteria takes precedence and no button is shown in this column.