How to integrate your HTML/JS with Google Apps Script

by +Cesar Anton 

@reicek

Have you ever noticed how complete and easy to use are the APIs for Google Apps Script? You're WebApps, scripts and library's works like a charm! But then you realize that you have 4 "practical" ways to use them (well, 3 1/2):

Way 1

Stand-alone WebApp: Which forces you to use create the UI from within Apps Script, it's ok for small WebApps, but it's not really practical for a big project.

Way 2

Embedded on a Google Site: It can be used to develop WebApps and Sites really fast and with relative ease, but not having proper CSS support and having to deal with caja-sanitization it's just too limiting for most developers taste/needs.

Way 1/2

As a library for another Google AppsScript (GAS): Being able to use a script as a library for another script It's something I love about GAS, makes it very easy to recycle code, your library works just like the ones from the APIs, with auto complete and everything, but its not a "full" use on itself...

Way 3

But let's focus this time on the 3rd way to use GAS called Content Services, which it’s an (Experimental) class that lets you use Apps Script to process and deliver data in response to external calls, it can return: Atom, JSONP, RSS, Text or XML For your Web Pages or WebApps and since they can communicate with most Google Services, it can be a very nice bridge. Also, unlike public hosted HTML/JS/CSS, GAS hides your code from your clients.

Even if you find the adequate Javascript APIs for your needs, using some GAS helps processing some of the information on the server side making the performance more consistent across different devices or you can also sacrifice some latency and process most information on server side to enhance bandwidth use.

Google Big Query to analyse a 10 Gb Databasa with 15 years of company records and then just use GAS to pass the results inside a JSONP object to your Javascript/HTML will only have to worry about drawing the results in a chart or text, all in seconds even from a tablet or mobile. As an extra, you can host such HTLM5/Javascript/CSS3 with Google Drive for free!

Here is a very simple example to get you started or as a reference that query's how many unread mails the user has, to keep it simple, it will pop up the result in a Browser Alert.

1.- Create an App Script with the following code:


2.- Save a version and publish it, it must be:

* Executed as the user running the script.

* Available to anyone.

Or simply use the example I made (it already includes a free GNU license!):

https://script.google.com/macros/s/AKfycbxgcJWTRh2JCQGVmuiDOJ72rxJ54xOL_9BDzmlyoP8gHxBDWvY/exec

Note that if run directly, it will output: "undefined(0)" (assuming that you don't have new-emails) since there is no padding embedded on the request.

3.- To call the servlet (and pass it the proper paddingnside a public HTML hosted on your GoogleDrive add:


You can see it working on this gDrive HTML hosted webpage:

https://googledrive.com/host/0B_RClkFMLkcpVEVzODBrLXktdU0/live_example.html

Note: The prefix alert, can be changed to the name of any Javascript function you want to call and pass the information from App Script, we are using alert since it doesn't require to write an additional script for this example.

Also keep in mind that for this to work, the user loading the page must have previously given access to the script to his/her Gmail, this must be done loading once the public URL of the file. OAuth tokens for the Javascript code won't work for this, but you can make the link for this app script to show along the OAuth login request in your HTML (but unlike OAuth it will only be needed once per user, even from different devices).

Happy Coding!

Special thanks to +Riël Notermans 

For his help on updating this article, by reporting a problem (and a solution) due to an update with the MIME type.