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

Components	Property (Form / Run JS)	Type	Example Value
Checkbox	Is Checked / isChecked	boolean	true
DatePicker	Selected Date / selectedDate	string	"07/04/2022"
Dropdown	Selected Option(s) / selectedOptionValue(s)	string | Array<string>	"TORONTO" | ["TORONTO", "NEW YORK"]
Input	Text / text	string	"value"
Map	Center / center	{lat: number, long: number}	{lat: -34.3, long: 150.6}
	Markers / markers	Array<{ lat: number, long: number, title?: string }>	[{"lat":-34.397, "long":150.644, "title":"Test A}]
	Selected Marker / selectedMarker	{lat: number, long: number}	{lat: -34.3, long: 150.6}
Radio	Selected Option / selectedOptionValue	string	"NY"
Code Editor	Value / value	string | null	"const count = 3;"
Grid	Selected Cell / selectedCellIndex	number	0
Tabs	Selected Tab / selectedTab	string	"Tab Name"
Table	Selected Row / selectedRowIndex	number	0
	Selected Rows / selectedRowIndices	Array<number>	[0, 1]
	Filters / filters	{"byColumn": Object}	{   "byColumn": {     "name": {       "condition": {         "type": "textStartsWith",         "param": "b"       }     }   } }
	Search Text / searchText	string	"Search value"
	Page Number / pageNo	number	2
	Hidden Columns / hiddenColumns	Array<string>	["name", "date"]

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.

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