How to Create a Dynamic Web Admin Dashboard with Appscript | Pull Google Sheets Data to HTML Tables

HTMLDYAMIC is the third step of this series and the one that closes the loop. The first version displayed a sheet. The second let you pick between sheets. This one adds the other half: a data entry form that builds itself from the same columns, so the app both collects records and shows them.

One dropdown drives both

Choose a sheet and press Fetch Data. The entry form appears with a field for every column in that sheet — no field list anywhere in the code. Load the same sheet on the dashboard and the table appears with those columns too. Submit a record on one side and it is in the table on the other.

Growing a form is typing a header

An empty sheet fetches an empty form, because there is nothing to build from. Add a header called ID and the form has one field. Add name, number and the rest and they appear in order. There is no cap on how many fields a form can carry, and different sheets can have entirely different shapes.

Exports on the table side

Copy, Excel, PDF and Print all work on whichever sheet is loaded, so a class list, a stock list or a day's entries can be handed over in whatever form the person asking wants.

Two things the walkthrough tells you to do

Keep the spreadsheet's sharing set to Restricted — the web app reaches the data through the script, so the sheet itself never needs to be open to anyone. And when you press Run during setup, a cannot read properties error appears; it is expected at that point, so carry on to New deployment rather than trying to fix it.