5 min Quickstart Guide

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 Text from the components panel to the top of the canvas
2. In the Properties panel on the right, change the Text to Wayfair Admin Dashboard
3. Properties panel > Text Size > change to Heading 1

info

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 from the Components panel and in the Properties panel, change Label to Product
2. Remove the example JSON from the dropdown Options and click on Add a new API > [Demo] Orders Postgres Database in the autocomplete menu

info

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.

3. Paste the SQL query below. This query gets distinct product names from the orders table.

SELECT DISTINCT product
FROM orders

4. Click on the Run button to execute the API.

5. Rename API1 to getProducts

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

info

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

2. Display a monthly revenue chart, filtered by the dropdown

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 a Chart from the Components panel and in the Properties panel, change 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.

You can reference a UI component’s data in APIs with JavaScript code surrounded by double brackets {{}}. The query below gets all the orders where the product name is similar to the selected item in the dropdown. 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.

5. Rename the API1 to getOrders

You can configure the chart to show monthly revenue by summing up prices of all the orders made on a monthly basis:

1. Properties panel > Y axis, remove id series, making Y-axis only graph the price of orders.
2. Properties panel > Y aggregation > select Sum. This defines how you want to aggregate individual order prices over a time period.
3. Properties panel > X axis Style > 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 Triggers to components that run when events such as onOptionChange are fired. These Triggers can be used to call APIs, Open URLs, and open other Superblocks Apps. This is what makes your app dynamic.

1. Click on the Product dropdown
2. Properties panel > onOptionChange > select Run APIs under Action Type 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. In the Properties panel on the right, rename the Table Header to Orders.
3. Properties panel > Table Data > set to {{getOrders.response}}. We can reuse the getOrders API to populate the table since we’re using the same orders data.

Next, follow the steps below to format the image,date_purchased, and user_id columns in the table:

1. Properties panel > click on the Edit icon next to the image column and change Column Type to Image. This will display your product images directly on the table
2. Click back to Properties panel > click on the Edit icon next to the date_purchased column and change 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. Click back to Properties panel > Click on the Hide icon next to the user_id column to hide the column as it introduces noise in our Orders table.

4. Finally, lets reorder the columns by dragging the Price column before user_email.

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 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, and click on View Application to use your deployed application

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

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

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