Using the List Box component of the Google Apps Script GUI Builder

After the recent post Create custom forms with GUI Builder and Google Apps Script some people asked how to manage a List Box component inside the GUI Builder. Unfortunately GUI Builder doesn’t allow you to visually add items to a List Box component.
In this post I’ll try explain how to manually populate a List Box component created inside the GUI Builder by using Google Apps Script.
The first thing to do is to load the GUI Builder, for simplicity I’ll use the one created in the previous post: Create custom forms with GUI Builder and Google Apps Script:

Using the List Box component with the GUI Builder 11

Select the Label component from the lest bar:

Using the List Box component with the GUI Builder 2

Drop the Label component inside the Absolute Panel of the Form Panel:

Using the List Box component with the GUI Builder 2

Using the right bar change the Label text to: “Gender:”:

Using the List Box component with the GUI Builder 3

Now select the List Box component from the left bar:

Using the List Box component with the GUI Builder 4

Drop the List Box component inside the Absolute Panel of the Form Panel next to the newly created “Gender:” Label:

Using the List Box component with the GUI Builder 5

Using the right bar change the ID and the Name of the List Box component to: “genderListBox”:

Using the List Box component with the GUI Builder 6

You can now save the interface and return to the Script Editor. Our List Box will be by default empty. To populate it we have to manually add the items needed. Replace the myFunction function with the following code:

function myFunction() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("My Custom Form"));

  // Populate the List Box
  var genderListBox = app.getElementById('genderListBox');
  genderListBox.addItem('Male');
  genderListBox.addItem('Female');

  SpreadsheetApp.getActiveSpreadsheet().show(app);
}

As you can see to populate the List Box we have to load the component using the getElementById method, from there on we can simply reference the component by using the variable genderListBox. Adding items to the the List Box is just the matter of using the addItem method and passing as parameter the name of the item to add, in this case “Male” and “Female”. Run now the myFunction function. You should see inside the Spreadsheet document the new interface including the List Box component:

Using the List Box component with the GUI Builder 8

The only thing missing right now is the ability to save the List Box selection to the Spreadsheet document. To do this just replace the doPost function with the following code:

function doPost(theForm) {
  Logger.log(theForm);
  var app = UiApp.getActiveApplication();
  var userFullName = theForm.parameter.userFullName;
  var userGender = theForm.parameter.genderListBox;
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().appendRow([userFullName,userGender]);
  app.close();
  return app;
}

As you can see the selected value is passed by the form and we can reference it by genderListBox parameter, that if you recall is the ID associated to the List Box component. Now run again the myFunction to load the interface and fill it with some sample values and hit the “Submit” button:

Using the List Box component with the GUI Builder 9

If everything is working you should see the Spreadsheet document being populated also by the selected List Box item’s value:

Using the List Box component with the GUI Builder 10

If you need additional information or you think that some topics deserve attention, just reply to this post all ideas are welcome!

Happy scripting!

Consultant, Lean Thinker, Agilist, Technology Lover. Dream: Being worth a TED talk. Project Manager in a wide variety of business applications. Particularly interested in innovation projects, as well as close interaction with costumers.

Tagged with: , ,
Posted in Google Apps Script, GUI Builder
6 comments on “Using the List Box component of the Google Apps Script GUI Builder
  1. Dan says:

    Hi Marcello – I found these last 2 tutorials very helpful. I’m trying to use checkboxes now. When a checkbox is checked and you press submit, I would like it to input a value (“Yes” for example) into the spreadsheet. Do I have to use a handler for this? Thanks!

  2. Diego says:

    Hi Marcello:
    I follow your tutorial and made a GUI with only a ListBox and a Submit Button.
    My idea (for now) is to fill the list with names and when you submit the form it should save “name” and “hour” into spreadsheet.

    I use Date() and Utilities.formatDate(hour, ‘GMT’, ‘HH:mm:ss’) to get the time

    Works ok, just one issue: I always get “undefined” for ListBox. What am I doing wrong? Why I can get the value of ListBox?
    Is this working only for Google Apps accounts or should run for everyone?
    thanks!

    • Hello Diego,
      when you get undefined please double check to have assigned a name and an id to the list box component. A trick is also to log the parameters passed to the doPost function, if you check this sample you will find something like:
      Logger.log(theForm);
      Basically here I’m logging the values passed by the form, you can access the log using the View -> Logs.. menu of the script editor.

  3. Doug Willis says:

    Thanks for the post. Just wondering if it was possible to populate a Listbox with a call to a datasource (for each). Specifically I am interested in getting all users from my Google Apps domain. If I could achieve this I could then build a workflow to route information from a form to a particular user.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>