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

After the recent post Using the List Box component of the Google Apps Script GUI Builder some people asked this time, how to manage a Check Box component inside the GUI Builder.
In this post I’ll try explain how to handle Check 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: Using the List Box component of the Google Apps Script GUI Builder:

Using the Check Box component with the GUI Builder 1

Select the Label component from the lest bar:

Using the Check Box component with the GUI Builder 2

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

Using the Check Box component with the GUI Builder 3

Using the right bar change the Label text to: “Driving License?”:

Using the Check Box component with the GUI Builder 4

Now select the Check Box component from the left bar:

Using the Check Box component with the GUI Builder 5

Drop the Check Box component inside the Absolute Panel of the Form Panel next to the newly created “Driving License?” Label:

Using the Check Box component with the GUI Builder 6

Using the right bar change the Text of the Check Box component to: “”:

Using the Check Box component with the GUI Builder 7

Always using the right bar change the Name of the Check Box component to: “CheckBox1″:

Using the Check Box component with the GUI Builder 10

Now we have to remove the border of the Check Box component, to do so, using the right bar, set the “Border Width” to 0:

Using the Check Box component with the GUI Builder 9

The updated application should look like the following:

Using the Check Box component with the GUI Builder 8

You can now save the interface and return to the Script Editor. Replace the doPost function with the following code:

function doPost(theForm) {
  var app = UiApp.getActiveApplication();
  var userFullName = theForm.parameter.userFullName;
  var userGender = theForm.parameter.genderListBox;

  // Handle the Check Box
  if(theForm.parameter.CheckBox1 != undefined) {
    var drivingLicense = "Has driving license";
  } else {
    var drivingLicense = "No driving license";
  }

  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().appendRow([userFullName,userGender,drivingLicense]);
  app.close();
  return app;
}

You can see that the status of the Check Box component is checked using the theForm.parameter.CheckBox1 variable. If the user didn’t checked the check box no parameter or variable is passed to us, so we first check if the the theForm.parameter.CheckBox1 is “undefined”. If the variable is defined means that the user has checked the check box. Using this way you can act based on the checked status of the Check Box component. Now run the function myFunction and go back to the Spreadsheet document:

Using the Check Box component with the GUI Builder 11

Insert “John” as Full Name and click the “Submit” button:

Using the Check Box component with the GUI Builder 12

As you can see by not checking the “Driving License?” check box the data saved corresponding to the entry is “No driving license”. Now run again the function myFunction:

Using the Check Box component with the GUI Builder 13

This time use “Jane” as Full Name, select “Female” as Gender and check the “Driving License” check box and click the “Submit” button:

Using the Check Box component with the GUI Builder 14

Now the value “Has driving license” is stored for Jane.

I hope this post will give you a quick way to handle check boxes in your applications.

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
5 comments on “Using the Check Box component of the Google Apps Script GUI Builder
  1. Dan says:

    Thanks a bunch Marcello, this is great!

  2. KT says:

    Thank you very much. I am trying to learn scripting and this is great help.

  3. Robert Muskett says:

    Excellent tutorial on checkboxes in GUI.

    I wish more people were using Google Scripts fully!

  4. Eddy Parkinson says:

    Wow, that is a high quality tutorial. Looks good. Lots of people want forms.
    I am looking for advice on an idea I have been working on. The idea is a way of building web applications using spreadsheet formulas. Some formulas that add a user interface to a spreadsheet. Any thoughts on what is in demand?

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>