Playing with Google Docs sidebar using Google Apps Script

The Google Apps Script team have recently announced a host of new features. The three that caught my eye were:

  • Script editor added to Google Docs and Forms
  • Addition of the Forms Service which lets you programmatically manipulate forms
  • Extending Google Docs functionality using Custom menus and user interfaces including creating custom sidebars

The last one in particular looked interesting. Having a scriptable area to supplement the main control area immediately made me think about resurrecting tools like the citation robot ‘Igor’ or supplement Google Spreadsheets on the fly graphs or extra info from 3rd party sites.
As Tom Smith (University of York) has discovered sidebar integration in Google Spreadsheets isn’t available yet, but the word from Google I/O session announcing this feature (video not available yet) is it’ll be here in a couple of weeks (see comments thread here).
Word Navigation PaneSo, like Tom, to kick the tyres on the Google Docs sidebar functionality I set myself a small project. One of the features of MS Word I like is the ‘Navigation Pane’, in particular for jumping around a document using section headings. Given this operates from a sidebar it seems an ideal candidate to try and replicate.
Looking at the Google Apps Script documentation we can see that we can getLinkUrl() from a TableOfContents within a Google Doc. Using an example from stackoverflow it’s easy to extract the link urls using:

 var tocDat = {};
  var doc = DocumentApp.getActiveDocument(); //get active document
  for (var i = 0; i < doc.getNumChildren(); i++) { // loop all the document elements
    var p = doc.getChild(i);
    if (p.getType() == DocumentApp.ElementType.TABLE_OF_CONTENTS) { // if the element type is a TABLE_OF_CONTENTS extract item links
      var toc = p.asTableOfContents();
      for (var ti = 0; ti < toc.getNumChildren(); ti++) { // looping over each ToC item
        var itemToc = toc.getChild(ti).asParagraph().getChild(0).asText();
        var itemText = itemToc.getText();
        var itemUrl = itemToc.getLinkUrl();
        tocDat[itemText] = itemUrl; // create object array
      }
    }
  }

It’s worth noting that to get this requires the user to have already inserted a table of contents into the document. There is an open issue ticket to do this using script. Something else I was unable to do was return what level the heading link was for (e.g. Heading 1, Heading 2 etc). To do this I had to loop arose the entire document, which you can see in the final project code.
Here is a copy of the example document with the code included. Because no need edit rights to run custom menus you’ll need to File > Make a copy to get the ‘Custom’ dropdown menu option.

custom menu

The first time you select Custom > Show Document Map you get a big scary authentication window (another one of the new features announced was a pilot of a new authentication flow). Once you’ve ‘Ok’ you can run Custom > Show Document Map which launches the sidebar:

doc map

At this point you are probably asking where are the links in the document map. For some reason the caja sanitisation is stripping the anchor link. Regardless of this, if you dig around the page source you’ll see as part of the sanitisation links target _blank which will open a new browser tab.

href target blank

In the sidebar documentation it says that communication with other Apps Script services is possible, which might be a way to hook the navigation functionality in, but as I can’t find any methods to change document position it looks like for now it’s a lost cause.
So while I’ve hit a dead-end having the sidebar, particularly when it reaches Google Sheets, is a big bonus but as always it’s important to be aware of the limitations. I’m looking forward to what others come up with.
PS Must try the programmable forms next (it might be an opportunity to update EventManager v3)

chevron_left
chevron_right

Join the conversation

comment 9 comments
  • Playing with Google Docs sidebar using Google A...

    […] The Google Apps Script team have recently announced a host of new features. The three that caught my eye were: Script editor added to Google Docs and Forms Addition of the Forms Service which lets …  […]

  • Saqib ALi

    This is interesting use case.
    So you are looking for a way to set the focus to a location in the document?

  • Tom Smith

    By the way, the old MS Document Map was the ONLY thing I miss from Word. Loved it…

    • Martin Hawksey

      Nice try 😉 Looks promising from the clip Saqib shared, hopefully the API will include something like setCursorFocus

  • Tom Smith

    Ah +Saqib Ali… THANKS… that’s brilliant..

  • Rafaël Jafferali

    First, thank you very much Martin for your work, this is very useful indeed and I had no idea that Google Apps Script could be used this way!
    Until Google extends its API in order to allow us to set the cursor position programmatically, I think I have found a practical, if inelegant solution to our problem.
    First, try the modified Google Apps Script on https://docs.google.com/document/d/1gFZEoqPyL04qjcPKD9t_d9Qz8eNCFztBO-ie-v8UcN4/edit?usp=sharing. I have slightly modified the original source because it didn’t seem to work when several headings have the same title.
    Then, the trick is to use an userscript in order to do what Google doesn’t allow us to do. Try to install http://userscripts.org/scripts/show/172738, which you can use with Tampermonkey (a Chrome’s extension). You could probably also use Greasemonkey for Firefox but I haven’t tried it.
    I hope it helps!
    Rafaël

Comments are closed.

css.php