<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1870732089876948&amp;ev=PageView&amp;noscript=1">

Writing My First Google Doc Add-On

A Blank Page for Writing Your Own Add-On | Cloudbakers

About a year ago, Google announced the ability to write your own Google Document Add-Ons, finally providing vendors with the blank page they needed to develop their own awesome tools. Some awesome add-ons quickly emerged; LucidChart let you embed diagrams right into your document and HelloSign came out with the ability to sign Google Documents. With so many vendors cranking out useful tools, I found myself ready to make my own, tailored to Cloudbakers' specific needs.

A lightbulb overhead: Idea for an Add-On

I had always wanted an excuse to write an internal Google Doc Add-On, and a few weeks ago the opportunity landed right in my lap. At Cloudbakers, we try to make it a habit to add nicely formatted headers and footers to documents when sending them to clients or internally. Last Monday, I was sending 4 separate documents to clients that needed a set of headers and footers. When I started copying and pasting the logo from a template I made to the document I was sending, I realized that I should make a computer do this work for me (a thought I have often).

To start, I wrote a script to take an image I had uploaded to Google Drive and insert it into the header of my document.

Cloudbakers Go-To Header | Cloudbakers

Quick Tip: the call


allows the program to access a document when the user invokes the Add-On.

After that, I wanted to add the table to the footer. We use an old-school table to present three pieces of information:

Cloudbakers Go-To Footer | Cloudbakers

Instead of trying to recreate the table in App script, I decided to copy a pre-existing table from the template I was using. That way, if we want to add to the table, it’s a very easy update - no code changes necessary.

Post hoc fun: Testing and deploying

After that, I was essentially done. I went through the built-in testing process which allows you to pretend that your Add-On is installed, walks you through the oAuth dance, and tests it out! Neat!

You can even select different versions of your code and try different levels of authorization.

Thorough Testing of the Add-On | Cloudbakers

Once I tested it, I installed it on our Domain. For some reason, provisions of Google Doc Add-Ons are done through the Chrome Web Store, which can be confusing for new users. Beware, the style guidelines that Google mandates are very strict and unrelenting. I had some icons saved up from deploying Chrome Extensions that I was able to use.

Here’s a video of my Add-On in use:

Header/Footer Add-On | Cloudbakers

Overall, it was a very pleasant experience in developing, testing, and deploying the Doc Add-On. Here at Cloudbakers, we’re looking forward to making more Google Doc Add-Ons for ourselves and our clients. Why copy and paste the same information when you can make a computer do it for you?

New Call-to-action

Originally published on January 11, 2016

If you enjoyed this post, please consider sharing

Want more tech tips?
Subscribe to our IT Superhero Newsletter!