Table of Contents
Tags
It is pretty standard for small businesses to store a significant amount of their data in Spreadsheets. However, what if they could open part of that data to their customers so that their customers could directly interact with their spreadsheets?
This is actually possible and can be achieved easily without any coding knowledge. Chartmat is a software tool to build an app on top of data from a Google Spreadsheet. The best part of it is that it requires no coding to get started.
Build a Web App to collect Customer Information and Visualize Results
Let’s assume a business wants to collect customer information through a browser form. That form should write the data into a Google Spreadsheet and the spreadsheet should perform some calculations. The results of the calculations should be instantly displayed to the customer as if she was interacting with a native web app. All of this is easily possible using Chartmat as a no code web app builder and Google Spreadsheet as your database.
How to Collect User Input via a Web App and Display the Results
Let’s assume you want to calculate the Body Mass Index (BMI) of a user and immediately display the results. You can do this easily with Chartmat.
Simply create a Chartmat form that collects the user weight and height:
In this case the email address of the user is additionally collected by the form but won’t appear visibly to the user since the field is hidden:
The email address is required in order to link the results of the BMI to the user. As the user fills the form all the data gets submitted to the connected Google Spreadsheet without any delay:
The field BMI (Body Mass Index) is automatically calculated by the Google Spreadsheet based on the formula.
You can then create a different “view results” section in Chartmat and immediately present the results to the user with a diagram showing the interpretation of the BMI:
Note that the BMI number is actually a dynamic variable that changes based on the user that views the board. This is how the mark down blocks displaying the information actually looks like:
Through applying the current user filter in Chartmat you can ensure that every user sees their corresponding BMI based on the data that they entered.
Now you may wonder why you should display the BMI to your users? The truth is the very same steps of collecting information, performing calculations through a spreadsheet and displaying results can be performed for any use case.
Here are some ideas for web apps that you could build on top of data from Google Spreadsheets:
- A fitness app where users enter their training logs and visualize their progress
- A nutrition app where users log their diet and see their results
- A mortgage loan calculator where users enter their financial data and can calculate their monthly installments
- A job applications dashboard where recruiters log information of applicants and their customers can observe the process in real time
- A stock market app where investors track their purchases and see the performance of their portfolio over time
- A time tracking app where employees log their billable hours and managers can track projects
How to Build your no code Web App on Google Sheets
In order to build a no code web app on Google Sheets you can simply follow these steps:
- Prepare your Google Spreadsheet and data architecture
- Sign up for a Chartmat Account and connect your Google Spreadsheet to your Chartmat Board
- Customize your Chartmat Board and divide it in sections if it makes sense for your web app. If you want to keep things separated from each other you might want to build two or more Boards (sites) that are independent from each other
- Create the forms, tables, charts and markdowns that you need for building your web app
In case you want more detailed instructions for how to build a no code web app with Google Sheets and Chartmat you can follow this video tutorial:
To Summarize
In this guide we explained how to build a no code web app with Chartmat on top of data from Google Sheets. With Chartmat you can build a web app without any coding knowledge and the need to set up a development environment and deploy your app. The web app we walked through is ideal to collect user input and to visualize results for the user. Google Sheets in the background essentially serves as the database for your web app. You can add data to your web app through forms or modify data via Chartmat or directly through your Google Spreadsheet.
The use cases you are trying to pursue for your web app might differ. You might want to build a simple SaaS app to validate your idea before you invest into scaling your app. You can also collect your data through other SaaS tools and simply use Chartmat and Google Spreadsheet in order to visualize your results. The potential use cases for your web app are unlimited. You can even integrate various no code tools such as Glide Apps or Stacker with the very same Google Spreadsheet since all those tools are compatible. If you want to connect your web app to other data sources or APIs you can use Integromat or Zapier.