Google Sheets Reader Demo

Load a Sheet

Spreadsheet ID*

Sheet name*

Output

Page Notes

Using a client-scripting-only host like Neocities makes it infeasable to pull information from a traditional database. Fortunately, for basic use-cases, it is possible to pull data from Google Sheets. This enables you to update content without committing any changes to your site! All you need is a Google account.

There are many use-cases for this, such as update logs, status trackers, or user comments.

Setup

Once you have a Google account and have made a spreadsheet, you'll want some data. There's not an explicit way to define a table in Google Sheets like there is in excel, but if you just treat the first row in your page as the column titles and all following rows as data, that will work. To set a data type for a whole column, select the column then choose a format from the Format menu at the top. This page pulls by default from the "Example" page of the GroundedWren General spreadsheet I've set up.

Before your website can access your spreadsheet, you need to make it public. Once you do, your website can request the spreadsheet's data with a HTTP GET request.

You can make your spreadsheet public by clicking the "Share" button in the Google Sheets UI, then generating a view link.

To access your spreadsheet's data, you just need its ID. This can be found in the URL you use to access it on docs.google.com - it's a long alphanumeric string which comes just after "/d/" and ends just before another "/".

Using this component

To use this gizmo, you just need the googleSheetsReaderGizmo JavaScript file listed below. Once you've included that script on your page, you will have access to the GoogleSheetsReader class in GW.Gizmos. The class is initialized with your spreadsheet's ID and the name of the page you want - it will automatically handle parsing your data columns apart. You can see the code for this page using the component in googleSheetsReaderDemo.js linked below.

Files

Add these files (other than the *Demo.* files) to your page to get started!

Markup

googleSheetsReaderDemo.html

Scripts

googleSheetsReaderGizmo.js
googleSheetsReaderDemo.js

Styles

googleSheetsReaderDemo.css