Skip to main content

Event Handlers

Event handlers allow you to trigger a series of actions in reaction to events fired in your Application.

To add an event handler, click into a component to open its properties panel, scroll to the bottom section, and click "+ Select an Action" under the desired event handler.

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:

Trigger APIs to run in parallel

Running APIs in succession

To run APIs in succession, 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:

Trigger APIs to run in succession

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.

Add onSuccess and onError event handlers that are run after an API finishes executing

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.

Trigger user facing alerts with Run JS via a button's onClick event

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.

Navigate to other URLs via a button's onClick event

See also navigating to another URL from Run JS.

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.

Navigate to a deployed Superblocks application and pass query parameters to it

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.

Open or close a new or existing slideout with event handlers

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.

Open or close a new or existing modal with event handlers

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.

Start stop toggle timers with UI components via event handlers

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.

Reset UI components and their children via event handlers

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.

set component properties via event handlers

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.

Select message, type, position, and duration for the alert.
Parameter NameTypeDescriptionDefault
MessageStringMessage to be shown to the user.None
Alert TypeString"Success", "Info", "Warning", "Error". The alert message style.Success
Alert PositionString“Bottom Right”, “Bottom Center”, “Bottom Left”, “Top Right”, “Top Center”, “Top Left”Bottom Right
Alert DurationNumberThe duration before the alert is automatically dismissed. Specifying 0 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.

APIs that throw an error will show the error in an alert by default

Trigger Event

Trigger a custom user-defined event from a frontend action. To learn how to create your own events in Superblocks, see Events.

Trigger Event

Run this action type from code

See also event.trigger() to run this action type from code in Run JS (frontend).

Set Frontend Variable

Set the Value of a frontend variable by choosing the variable to be set from the dropdown menu and by setting a new Value in the input field.

Use the Set Frontend Variable Action Type on event handlers to set a variable's value

Run this action type from code

See also variable.set() to run this action type from code in Run JS (frontend).

Reset Frontend Variable

Reset a frontend 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 an empty string, "".

Use the Reset Frontend Variable to Default Action Type on event handlers to reset a variable's value

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}}.

Setting profile action event handler.

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.

Set Query Parameters

Set query parameters in your URI for greater control over your page or app's state. By selecting the Set query parameters action type, you can avoid unnecessary API calls, saving resources and allowing you to share the URI with your teammates effortlessly, without them needing to mimic your app or page view.

set query parameter via event handler

info

It is important to note that setting up a Default selected value(s) is crucial if you want to fully utilize sharing the URI with set query parameters as intended.

Cancel APIs

Cancel an API with a frontend event handler.

cancel api action event handler.

See also canceling an API from Run JS.