Skip to main content

Build APIs with Data

Connect your Database, APIs and write Javascript or Python business logic. 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, for example:

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​

{{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​

APIs respond with the output of the final step in the sequence. You might want to use this 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:

  • onSelectedRow for Tables
  • onOptionChange for Dropdowns
  • onClick for Buttons

Run API2 every time a row in the table is selected

Whenever these event handlers fire, you can run an API from these Component fields in the properties panel by writing:

{{API1.run()}} //Runs API1 every time the Component Event Handler is triggered

Configuring UI Notifications​

By default, when an API fails to run it will send an alert in the UI that an error was hit.