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