Skip to main content

Build APIs with Data

Connect your Database, APIs and write buisiness logic in JavaScript or Python. Reference previous Steps and Components to make your application dynamic

On this page:

  1. What are Superblocks APIs
  2. Working with Superblocks APIs

What are Superblocks APIs?

Superblocks APIs are the business logic layer of your application on top of your datasources, they serve a response to your Components in the User Interface.

In the example below, we query the Zendesk GET Ticket API, then get the associated customer orders from Postgres, get the order shipping data from Snowflake and merge and transform the Postgres/Snowflake output using Python.

Working with Superblocks APIs

Referencing Component Data

You can use {{}} in SQL / REST / GraphQL steps to reference components in the Canvas.

To reference other components you can write:

{{Input1.text}}                        //The value of the input
{{Table1.selectedRow.city}} //The selected row JSON object from the Table
{{Chart1.selectedData}} //The selected data point JSON object from the Chart
{{Dropdown1.selectedOptionValue}} //The option selected in the Dropdown
info

Tip The curly braces evaluate to JavaScript and are not needed in JavaScript or Python steps

Referencing a previous Step in the API Builder

You can also reference the output from previous steps in an API.

{{Step1.output}}             //The JSON output object from the Step1
{{Step1.output[0]}} //The object at index 0 of the array
{{Step1.output[0].product}}} //The product property of the 0th index

Using an API Response to fill Components

The response of an API is the result of the final step in the sequence. You can use the response in the Table Data, Chart Data, Dropdown Data, Grid Data and other related data entry fields.

{{API1.response}} //Give the APIs response object, the output of the final API stp

Fill the Table data with the response of the GetOrders API

Running an API on Component Event Handler

Superblocks Components have Event Handlers such as:

Run API2 every time a row in the table is selected

Whenever these event handlers fire, you can run an API by selecting "Run APIs" as the Action Type and then choosing the API to run.

Configuring UI Notifications

By default, when an API fails to run it will send an alert in the UI that an error was hit. These can be configured with a custom message.

Global object metadata

The Global object is available when building API steps in applications. It holds metadata such as the current URL, the end-user accessing the application, or the browser's local storage. This metadata can be used to reference a user's groups in code or access the query parameters to dynamically pass data between applications. Use CMD/CTRL + k to pull up the Global object as well as other available variables in API steps or when writing JavaScript inside components.

Available metadata

Metadata typePropertyDescriptionFull Path
UseremailThe email associated with the end-user viewing and using the applicationGlobal.user.email
UsergroupsAn array of all the groups of which the end-user viewing and using the application is a memberGlobal.user.groups
UseridThe id associated with the end-user viewing and using the applicationGlobal.user.id
UserusernameThe username associated with the end-user viewing and using the applicationGlobal.user.username
GroupsgroupsAn array of all the permissions groups in your Superblocks organizationGlobal.groups
URLfullpathA string representation of the full URL of the applicationGlobal.URL.fullpath
URLhostThe host component of the URL (e.g. app.superblockshq.com)Global.URL.host
URLpathnameThe path component of the URL (e.g. /applications/123/pages/456)Global.URL.pathname
URLqueryParamsAn object containing key-value pairs representing the query parameters present in the URL.Global.URL.queryParams
URLstoreAn object containing key-value pairs representing the contents of the browser's local storageGlobal.URL.store