How to Add a Sidebar in Google Docs

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.

Imagine...

… 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')   .setWidth(250);   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', 'http://www.york.ac.uk/integrity/plagiarism.html'))   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('https://si0.twimg.com/profile_images/3457614642/d6b665b4c213fe02ec28dc3e94db6e0b.jpeg').setHeight(100).setWidth(100))    DocumentApp.getUi().showSidebar(uiInstance);   DocumentApp.getUi()   .createMenu('My Menu')   .addItem('Do something...', 'do_something')   .addSeparator()   .addSubMenu(DocumentApp.getUi().createMenu('My Submenu')               .addItem('One Submenu Item', 'do_something_else')               .addItem('Another Submenu Item', 'do_nothing'))   .addToUi();   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!")   /* THIS DOESN'T WORK   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.

How to Add a Sidebar in Google Docs

Source: http://collaborative-tools-project.blogspot.com/2013/05/document-sidebar-and-menus-in-google.html

Share this post