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:
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
Running an API on Component Event Handler
Superblocks Components have Event Handlers such as:
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 type | Property | Description | Full Path |
|---|---|---|---|
| User | email | The email associated with the end-user viewing and using the application | Global.user.email |
| User | groups | An array of all the groups of which the end-user viewing and using the application is a member | Global.user.groups |
| User | id | The id associated with the end-user viewing and using the application | Global.user.id |
| User | username | The username associated with the end-user viewing and using the application | Global.user.username |
| Groups | groups | An array of all the permissions groups in your Superblocks organization | Global.groups |
| URL | fullpath | A string representation of the full URL of the application | Global.URL.fullpath |
| URL | host | The host component of the URL (e.g. app.superblockshq.com) | Global.URL.host |
| URL | pathname | The path component of the URL (e.g. /applications/123/pages/456) | Global.URL.pathname |
| URL | queryParams | An object containing key-value pairs representing the query parameters present in the URL. | Global.URL.queryParams |
| URL | store | An object containing key-value pairs representing the contents of the browser's local storage | Global.URL.store |