Generate Financial App with Charts

Build a stock-tracking application using AppGen, add an interactive chart, and extend the app with a database write-back form.

Overview

In this lab, you will build an application to track the top 20 technology stocks using a database as the backend. This app will later be updated with charts and the ability to write back information to the database.

Data Setup

For this example, we have a CSV file that provides historical quarterly closing stock prices for the top 20 technology companies from 2005 to 2025.

Download CSV

• Select Database > Import from CSV and specify a table name of data_builder_tech_stock_prices_quarterly.
• It will then appear as shown in the following image:

Database table after CSV import

Create App

Next, leverage AppGen functionality available in Retool Apps (Beta) to generate working applications.

• Select Apps > Create > App

To generate an application using Retool, the same prompt can be employed and entered into the prompt highlighted below.

Use the following prompt to create the application:

Create a historical stock-tracking application that monitors the top 20 technology companies. The data is in @Retool Database data_builder_tech_stock_prices_quarterly.

The preview pane will update and display an app. The following image is an example.

Generated application

note

App Builder results will vary but have the basic functionality requested in the prompt.

Add Interactive Charts

In this section, you will extend the app to include an interactive chart.

Prompt

Use the following prompt to add a chart:

Add an additional chart that shows QoQ change for selected vendors.

This will result in a chart in the Retool app. The following figure shows the chart in the app.

Retool App with Chart

Modify Database

Let's update the Retool App to include a new column called number_of_shares and enable it to capture the number of shares of a stock acquired in that quarter.

• In the data_builder_tech_stock_prices_quarterly table, select + to add a new column.

Database table with add column button

This will display a dialog where you can specify the column name, column type, and other details. For this example, the following image shows the populated dialog with:

• Column name = number_of_shares
• Column type = # Number
• Number type = integer

Add column dialog

• Select Save
• The database table will then display the column as shown below.

Database table with new number_of_shares column

Modify Retool App

Next, we will want to provide a way to update this database column via a write back.

• Enter the following prompt:

I want a form that lets me specify the number of shares acquired by a company during a quarter. The form will update @Retool Database data_builder_tech_stock_prices_quarterly and specifically the number_of_shares column.

The following form was created with a populated list of companies, quarters, and a Number of shares acquired field.

Generated shares acquisition form

• Fill out the form with 1000 shares of Adobe for Q42025.

Populate form

• Select Save to update the table.This will display an approval form for the update function.

Update function

• Approve the use of the function. This will then update Retool Database and the specific row that was specified in the form. The following image shows the change.

Database table showing updated number_of_shares value

Summary

This lab provided a demonstration of how a data builder can prompt an application leveraging a dataset and support write-back actions. In this example it is Retool Database but any Retool Resources that are configured can be the source of your dashboards and write back actions if permitted.