Skip to main content

Document Sidebar and Menus in Google Docs

For a long time I've been saying that Google need to make sure that their left hand knows what the right is doing. There are pockets of innovation in some products that are notably missing from other products. And whilst I don't advocate insisting that each department should consult with each other department before a beautiful carbuncle can be brought into the world, it's nice when you feel that different Google teams are at least on speaking terms.

One example ( and there are dozens and dozens ) of innovation insularity is the features that are in a Google Spreadsheet. With a little code and ingenuity you can add menus, and pop ups and whole new interfaces to a spreadsheet, but this can't be done in a Google Document. "Why not?" you might ask. And rightly so.

So, I was very pleased when Google announced at Google I/O ( their big developers conference happening right now ) that the features from Spreadsheets were being added to Google Documents. Take a look at this document. It has custom menus and a custom sidebar.


… what you could use those menus for. Imagine what content, or links, or even more clever stuff you might have in the sidebar. It could be pre-created content, by you the lecturer or it could be content that is derived from whatever you are typing. The menus might remind you when the essay deadline was, or email the document to random peers. I've already made some code to save a Google Document to Blogger that saves the images into a publicly hosted GDrive folder. This article was written in Google Docs, not Blogger which is a bit shonky nowadays. Imagine how easy it will be to add a "Save to Blogger" menu item. This is exciting stuff.

Except hold your excitable horses.

The only problem is, that the code to do the things you can do in a Google Spreadsheet is completely different to the code you need to do to do it in a Google Document. The code below shows how to add a menu and a sidebar to your Google Document ( go to the Tools >> Script Editor menu and paste it in, then run onOpen. You will need to authorize it ).

function onOpen() {

  // Display a sidebar with custom UiApp content.

  var uiInstance = UiApp.createApplication()
  .setTitle('My UiApp Sidebar')
  uiInstance.add(uiInstance.createLabel('This side bar can contain content that is pre-defined by the lecturer.'));
  uiInstance.add(uiInstance.createLabel("It might contain some regular links to useful stuff.

  uiInstance.add(uiInstance.createAnchor('It might contain a link to plagiarism', ''))
  uiInstance.add(uiInstance.createLabel("The really interesting part, for me, is that it might contain dynamically generated links to stuff of relevence to what you are writing. "))
  uiInstance.add(uiInstance.createLabel("What if a document had links to required reading, or a link to your mentor?"))
  uiInstance.add( uiInstance.createImage('').setHeight(100).setWidth(100))


.createMenu('My Menu')
  .addItem('Do something...', 'do_something')
  .addSubMenu(DocumentApp.getUi().createMenu('My Submenu')
              .addItem('One Submenu Item', 'do_something_else')
              .addItem('Another Submenu Item', 'do_nothing'))

function do_something() {
  DocumentApp.getUi().alert("This could do something")


function do_something_else() {
  DocumentApp.getUi().alert("This does something too. It could go and get live weather data and insert it into the document. Ha ha!")
  Browser.msgBox("This does something too. It could go and get live weather data and insert it into the document. Ha ha!")

function do_nothing() {

  DocumentApp.getUi().alert("This does something. It could be anything. It might mail this doc to someone, or add it as a reference to a spreadsheet.")


I tried hacking the code into a Spreadsheet. It did sort of work. The sidebar appears as a popup dialog, but the menus don't work at all.

Whilst initially really encouraged that Google were "pulling the strands together" at last and making cool behaviours consistent across their product range, I am a little disappointed that it isn't completely idiot proof ( I have a stakeholder interest in things being idiot proof ).

My guess is that this is a sign of things to come, that the process of innovation consistency is just starting and one day I will be able to add Apps Script to my Drawings and Presentations and whatever else from Google.


  1. Tom,

    Thanks for sharing the script. I'm kind of new at this and was wondering if you would share how to have the sidebar open for every new doc.?.



  2. The joomla mobile version is interesting to consult with each other department before a beautiful carbuncle can be brought into the world, it's nice when you feel that different Google teams are at least on speaking terms.

  3. African languages are difficult in nature. I am sure no body is known the african language through superiorpaper while living in this south asian continent because there aim is to learn English.


Post a Comment

Popular posts from this blog

Inserting A Google Doc link into a Google Spreadsheet

This article looks at using Apps Script to add new features to a Google Spreadsheet.

At the University of York, various people have been using Google spreadsheets to collect together various project related information. We've found that when collecting lots of different collaborative information from lots of different people that a spreadsheet can work much better than a regular Google Form.

Spreadsheets can be better than Forms for data collection because:

The spreadsheet data saves as you are editing.If you want to fill in half the data and come back later, your data will still be there.The data in a spreadsheet is versioned, so you can see who added what and when and undo it if necessaryThe commenting features are brilliant - especially the "Resolve" button in comments.
One feature we needed was to be able to "attach" Google Docs to certain cells in a spreadsheet. It's easy to just paste in a URL into a spreadsheet cell, but they can often all look too si…

Writing a Simple QR Code Stock Control Spreadsheet

At Theatre, Film & TV they have lots of equipment they loan to students, cameras, microphone, tripod etc. Keeping track of what goes out and what comes back is a difficult job. I have seen a few other departments struggling with the similar "equipment inventory" problems.

A solution I have prototyped uses QR codes, a Google Spreadsheet and a small web application written in Apps Script. The idea is, that each piece of equipment ( or maybe collection of items ) has a QR code on it. Using a standard and free smartphone application to read QR codes, the technician swipes the item and is shown a screen that lets them either check the item out or return it.

The QR app looks like this.

The spreadsheet contains a list of cameras. It has links to images and uses Google Visualisation tools to generate its QR codes. The spreadsheet looks like this.

The Web Application The web application, which only checks items in or out and should be used on a phone in conjunction with a QR cod…

Getting CSV data into Google Spreadsheets Automatically

Today I was attempting to get CSV data from Estates' Alarm System into Google Docs as a spreadsheet. There were two ways to try and achieve this...

Create an AppScript in Google that pulled a .CSV file from a web serverWrite a (python) script on the local machine that pushed the data into Google Spreadsheet by using the API. The Google AppScript Way As you know, my JavaScript ain't great, but it initially looked like it was going to work... Some code like this below and using the Array to CSV functions from here, looked promising.

function encode_utf8( s ){
//This is the code that "I think" turns the UTF16 LE into standard stuff....
return unescape( encodeURIComponent( s ));

function get_csv(){
var url =' BA Alarms.csv';// Change this to the URL of your file
var response = UrlFetchApp.fetch(url);
// If there's an error in the response code, maybe tell someone