Skip to main content

Event Handlers

Event handlers allow you to trigger a series of actions of different types in reaction to user events in your Superblocks Application frontend components.

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

Trigger your APIs to run in parallel by adding them to a single Run APIs Action. To run APIs in Series, set up each API to run as its own Action and the APIs will run in the order specified.

Running APIs in Parallel

Trigger APIs to run in Parallel

Running APIs in Series

Trigger APIs to run in Series

See also triggering APIs from 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.