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:

Select the Label component from the lest bar:

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

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

Now select the List Box component from the left bar:

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

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

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:

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:

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

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

Happy scripting!