This week I had a long and interesting discussion with ChatGPT. For personal use I had created an app to record blood pressure measurements, but I became frustrated with the ListView I was using, so I wanted to switch to using an HTML table. I did some research and found some examples which were either too simple, or in Spanish or too difficult. The result of the discussion was a rather generic way of using a WebViewer and Javascript. I made a simplified app, about keeping a list of weight measurements, with a date.
The blocks code is pretty simple, by making a list of column names you determine the shape of the table, like this:
Here is the .aia, that also contains the html needed, but you will see it again in the story by ChatGPT itself:
DynTable_20250410.aia (7.9 KB)
This is the html (change txt to html):
dyntable_flexidates.txt (5.7 KB)
This is the ChatGpt story:
Dynamic Tables in App Inventor using WebViewer and HTMLWith sorting, editing, and CSV export
What This Project Does
This App Inventor project uses the WebViewer component to show and manage a dynamic HTML table. It uses JavaScript and JSON to interact with the table from App Inventor blocks.
You can:
- Add and remove rows
- Sort by any column (including ISO-formatted dates)
- Edit specific rows
- Export the table as a CSV file
- Save and restore table data using files
- Show user-friendly date formatting (e.g.,
18-04-2025)
How It Works
The App Inventor side sends commands to the WebViewer using:
WebViewer.WebViewString = JSON-formatted text
Basic Commands:
| JSON Command | Effect |
|---|---|
{ "title": "My Log" } |
Sets the table title |
{ "add": { ... } } |
Adds a row |
{ "addTop": { ... } } |
Adds a row to the top |
{ "edit": { match, update }} |
Edits the first matching row |
{ "delete": { field: value }} |
Deletes a row by field match |
{ "clear": true } |
Removes all rows |
{ "sortBy": "Date" } |
Sorts the table by column (ascending) |
{ "save": true } |
Sends table data back to App Inventor |
{ "exportCSV": true } |
Sends CSV-formatted string to App Inventor |
You can combine commands in one JSON:
{
"title": "Weight Log",
"load": [
{ "Date": "18-04-2025", "Weight": "72" },
{ "Date": "05-04-2025", "Weight": "68" }
],
"sortBy": "Date"
}
Date Handling
- Users can enter or pick dates as
"dd-MM-yyyy"(e.g.,05-04-2025) - The HTML converts these to
"yyyy-MM-dd"internally so sorting works - The table still displays dates in the local-friendly format:
dd-MM-yyyy
Included Files
dyntable_flexidates.html: the HTML file used in the WebViewer
You can include this file in your assets and load it like this:
WebViewer.HomeUrl = "file:///android_asset/dyntable_flexidates.html"
Note Ghica: use "localhost/dyntable_flexidates.html"instead of the line above.
Example Block Logic
Here’s how simple the App Inventor blocks can be:
-
On screen initialize:
Set WebViewer.WebViewString to JSON that includestitle,load, andsortBy. -
To add a row:
Format a JSON string like:{ "add": { "Date": "2025-04-10", "Weight": "70.5" } } -
To save the table:
Send{ "save": true }→ then captureWebViewer.WebViewStringand write it to a file. -
To restore:
Read file content → setWebViewer.WebViewStringwith that JSON. -
To export CSV:
Send{ "exportCSV": true }→ then save the result.
Feedback & Credit
If this helps you, feel free to build on it and share your own versions!
Big thanks to ChatGPT for help building the HTML side of the system.
=============== so far for ChatGPT
As you can see ChatGPT is very pleased with itself, but actually there were quite a few hard to find bugs, but finally it came out well I think. I can now start the real app I wanted to make. Have fun with it!
