AppSheet Progress Bar Generator
Enter your column name, pick a style, and copy the formula into an Image virtual column.
Settings
Color steps
Each color is used from its % until the next step. Example: 0% red, 5% orange, 50% blue, 100% green.
Preview
How to use
- In AppSheet go to Data → Columns and click Add virtual column.
- Give it a new name, for example Progress Bar.
- Paste the formula into App formula and set Type to Image.
- Save. Add the column to your views if it doesn't show.
Common issues
Quick fixes for the problems people run into most. Still stuck? Use the Troubleshoot button at the top.
The formula shows as text instead of a progress bar
Set the virtual column's Type to Image. The formula builds an SVG image, so a Text column shows the code itself instead of drawing it.
The bar is always empty or always full
The progress column must hold a decimal from 0 to 1, where 0.75 means 75%. If your column stores 75 for 75%, add a virtual column with the formula [Progress] / 100 and use that column's name in the generator.
The animation doesn't play
Some devices and views show only the final frame of an animated image. The bar still shows the correct value. If you prefer a static image everywhere, set Animation to None and copy the formula again.
The label shows a negative value or more than 100%
The circle and gauge never draw below 0% or above 100%, but the label shows the real value on purpose, so a data entry mistake stays visible. Fix the value in the record.
I renamed my column and the bar stopped working
The column name is written into the formula. Enter the new name in the generator and copy the formula again, or edit the name inside the square brackets.
I've built 100+ AppSheet apps for inventory, POS, inspections, approvals and reporting, for clients in the USA, Europe and Asia.