Skip to main content

Backend APIs

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

What are Superblocks APIs?

Superblocks APIs are the business logic layer of your application, built on top of your data sources. These backend APIs run server side (on Superblocks servers if you're using the cloud version or on your own infrastructure if you're using the OPA), and send a response back to your components in the frontend user interface. This separation of the application into a frontend and backend is a core concept when working with APIs. For example, a backend API cannot update a frontend component's state directly. Instead, the component reacts to the response from the API.

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.

Query different databases and APIS before merging the data with Python or Javascript

Working with Superblocks APIs

Referencing Component Data

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

Reference components in the canvas with curley braces

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.

Reference a previous API step using the step name and accessing the output attribute

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

Referencing another API output in the API Builder

The output of another API can be referenced within an API step. Note that the referenced API must have run before its value is called for. In the example below the response from API1 is referenced in API2 on line 8:

Reference output of another API within an API step using API1.response

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.

Error Handling in API steps in Application

When an API step encounters an error during execution in a Superblocks Application, that API step will fail. The remaining steps will not run and the output of any failed step will be an empty object.

Notifications

API notifications are configured through the "API Configuration" menu of each API. APIs can send notifications once they run successfully, or run into an error. Furthermore, the notification text can be customized according to your needs.

Error notifications are enabled by default and the end user will see a note in the browser that the API failed along with the actual error message. The error presented is the first error that was encountered during the API execution.

Configuring user friendly success and error notifications within the API builder

Additionally, all API step errors will be available to view in the Audit Logs.

Custom Notification Example

In this example, we will set up an API to provide custom messages to the end user when the API runs successfully or runs into an error. In the "API Configuration" menu, check the Send notification on API success box under On Success and fill in a custom success message. Under On Error, include a custom message for the end user to see when the API fails.

Define custom error notifications for APIs within the API builder

On successful execution of the API, the end user will see a message confirming the data was fetched as expected.

Define custom success notifications for APIs within the API builder

When the API encounters an error, the end user will see the error message along with a custom error message indicting next steps on how to resolve the issue.

Notifications are shown to the user to help confirm actions or to troubleshoot