5 min Quickstart Guide

info

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.

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).

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

info

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.

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

info

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.

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

SELECT DISTINCT product
FROM orders

5. Click on the Run button to execute the API

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

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

info

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

Try it out: Now click the dropdown in the user interface and voila, you have a working 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

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

info

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.

SELECT *
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.

info

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

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.

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

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

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.

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

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

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!

4. Preview, deploy, and share your 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
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 granting them access

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