In this demo we’re going to check out a few neat options in Hyperdeck and string them together to pull data from Google Sheets and into a document. You might like to have the full working example open alongside this walkthrough.
Next we’re going to use an External Libraries component to load a library built for pulling data from Google Sheets, Tabletop.js– this is available from CDNJS, so we’ll plug that in to our component, making it available to the rest of our workbook. And just for fun, while we’re adding external libraries, let’s pull in Handlebars.js so that we can separate our presentational logic from our data manipulation just a bit. You can experiment with other organizational schemes, other template engines, or other utility libraries like Underscore. Just keep in mind that jQuery is built in, and you may have difficulties if you try to reuse the
With those libraries loaded, we’re ready to fetch some data and put it to work. We’ll add a data component to hold the information, and a text component to hold the spreadsheet key (for convenience and reusability’s sake). The data used for this example is held in this Google doc , a copy of this source data. It’s necessary to make a copy because Tabletop.js only works with Google docs that are published. This is important to remember when adapting this example to your own needs. Here’s a screenshot to help you find the relevant options:
And once the document is published, you’ll need the spreadsheet key. Here’s our example again, in the Publish dialog, with the key highlighted:
This goes in our component named
loader, which gets the
spreadsheetKey and plugs it into Tabletop.js to load data from the spreadsheet into our data component,
Another application might be to load a visualization library (e.g., d3.js) and build some charts, or perhaps an interactive map. In fact, you might want to make a copy of the demo workbook and do exactly that! And if you build something neat off of this example, we’d love to hear about it.