This document will show how to build a simple user interface (UI) to browse into your Google Document list with the ability to open documents or to send to yourself pdf copies of them.It makes use of powerful Google Apps Script capabilities and shows the responsiveness of the user interface.This example is primarily designed to run from a Spreadsheet but you’ll see that it can be easily adapted to function as a standalone web application (see ** in the script at beginning & end of the doclistUI function).

The first thing we do in this Spreadsheet version is to create a single item menu to start the script without needing to open the script editor.

the variable ‘email’ is defined outside the function so that it becomes available to every function in the script. In a way it might be considered as a ‘global variable’.

Building the User Interface :

Before calling UiApp.createApplication() we call the Doclist method to populate the folder list from which we will begin to navigate.Then we determine the main window size and color and draw all the labels, buttons and lists that we are going to use. The style attributes that we use to define margins and other display parameters are ‘browser dependant’, meaning that the resulting display might be different in Chrome, Firefox or any other browser you use; all other methods are executed on server side and are therefore fully guaranteed to work the expected way. Note that some of the labels and buttons are made invisible in this function as they will be useable later in execution.

Using handlers to make the script live :

What would be a UI if we couldn’t interact with it ?Server handlers are an easy way to assign functions to buttons or to any other UI element, they communicate with the server and trigger some functions. For some special cases it can be more efficient and fast to use Client side handlers if the actions we need to trigger are simple.In this example we use a client handler to show / hide a text , the content of this text being defined in a server function somewhere else. It makes the process instantaneous and gives the user a nice feeling of responsiveness.The first function call in the serie is called ‘click’ as it is used to populate the second list in the UI with folders contents. This function shows the use of so called ‘callbackElements’, i.e. data sent by the UI to the function as an event parameter (in short e.parameter).Every e.parameter can be addressed by its origin name : in this first occurrence e.parameter.Flbrefers to the value returned by the folder list selection that was populated in the UI construction itself. From that point we can show the folder’s content (the actual document list) and this second list will become our handler source for the coming events.

Showing and using data :

Once we have chosen a document in our list we can decide what to do with it. Depending of its type we could open it or send it by email as a pdf attachment.Since every necessary handlers where already defined in our main UI definition function we only have to recall the buttons and labels and make them visible to use them.We’ve also make use of special items called ‘hidden’ to store data usable by each function. Since it stores only strings, every necessary data item is converted to string when writing and eventually converted back to an array when reading using toString() and split() respectively.

Converting and sending documents :

This last function converts spreadsheets and text documents to pdf and sends it by mail to the user’s adress (collected in the very beginning of the script : Session.getUser().getUserLoginId() )If this option isn’t available the concerned buttons are simply hidden so no further precaution should be taken to trap errors.

Conclusion :

This example has shown how easy it can be to get a working application using Google Apps Script. You probably noticed a lot of Logger.log commands that are commented by a //, these can be used if you feel like examining data through the script execution. The logger is indeed a precious tool during app development and debugging but it’s probably a good practice to neutralise them when everything if working fine.

Complete code in one piece :

This is shown in very small typeface to take the less possible space. Just copy and paste in the script editor (the size will be normalized by the script editor).