Skip to main content

5 min Quickstart Guide


Note: Take a look at the 5 Steps To Build Any Tool guide to learn more about the key technical concepts to build any tool in Superblocks.

Imagine you're an eCommerce company and you need a dashboard for Support Reps to track monthly revenue and orders by product. Follow this guide to build this custom internal tool in less than 5 minutes with Demo Integrations already setup in your Superblocks account.

Preview of completed application

Before getting into the guide, Sign up and create a new app. You’ll use the Demo Postgres and Demo Snowflake integrations already available in your account. To create a new app, click Create New —> Create Application (see below).

Create a new Superblocks Application

1. Add a dropdown of Products from Postgres

Start by giving your Internal Application a title:

  1. Drag and drop a Text component from the components panel to the top of the canvas
  2. In the Properties panel on the right, update the Text property to "Wayfair Admin Dashboard"
  3. Update the Text Size property to Heading 1

The Properties Panel on the right appears when you click on a UI component in development mode. It allows you to configure components by changing their visual design, adding event triggers, and most importantly, connecting API responses to UI elements.

Drag a text component to the canvas and set its properties

Next, you will use a Dropdown and an API to list the names of all the products sold from your website:

  1. Drag a Dropdown component onto the canvas
  2. In the Properties panel, change Label to Product
  3. Remove the example JSON from the dropdown Options and click on Add a new API > [Demo] Orders Postgres Database in the autocomplete menu

The API Builder allows you to query Databases and REST/GraphQL APIs, write Python or JavaScript business logic, and load the response into a UI component.

Drag a dropdown onto the canvas and link to a new API

4. Paste the SQL query below into the API editor. This query gets distinct product names from the orders table

FROM orders

5. Click on the Run button to execute the API

Add SQL to the postgres step

6. Rename API1 to "getProducts" by clicking the pencil next to the name

Rename the Backend API

Make sure that in the Properties panel the value for the Dropdown's Options is set to the response from your API {{getProducts.response}}:


You're using frontend bindings to bind the Dropdown's Options to the API response.

Set the Options property of the Dropdown

Try it out: Now click the dropdown in the user interface and voila, you have a working dropdown!

Run the API and view results in the dropdown

2. Display a monthly revenue chart filtered by product

Let’s add a monthly revenue chart to track sales over time. You can quickly generate this chart by connecting a Chart component to an API that makes a SQL query to the orders table:

  1. Drag on a Chart component and in the Properties panel, update Chart Header to "Monthly Revenue"
  2. Remove the example JSON from Chart Data and click on Add a new API > [Demo] Orders Postgres DB in the autocomplete

Drag a chart component to the canvas, set its properties and create a new API

3. Paste the SQL query below which fetches all of the orders table.


You can reference a UI component from APIs with JavaScript using double brackets {{}}. The query below gets all orders where the product name is similar to the selected item in the dropdown (Dropdown1.selectedOptionValue). If the dropdown is empty, it fetches all the orders.

FROM orders
WHERE product like {{Dropdown1.selectedOptionValue || '%'}}

4. Click on the Run button to execute the API. Since the chart data is bound to the API response, the graph automatically updates to plot every order with Order ID and Price on the Y-axis and the Order Date on the X-axis.


Set the chart's Chart Data property to {{API1.response}} if the chart does not display the results of the backend API.

5. Rename the API1 to getOrders

Add SQL to the postgres step and rename the API

We'll configure the chart to show monthly revenue by summing up prices of all the orders made on a monthly basis.

To do so, make the following changes from the Properties panel of the Chart.

  1. Y axis - remove id series, making Y-axis only graph the price of orders.
  2. Y aggregation - select Sum. This defines how you want to aggregate individual order prices over a time period.
  3. X axis Styles > X time granularity - select Monthly. This allows you to sum prices of all the orders made in a month-by-month basis, to create a Monthly Revenue chart.

Set the chart's properties as needed

Finally, let’s run the getOrders API every time the dropdown option changes. This will filter the Monthly Revenue chart to only show the revenue of the selected product.

When the dropdown option is changed, an event called onOptionChange is fired. You can attach multiple event handlers to component events, and they will run each time the event is fired. These event handlers can be used to call APIs, run JavaScript, update other components, and more, making your app dynamic

  1. Click on the Product dropdown
  2. Identify the onOptionChange event in the properties panel
  3. Click Select an action to add an event handler, select Run APIs, and choose the getOrders API

Add onOptionChange event handler to dropdown

Try it out: when you select a product in the Products dropdown, the chart will filter to the product’s monthly revenue breakdown.

Control the chart with the dropdown

3. Display a table of orders from Postgres, filtered by the dropdown

Next, add a table to this dashboard that displays a list of all the orders:

  1. Drag a Table from the Components panel.
  2. Update the Table Header property to "Orders".
  3. Update the Table Data property to {{getOrders.response}}. We can reuse the getOrders API to populate the table since we’re using the same orders data.

Drag a table component onto the canvas and set its properties

Next, we'll format the image, date_purchased, and user_id columns in the table.

Taking a look at the Properties panel, we see the Columns section which contains an item for each column. Clicking on a column will open a secondary menu where you can customize that column's display and settings.

  1. Click on the image column. Change the Column Type to Image. This will display your product images directly on the table
  2. Next, click on the date_purchased column and update the Column Type to Date. Then, change Display Date Format to Do MMM YYYY. This will transform the date column from displaying SQL timestamps to a format that's visually easy to read

Style and configure the table

3. Then, click the Hide icon for the user_id column reduce the noise in the UI

4. Finally, lets reorder the columns by dragging the id column before date_purchased

Reorder the columns with drag and drop

Try it out: Since the Chart and the Table components share the same API, the table can automatically be filtered using the Products dropdown. Try selecting a Product from the dropdown!

Control the table query with the dropdown

4. Preview, Deploy, and Share your internal app

You are now ready to preview and deploy your first internal tool.

  1. Click Preview on the top right corner to open the app in preview mode. Preview mode allows you to rapidly test your end-user experience while you are developing your app, without making changes to the production app that your users rely upon
  2. Once you are happy with your app in preview, click the Deploy button. You can add a commit message, then commit and deploy your app!
  3. Finally, click the View deployed app link to use your deployed application

Deploy the application

4. Grab the deployed app URL from your browser and share it with your coworkers on Slack or Email

5. You can also collaborate with your coworkers on your application by giving them Build permission once they sign up to Superblocks with your company email.

Share the application with other users

Congratulations, you just built your first Internal App in Superblocks! Next, try building an app using your own data and connect your first integration.