How to Build Your Own Google Apps Script

Posted on Updated on

appsscriptFor a few years now Google has allowed users to create their own scripts to extend the capabilities of Docs, Forms, Drive,  Sheets, Calendar and even Gmail. Google Apps Scripts can be used for small projects, such as creating custom functions in Sheets, or more advanced projects that can be published as Add-Ons that anyone can install, like this one. They can also be deployed as  full-fledged web apps that anyone can run from a Form or Doc, for example, that has them enabled.

Today we are going to walk through the steps to build your own simple Apps Script that runs on Google Docs.  It’s called SelfRubric, and while it is not much of a rubric, it will show you that with very little coding (or none, if you decide to cut and paste), you can create your very own Add-on, that will live on your Docs menu.

**Note: Apps Scripts are built with JavaScript and usually some HTML/CSS, so make sure you are at least familiar with these before continuing **

What will it do?

SelfRubric will open up a simple side panel when a user selects it from the Add-On Menu. It will give the student some options to rate their writing from 0-5 on simple attributes like conventions, ideas, etc. Then it will inject a summary of their self-evaluation into the doc itself. We think it could be a great little add-on that, if built out, could be of use to many teachers and students who want to encourage self-reflection.

Screen Shot 2015-12-02 at 3.42.24 PM

So let’s get started. You can probably get away with building this example, and possibly modifying it if you DO NOT have any programming experience, however, you might find yourself stuck and not sure why something doesn’t work if you don’t, at least, have the basics down.

Start here

There are a few ways to start, but today we’ll start by simply creating a new blank Google Doc. Name it something that will stand out in your Drive, such as My First Script

Next select Script Editor from the Tools Menu. Now get acquainted with the interface. Google did a good job of keeping things both easy to navigate and powerful. Watch this video below from a couple of Google developers if  you want to get the long story behind the UI, and then go down their rabbit hole on your own (there are plenty of videos).

Screen Shot 2015-12-02 at 3.54.50 PM

Go ahead and erase the first default line. We’ll be using the Code.gs file for the doc and the related functions. Don’t forget to name the project, in this case, SelfRubric, unless you have something better in mind.

Now create new HTML file: File > New > HTML

Screen Shot 2015-12-02 at 4.02.21 PM

Name the HTML file and remember the name (We’ll need to make sure it matches our script). I’ve named mine rubric. The file extension will automatically be added.

The Code 

Head over to GitHub to our repository for this project to grab the Code.gs code: https://github.com/acoecorelearning/SelfRubric/blob/master/Code.gs

Go ahead and copy it, and paste it into the appropriate file in your Apps Script window. (Brownie points for transcribing it!)

Good. Now switch over to the rubric.html file. and do the same with this file:

https://github.com/acoecorelearning/SelfRubric/blob/master/rubric.html

Paste that one into the rubric.html you created. If all works well, that is all you need. Just make sure that if you named your HTML file something besides rubric.html, you will have to change your Code.gs  on this line: var

html = HtmlService.createHtmlOutputFromFile(‘rubric’)

Replace ‘rubric’ with your own file’s name.

Now save both files by clicking the anachronistic Floppy Disk icon.

Back to the Doc

Head back to your My First Script doc and write something. It actually doesn’t matter what you write, or if it’s blank. The script will work regardless. It will just feel better that way.

Reload the page to make sure your script loads. You should now see it on the to menu:

Screen Shot 2015-12-02 at 5.26.05 PM

Click on the name Self Rubric and select Launch Rubric. (See if you can see what part of the code made those menu items appear. )

If this is the first time you run this, you will need to Authorize the script and Allow it to see your Drive:

Screen Shot 2015-12-02 at 5.29.24 PM

Now you should see the panel appear. Go ahead and enter some values into the text boxes. and click Submit.

A Table should now be inserted into your document, along with a message displaying a total out of 20 points.

And that’s it!

Next steps

To try this script out on other documents, click on Publish > test as add-on. Then Select a Doc from your Drive.

Make sure your options look like this:

Screen Shot 2015-12-02 at 5.33.07 PM

Screen Shot 2015-12-02 at 5.33.56 PM

Click Test and this will open the Doc in question. Take a peek under Add-ons, and you should see yours there! It should behave the same.

Other next steps:

Obviously, this is not a complete and deployable script as it stands now. It needs to handle different cases, like a user entering values that are not numeric, or that are are greater than 5, for example. Also, the rubric is simple and really should be something that a teacher builds on their own as part of the interface. But the proof of concept is there. Another enhancement would be to have the script generate an email using that API.

Take a tour of Google’s extensive documentation and see other samples and quick tutorials.

Have something to say?

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

WordPress.com Logo

You are commenting using your WordPress.com 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