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:

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: “Driving License?”:

Now select the Check Box component from the left bar:

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

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

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

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:

The updated application should look like the following:

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:

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

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:

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

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!