Skip to main content

Functions in Run JS

The following built-in JavaScript functions are available in a Run JS Action Type that is triggered by an event handler.

This function allows the user to navigate to another URL when triggered. This function can also be triggered as its own Action Type from an event handler.

navigateTo(URL, params, target)

Return Type: void

Parameter NameTypeDescriptionDefault
URLStringSuperblocks Application URL to navigate to.None
params (optional)DictionaryQuery parameters, used to pass context to the destination page.None
target (optional)String"SAME_WINDOW" or "NEW_WINDOW", case-sensitive. Defines whether the page opens in the same or a new window.SAME_WINDOW
info

Passing in key:value pairs can be omitted by using empty brackets {} allowing the target to be specified. E.g. navigateTo("URL",{},"NEW_WINDOW")

navigateTo("https://superblocks.com",{"user_id": 123, "email": "user@company_example.com"},"NEW_WINDOW");
info

If navigateTo() links to a another Superblocks Application, the query parameters passed can be accessed with Global.URL.queryParams.<query_parameter_key>. (Learn more about the Global object metadata)

This gif shows an example of navigating to another application when a row is selected:

Using onRowSelected event handler to open another application from a table component

See also navigating to URLs and navigating to deployed Applications from event handlers.

showAlert()

This functions shows an alert on trigger allowing you to specify the message and style of the alert.

Syntax

showAlert(alert_message, style)

Return Type: void

Parameters

Parameter NameTypeDescriptionDefault
alert_messageStringMessage to be shown to the user.None
style (optional)String"success", "info", "warning", "error", case-sensitive. The alert message style.info

Example

showAlert("Woohoo, it was a success!" ,"success")
Trigger custom success and error alerts with onClick event handler of a button

storeValue()

This functions allows you to store a value in the local browser storage, similar to a state variable, then access it via the Global object.

Syntax

storeValue(key, value, isTemporary)

Return Type: void

info

Use Global.store.key to access the value in another component or API step.

Parameters

Parameter NameTypeDescriptionDefault
keyStringA string containing the name of the key.None
valueStringValue stored in the provided key. Set to undefined to delete the variable from local storage.None
isTemporary (optional)BooleanControls the persistence of the local store. Defaults to false so that data is available across sessions. Set to true for a temporary local store that is cleared when the page is refreshed.false

Example

  1. Set and call a local variable
    • Set the variable from an Input component with storeValue("animal",Input1.value)
    • Access the stored value using {{Global.store.animal}}
    • Clear the value by passing in an empty string as the value. E.g. storeValue("animal","")
      Use Global Store to store and retrieve local variables
  2. Delete a local variable
    • Set the value of a variable to undefined to delete it. E.g. {{storeValue("animal", undefined)}}
    • Here is an example script to delete all local variables:
(function() {

var store_object = Global.store;

var store_keys_array = Object.keys(store_object);

for (let i in store_keys_array) {
storeValue(store_keys_array[i], undefined);
}
})();

copyToClipboard()

This function allows you to copy text to the clipboard.

Syntax

copyToclipboard(message)

Return Type: void

Parameters

Parameter NameTypeDescriptionDefault
messageStringA string to be copied to clipboard.None

Example

copyToClipboard(Button1.text)
Copy text to clipboard via a button's onClick event handler

resetComponent()

This functions resets a component to its default state.

Syntax

resetComponent(component, resetChildren)

Return Type: void

Parameters

Parameter NameTypeDescriptionDefault
componentStringComponents whose properties are to be reset to their default state.None
resetChildren (optional)BooleanReset all child components in addition to the component itself.false

Example

resetComponent('Input1')
Reset a component to default values

When resetting a Container component, you can choose to reset all children components within that container using resetChildren.

See also resetting components from event handlers.

logoutIntegrations()

This function clears any cached authentication tokens. This is mostly used for integrations using OAuth where you may need to authenticate using another account than the one that the integration was set up with.

Syntax

logoutIntegrations()

Return Type: void

Example

Clear cached authentication tokens on click

download()

Syntax

download(data, fileName, fileType)

Return Type: void

Parameters

Parameter NameTypeDescriptionDefault
dataStringData to be saved locally.None
fileNameStringFile name to be saved locally.None
fileTypeStringMIME type of the file to be saved locally.text/plain
info

Find a list of all supported MIME file types here. Set data to a Base64 string and a choose an Image Type for fileType to download an image.

Example

download("This is my text.", "myfile", "text/plain");

slideout.open()/close()

Syntax

Open a Slideout component:

slideout_name.open()

Return Type: void

Close a Slideout component:

slideout_name.close()

Return Type: void

See also controlling Slideout components from event handlers.

Definitions

DefinitionDescription
slideout_nameName of slideout to be opened/closed.

Example

Slideout1.open()

modal.open()/close()

Open a Modal component:

modal_name.open()

Return Type: void

Close a Modal component:

modal_name.close()

Return Type: void

See also controlling Modal components from event handlers.

DefinitionDescription
modal_nameName of modal to be opened/closed.
Modal1.open()

timer.start()/stop()/toggle()

Syntax

Start a Timer:

timer_name.start()

Return Type: void

Stop a Timer:

timer_name.stop()

Return Type: void

Toggle a Timer:

timer_name.toggle()

Return Type: void

info

Toggling a Timer switches it from on to off or vise versa

Definitions

DefinitionDescription
timer_nameName of Timer to be started/stopped/toggled.

Example

To toggle a Timer called Timer1:

Timer1.toggle()

See also controlling Timers from event handlers.

API.run()

This function allows the user to start an API from the frontend. It is similar to the "Run APIs" Action Type , except that it only starts one API.

The .run() function has no return value, and does not wait for the API to complete.

Syntax

API_name.run()

Return Type: void

Definitions

DefinitionDescription
API_nameName of API to be run.

Example

For an API called API1, you can call this from a Run JS function by using:

API1.run()