Click a button to perform an action. The button component provides a quick way for users to interact with data. When clicked, buttons perform functions like calling APIs, updating data or inserting new data.
You can configure buttons to take inputs from a single component or multiple components.
Buttons can be configured to always set a certain value.
If you want to allow users to verify the inputs before submitting or input their own values, use a form component instead.
First, select the function that this button should trigger when a user clicks on it.
For most databases, you'll see auto-generated insert, update, and delete functions. For example, if you selected your PostgreSQL database with a Users table, you'll see "insert Users record", "update Users record", and "delete Users record" functions appear automatically.
For most business apps, auto-generated functions will appear, based on the available APIs of that app. For an app like Stripe, you'll see functions for "insert Balance Transactions record", "update Balance Transactions record", "delete Balance Transactions record", and so forth for the resources available in Stripe's API.
Usually, if your button changes some data that is displayed in the Space, you'll want to refresh the data. After Submitting options allow you to refresh the data of any component in the Space.
Here you'll specify the actual inputs that are passed along when the button is clicked. To do this, you’ll select fields, and then specify what values go in them.
By default, only required fields are added. For example, If you’re updating a record in a database, this would just be the primary key. Click “Add data” to view a list of all available fields for your selected function.
You’ll need to choose a value that is passed in for each field. You can get this value from an existing component, set a custom default value, set a UUID, set to null, or set to the date-time the button is clicked (date/time fields only).
In the example below, we’ve chosen to set the value of the “id” field with the “id” of the selected row of the Customer List (which is a table component in this Space).
In this next example, we’ve chosen to always set the status field’s value to “Active”.
Check out Field Configuration to learn more.