Event handlers

Event handlers trigger actions based on user input.

Baseten allows actions to be triggered when users interact with certain components, e.g. when a button is clicked, or when a form is submitted.

Components with event handlers

Use an event handler to trigger actions in response to user activity or a page load. The following components have event handlers:

  • Button: on click

  • Checkboxes: on change

  • Filepicker: on upload

  • Radio buttons: on change

  • Range: on change

  • Slider: on change

  • Text input: on change

A special case is page load. Select the canvas and open the properties menu to see event handlers for the entire page. With the "load" trigger, you can configure actions to run as soon as the page is loaded.

Another special case is table row actions. Here, each row gets a button that triggers an action when clicked. Each row can have multiple buttons, and each button will have its own onclick event handler.

Multiple actions

Actions can also be chained. As an example, when a user clicks a button you may want to execute a worklet, and then navigate to a different page. To do this, simply configure the first action, and then click the "Add next" button to configure the subsequent action. Actions will be executed synchronously, and if an action fails, subsequent actions will not be executed.

Action reference

The following actions are available:

Set state

Set a temporary state key to a chosen value.

Configuration:

  • State: The name of the state field to be set. Enter the name directly without the resource tag syntax ({{}}).

  • Value: The value to assign the state field. Supports bindings.

Trigger query

Run a saved query from your data tab and save the results to state.

Configuration:

  • Query: the name of the query to run.

  • Parameters: The query's input. The query must support parameters.

  • Save output to state: The name of the state to assign the output value to.

Control component

Set the value of a component. Only form components like checkboxes and sliders can be controlled through this action.

Configuration:

  • Component: The name of the component to be controlled.

  • Set field: Select the field in the component to set.

  • Value: Give a value of the appropriate type for the field. Supports bindings.

Run worklet

Run a worklet from the application and save the results to state.

Configuration:

  • Worklet: the name of the worklet to run.

  • Parameters: The worklet's input, will be serialized into JSON and passed into the worklet.

  • Save output to state: The name of the state to assign the output value to.

Go to view

Sends a user to another view from the same application. This navigates directly to the view; it doesn't open in a new window or tab.

Configuration:

  • View: Select a view from the same application to navigate to.

Go to url

Redirects the user to a given URL. This navigates directly to the webpage; it doesn't open in a new window or tab.

Configuration:

  • URL: the full link to the desired page, like https://example.com.

Show notification

Display a toast notification to the user.

Configuration:

  • Message: The text to display in the notification. Supports bindings.

  • Type: Select a type to change the color and icon of the callout to match its purpose.

Copy to clipboard

This action copies a given value to the user's clipboard so that they can paste it elsewhere.

Configuration:

  • Value: The string to be copied. Supports bindings.

Refresh data sources

Reloads all data sources for all components within the view.

This action has no configurable properties.

Last updated