Using Google Docs (and more!) with Hyperdeck

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.

First let’s start with some terms and basic methods. In Hyperdeck, your document is built from components, which can contain plain text, html, javascript, or even images or sound files. You could organize your project a lot of different ways, but we’re going to make use of two javascript methods available via the global Hyperdeck object to keep things neat and compartmentalized: Hyperdeck.Get(componentName) and Hyperdeck.Set(componentName, contents).

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 $ variable.

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:

Google docs menu

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:

Where to find the spreadsheet key

This goes in our component named spreadsheetKey. Then we’ll set up a javascript component, loader, which gets the spreadsheetKey and plugs it into Tabletop.js to load data from the spreadsheet into our data component, data1.

Now that we have a local copy of the data, we can do whatever we want with it! For purposes of this demo, we’ve created another javascript component that uses Handlebars.js to render a rudimentary list of hyperlinks to the representatives’ websites, with some data made available for filtering the list and an example filter button.

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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s