Event Handlers
Event handlers allow you to trigger a series of actions of different types in reaction to user events in your frontend components and APIs executed in the backend of your Superblocks Applications.
These actions can be used to navigate to another application, run your APIs, run custom JavaScript, or open/close a slideout component. For example: opening a slideout panel when a row on a Table component is clicked.
To add an event handler, open up the Property Panel for the component and click "Add" under the Event Handler section. Choose the event handler and then select the Action to trigger from the event.
Action types
Run APIs
Run any backend API based on events that happen in the frontend of your Superblocks Application such as a user clicking a button.
Running APIs in Parallel
Run APIs in parallel by adding them to a single Run APIs action type. In the example below API1 and API2 will be executed at the same time:
Running APIs in Series
To run APIs in Series, set up each API to run as its own Run APIs action type and the APIs will run in the order specified. In the example below API1 is executed first, and API2 second:
onSuccess and onError event handlers
info
Both event handlers can also be set in the response block of a backend API.
onSuccess and onError are event handlers that are run on the frontend once the backend finishes executing the API. Therefore the event handlers only have access to the frontend scope of your Superblocks Applications and to the data returned by the API via API1.repsonse or API1.error. Users can add one more action types to be triggered by the event handlers based on the response of the API.
Run this action type from code
See also triggering APIs to run this action type from code in Run JS.
Run JS
Write custom JavaScript to run when triggered by an event. You can also use a number of predefined functions to run actions such as copying text to the clipboard, resetting values in components, or showing an alert pop-up.
Navigate to URL
Navigate to a static or dynamic URL. Toggle "Open in new tab" to off to open the new page in same browser tab. For example, add a button column type to your table for users to click through to a custom URL dynamically updated with the current row's ID.
See also navigating to another URL from Run JS.
Navigate to App
Navigate to another deployed Superblocks application. Select the application that you want to navigate to in the dropdown. Query parameters can also be supplied either within the UI or via code. Finally, toggle whether to open the application in the current tab or a new tab.
info
Note Only deployed applications will appear in the application dropdown.
See also navigating to another application from Run JS.
Open / Close Slideout
Open or close a new or existing slideout. For example, open a new slideout when users click on a table row to pull up more context on that row.
See also opening or closing a slideout from Run JS.
Open / Close Modal
Open or close a new or existing modal. For example, open a new modal when users click on a button to confirm an action.
See also opening or closing a modal from Run JS.
Start / Stop Timer
Start, stop, or toggle a new or existing timer. For example, use a checkbox to enable and disable a timer for live graphs.
See also controlling timers from Run JS.
Reset Component to Default
Reset a component's property to its default values. Container and form components can be used to create a parent/child relationship with other components inside the them, these can be reset by selecting the children property.
See also resetting components from Run JS.
Set Component Property
Set a component property to any value. For example, set the selected tab on a tabs component when a user clicks a button.
Settable Components and Properties
info
Visit the individual component pages for a list of the settable component properties, for example the Settable properties of the Table component.
See also setting component properties from Run JS.
Show Alert
Show a temporary notification style message to the user. For example, give the user visual feedback that a form was successfully submitted.
| Parameter Name | Type | Description | Default |
|---|---|---|---|
Message | String | Message to be shown to the user. | None |
Alert Type | String | "Success", "Info", "Warning", "Error". The alert message style. | Success |
Alert Position | String | “Bottom Right”, “Bottom Center”, “Bottom Left”, “Top Right”, “Top Center”, “Top Left” | Bottom Right |
Alert Duration | Number | The duration before the alert is automatically dismissed. Specifying -1 will make the alert sticky to require explicit dismissal. | 4 seconds |
See also showing an alert from Run JS.
info
By default, an API will show an error alert using the onError event handler.
Set State Variable
Set the Value of a State variable by choosing the variable to be set from the dropdown menu and by setting a new Value in the input field.
Run this action type from code
See also variable.set() to run this action type from code in Run JS (frontend).
Reset State Variable
Reset a State variable to its default value by choosing the variable to be reset from the dropdown menu. If the user has not defined a custom default value, value is reset to null.
Run this action type from code
See also variable.resetToDefault() to run this action type from code in Run JS (frontend).
Set Profile
Allow the application to set to different environments via Profiles. Other available profile IDs can be viewed under {{Global.profiles.available}}.
The placeholder {{Global.profiles.default.id}} value will point to the profile that is the default for current mode (Edit, Preview, Deployed). We can also use Set to Default instead of Set to achieve the same as using the default id.
Cancel APIs
Cancel an API with a frontend event handler.
See also canceling an API from Run JS.