Render Contents of a Google Sheet in HTML Elements
So Easy!
Alex is having fun playing around with Instagram ads for Food Pedaler. Last week he asked if I could put up a splash page with a promo that folks could click through to order.
He sent me a picture of what he was going for, and asked me if I would like a transparent png. That certainly would have been easier, but not a lot of fun. It’d also be quite a pain to update for both of us. I told him we were going to make something dynamic that he could update whenever he wanted. (Looking through our messages and seeing his original, I like it. He can update this any time now!)
Set Up Your Page
To start out, I grabbed a domain I‘d been sitting on, and followed these easy steps to put up a site quickly and practically free. We only needed a single, static page, and no more than a mobile view. You could really run with the possibilities here, even getting information from your user and basically using Sheets as a database. I’ll leave that up to you.
I set up a basic HTML template, added Bootstrap and our fonts.
This is it for my Body:
Get the Sheet Ready
I love messing with Google Products. One my first useful apps was a job application process, with automated sorting, email/text responses, and scheduling. This was done completely with Google Apps Script (and Twilio). Ever since, whenever a problem arises, I like to create solutions with these powerful, simple, cloud-based tools. Here we had a perfect job, sharing a sheet with Alex that enabled him to update his splash page instantly. HTML tags in the sheet’s cells are rendered, and I added some classes and ID’s to the CSS to allow him to style his promos further.
Put the Power of Google in Your Head
There are a couple guys way more advanced with code at our co-working space. Luckily, the first friend I asked about this had done nearly the same thing before for a client. Score! I had a jumping-off point.
First you need to get an API key to authorize requests for Sheets. Additionally, at least in my case, the Sheet needs to be publicly available.
In the code below, the first script tag is necessary to make the Google API available to your application. The error logging came in handy; I actually did some of my first real-life debugging in the browser with another friend during this project. Once we get the row back in an array, those elements are passed into a function, assigning them to their corresponding classes with jQuery.
This is my Head:
And that’s all!
Have you made anything useful with Google API or Google Apps Script?
