Google-apps-script Client Validation

I recently saw a question on stackoverflow where someone was asking if it was possible to do a two-factor clienthandler to validate entries.  Since I've only been playing with apps scripts for a week (see my other posts on adventures with archiving Gmail - which I still have to finish up), I figured I'd give it a try to learn a bit more.

The scenario was he (or she) had two textboxes and wanted to allow a button to be clicked if either BOTH were empty OR BOTH had data.  My solution, while cumbersome, actually works.

I created two additional textboxes (which could be hidden) then piled on the validators on the original two texboxes. 

• If entryTextbox1.length>0, validatorTextbox1.text=1 else validatorTextbox1=0,
• If entryTextbox2.length>0, validatorTextbox2.text=1 else validatorTextbox2=0

Then some textchangehandlers

• validatorTextbox1.onTextChange: if sum(validatorText1+validatorTextbox2)=1, don't allow click
• validatorTextbox2.onTextChange: if sum(validatorText1+validatorTextbox2)=1, don't allow click

To handle databoxes, the theory is the same, but

1. lengthchecks on dateboxes don't work properly they throw an error for some reason. i used a regex testing for the '-' character. you may need to change this if you've formated your date differently.  Or you could fully validate the date format.
2. you need to fire events for invalid dates to handle empty fields
3. and lastly, you need to use the valuechange handler instead as it was correctly pointed out it doesn't have onkeyup

Click Here to see the solution in action.

function doGet() {
  var app = UiApp.createApplication();

  
  var buttonDate = app.createButton('Click Me');
  app.add(app.createLabel("This demonstrates using clienthandlers to require either neither or both dateBoxes to be populated before the button can be clicked"));
  var validationWarning=app.createLabel("Please enter a value in both fields or neither field").setId('warningLabel').setStyleAttribute('color', "red").setVisible(false);
  app.add(buttonDate);
  app.add(validationWarning);
  var panel = app.createVerticalPanel();
  
 
  // db1.addValueChangeHandler(handler);
  
  var db1=app.createDateBox().setId('db1').setName('db1');
  var db2=app.createDateBox().setId('db2').setName('db2');
  //Hide these two - but i left them visible so you can see the script in action.
  var tbValidatorFordb1=app.createTextBox().setId('tb3').setName('tb3').setEnabled(false);
  var tbValidatorFordb2=app.createTextBox().setId('tb4').setName('tb4').setEnabled(false);
  var label1 = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);
  
  
  panel.add(label1);
  
  var grid1=app.createGrid(2, 2);
  grid1.setWidget(0, 0, app.createLabel("Field 1"));
  grid1.setWidget(0, 1, app.createLabel("Field 2"));
  grid1.setWidget(1, 0,db1);
  grid1.setWidget(1, 1,db2);
  panel.add(grid1);
  
    var grid2=app.createGrid(2, 2);
  grid2.setWidget(0, 0, app.createLabel("Validator 1"));
  grid2.setWidget(0, 1, app.createLabel("Validator 2"));
  grid2.setWidget(1, 0,tbValidatorFordb1);
  grid2.setWidget(1, 1,tbValidatorFordb2);
  panel.add(grid2);

  app.add(panel);
  //Set your validators for your first textbox
 
  var clientHandler1=app.createClientHandler().validateMatches(db1,'\-').forTargets(tbValidatorFordb1).setText('1');
  var clientHandler2=app.createClientHandler().validateNotMatches(db1, '\-').forTargets(tbValidatorFordb1).setText('0');
  
  //Set your validators for your second textbox
  var clientHandler3=app.createClientHandler().validateMatches(db2,'\-').forTargets(tbValidatorFordb2).setText('1');
  var clientHandler4=app.createClientHandler().validateNotMatches(db2,'\-').forTargets(tbValidatorFordb2).setText('0');
  //tb1.addValueChangeHandler(handler)
   db1.addValueChangeHandler(clientHandler1);
  db1.addValueChangeHandler(clientHandler2);
  db2.addValueChangeHandler(clientHandler3);
  db2.addValueChangeHandler(clientHandler4);
 db2.addValueChangeHandler(clientHandler1);
  db2.addValueChangeHandler(clientHandler2);
 db1.addValueChangeHandler(clientHandler3);
 db1.addValueChangeHandler(clientHandler4);
  
  //Now create some client handlers to do the actual enable/disable of the button
  db1.setFireEventsForInvalid(true);
    db2.setFireEventsForInvalid(true);
  var finalDisableValidator1=app.createClientHandler().validateSum([tbValidatorFordb1,tbValidatorFordb2], 1).forTargets(buttonDate).setEnabled(false).forTargets(validationWarning).setVisible(true);
  var finalEnableValidator1=app.createClientHandler().validateNotSum([tbValidatorFordb1,tbValidatorFordb2], 1).forTargets(buttonDate).setEnabled(true).forTargets(validationWarning).setVisible(false);
  
  db1.addValueChangeHandler(finalDisableValidator1);
  db1.addValueChangeHandler(finalEnableValidator1);
  db2.addValueChangeHandler(finalDisableValidator1);
  db2.addValueChangeHandler(finalEnableValidator1);
  
  //tb4.addChangeHandler(finalEnableValidator)
  var handler = app.createServerHandler('myClickHandler').validateNotSum([tbValidatorFordb1,tbValidatorFordb2], 1);
  handler.addCallbackElement(label1);
  buttonDate.addClickHandler(handler);

  
  //Code for textboxes
  
    var button2 = app.createButton('Click Me');
    var panel2 = app.createVerticalPanel();
  panel2.add(app.createLabel("This demonstrates using clienthandlers to require either neither or both textBoxes to be populated before the button can be clicked"));
  var validationWarning2=app.createLabel("Please enter a value in both fields or neither field").setId('warningLabel').setStyleAttribute('color', "red").setVisible(false);
  
  panel2.add(button2);
  panel2.add(validationWarning2);

  
 
  // db1.addValueChangeHandler(handler);
  
  var tb1=app.createTextBox().setId('tb1').setName('tb1');
  var tb2=app.createTextBox().setId('tb2').setName('tb2');
  //Hide these two - but i left them visible so you can see the script in action.
  var tbValidatorForTb1=app.createTextBox().setId('tb5').setName('tb5').setEnabled(false);
  var tbValidatorForTb2=app.createTextBox().setId('tb6').setName('tb6').setEnabled(false);
  var label = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);
  
  
  panel2.add(label);
  
  var grid3=app.createGrid(2, 2);
  grid3.setWidget(0, 0, app.createLabel("Field 1"));
  grid3.setWidget(0, 1, app.createLabel("Field 2"));
  grid3.setWidget(1, 0,tb1);
  grid3.setWidget(1, 1,tb2);
  panel2.add(grid3);
  
    var grid4=app.createGrid(2, 2);
  grid4.setWidget(0, 0, app.createLabel("Validator 1"));
  grid4.setWidget(0, 1, app.createLabel("Validator 2"));
  grid4.setWidget(1, 0,tbValidatorForTb1);
  grid4.setWidget(1, 1,tbValidatorForTb2);
  panel2.add(grid4);

  app.add(panel2);
  //Set your validators for your first textbox
   var clientHandler5=app.createClientHandler().validateLength(tb1, 1, 200).forTargets(tbValidatorForTb1).setText('1');
  var clientHandler6=app.createClientHandler().validateLength(tb1,0, 0).forTargets(tbValidatorForTb1).setText('0');

 
  //Set your validators for your second textbox
  var clientHandler7=app.createClientHandler().validateLength(tb2, 1, 200).forTargets(tbValidatorForTb2).setText('1');
  var clientHandler8=app.createClientHandler().validateLength(tb2,0, 0).forTargets(tbValidatorForTb2).setText('0');
  //tb1.addValueChangeHandler(handler)
   tb1.addKeyUpHandler(clientHandler5);
  tb1.addKeyUpHandler(clientHandler6);
  tb2.addKeyUpHandler(clientHandler7);
  tb2.addKeyUpHandler(clientHandler8);
 tb2.addKeyUpHandler(clientHandler5);
  tb2.addKeyUpHandler(clientHandler6);
 tb1.addKeyUpHandler(clientHandler7);
 tb1.addKeyUpHandler(clientHandler8);
  
  //Now create some client handlers to do the actual enable/disable of the button

  var finalDisableValidator=app.createClientHandler().validateSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button2).setEnabled(false).forTargets(validationWarning).setVisible(true);
  var finalEnableValidator=app.createClientHandler().validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button2).setEnabled(true).forTargets(validationWarning).setVisible(false);
  
  tb1.addKeyUpHandler(finalDisableValidator);
  tb1.addKeyUpHandler(finalEnableValidator);
  tb2.addKeyUpHandler(finalDisableValidator);
  tb2.addKeyUpHandler(finalEnableValidator);
  
  //tb4.addChangeHandler(finalEnableValidator)
  var handler = app.createServerHandler('myClickHandler').validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1);
  handler.addCallbackElement(label);
  button2.addClickHandler(handler);

  
  
  
  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  var label = app.getElementById('statusLabel');
  label.setVisible(true);

  app.close();
  return app;
}

Archiving Gmail (Part 3)

Time for a little aside.  In the last post I showed you were we were headed with a Google apps script web application that will archive or forward gmail messages in bulk.  Running this script can take a while if there are a lot of emails and Google apps scripts don't have a very good method for showing that they are running.

While I wanted a progress bar, I couldn't find anything that would easily get me there (although if you read Solution 2 below you could back your way into one but it would be cumbersome at best).

I settled on showing and hiding a spinning gif to indicate to the user the script is still running.  I found two ways to do this, but only one (the second) works with the menus I wanted to use.

Solution 1:

This solution does NOT work with menus.  Basically the idea is you add a normal server handler to a button (for example) then add an additional client handler to the MouseUp event. Click to see it in action.

Here is the simple code for that demo:

// Script-as-app template.
function doGet() {
  var app = UiApp.createApplication();

  var label = app.createLabel('click the button.')
                 .setId('statusLabel')
                 .setVisible(true);
  
  app.add(label);
  var spinner = app.createImage('https://5079980847011989849-a-1802744773732722657'+
            '-s-sites.googlegroups.com/site/scriptsexamples/ProgressSpinner.gif')
            .setVisible(false)
            .setId('spinner');
  app.add(spinner);

  
  var myButtonHandler=app.createServerHandler('myButtonLongRunningFunction');
  
  var myButton=app.createButton("Click to Test", myButtonHandler);
    var loadSpinner = app.createClientHandler()
            .forTargets(spinner)
            .setVisible(true).forTargets(label).setText('Running...');

  myButton.addMouseUpHandler(loadSpinner)
  app.add(myButton);
  return app;
  
}

function myButtonLongRunningFunction(e){

  Utilities.sleep(5000);
  
  var app=UiApp.getActiveApplication();
  app.getElementById('statusLabel').setText('Done.');
  app.getElementById('spinner').setVisible(false);
  return app;
}

Solution 2:

As I stated, the above method will NOT work if you use a menu.  Why? Because you can't assign both a client handler and server handler to a menuItem.   So how can we accomplish the same thing using only a server handler?  By tricking the script into running TWO server handlers asynchronously.  Click here to see this in action

Here are the basic steps:

1. Create your menu
2. Create an object like a textbox to hold the value of the menu item clicked
3. Create a checkbox with a ValueChangeHandler.  this handler will check the textbox for the command that was requested, and perform some long running action.
4. create a menu handler for each menuitem.  these menu handlers will show the progress indicator, set the value in the textbox, then toggle the checkbox value to trigger the ValueChangeHandler created above.

Here is the code for example two:

// Script-as-app template.
function doGet() {
  var app = UiApp.createApplication();

  //Create menu
      var menuBar = app.createMenuBar();//For horizontal menubar
    var handler1 = app.createServerHandler('myMenu1Handler');
    var handler2 = app.createServerHandler('myMenu2Handler');
  
  
    var menuItem0 = app.createMenuItem('Item 1', handler1);
    var menuItem1 = app.createMenuItem('Item 2', handler2);
      var separator0 = app.createMenuItemSeparator();
    var separator1 = app.createMenuItemSeparator();
    menuBar.addSeparator(separator0).addItem(menuItem0).addSeparator(separator1)
    .addItem(menuItem1);
  app.add(menuBar);
  
  //Create the control checkbox trigger and textbox
  var myControlTextBox=app.createTextBox().setId('controlTextBox').setName('controlTextBox').setVisible(false);  
  var controlHandler=app.createServerHandler('myControlHandler');
  
  var myControlCheckBox=app.createCheckBox().setId('controlCheckBox').setName('controlCheckBox').addValueChangeHandler(controlHandler).setVisible(false);

  controlHandler.addCallbackElement(myControlTextBox);
  controlHandler.addCallbackElement(myControlCheckBox);

  app.add(myControlTextBox);
  app.add(myControlCheckBox);

  //create the spinner we will use for progress
    var spinner = app.createImage('https://5079980847011989849-a-1802744773732722657'+
            '-s-sites.googlegroups.com/site/scriptsexamples/ProgressSpinner.gif')
            .setVisible(false)
            .setId('spinner');
  app.add(spinner);
  var resultsLabel=app.createLabel().setVisible(false).setId('resultsLabel');
  app.add(resultsLabel);
  return app;
}

function myControlHandler(e){
  Logger.log("control called");
  var app=UiApp.getActiveApplication();
  if(e.parameter.controlCheckBox=='true'){
    if(e.parameter.controlTextBox=='Menu1'){
      
      Utilities.sleep(3000);
      
      app.getElementById('spinner').setVisible(false);
      app.getElementById('resultsLabel').setText('Menu 1 was clicked').setVisible(true);
      //reset control box
      var controlCheck=app.getElementById('controlCheckBox');
      controlCheck.setValue(false,false);
    } else if(e.parameter.controlTextBox=='Menu2'){
      Utilities.sleep(3000);
      app.getElementById('spinner').setVisible(false);
      app.getElementById('resultsLabel').setText('Menu 2 was clicked').setVisible(true);
      //reset control box
      var controlCheck=app.getElementById('controlCheckBox');
      controlCheck.setValue(false,false);
    } else {
      Logger.log("controlTextBox value: " + e.parameter.controlTextBox);
    }
  } else {
    //Do nothing - this is result of reset from above.
  }
  return app;
}
function myMenu1Handler(e) {
  var app = UiApp.getActiveApplication();
  //show the spinner
  app.getElementById('spinner').setVisible(true);
  app.getElementById('controlTextBox').setText('Menu1');
  app.getElementById('resultsLabel').setVisible(false);
  var controlCheck=app.getElementById('controlCheckBox');
  controlCheck.setValue(true,true);
  return app;
}
function myMenu2Handler(e) {
  var app = UiApp.getActiveApplication();
  //show the spinner
  app.getElementById('spinner').setVisible(true);
  app.getElementById('controlTextBox').setText('Menu2');
  app.getElementById('resultsLabel').setVisible(false);
   var controlCheck=app.getElementById('controlCheckBox');
  controlCheck.setValue(true,true);
  return app;
}

Since I decided that I liked the look of the menu better, I went with option 2.

to be continued....