Question

I have been playing with this small test code that – I admit – isn’t very useful but I noticed that the value returned in the callBackElement of the first handler is undefined when this handler is called for the first time.

I couldn’t figure out why… so I added a condition that solves the problem but I still would like to understand why this is working like that…

The script comes from a idea shown in this post earlier today, I commented the line that causes the error in the script below (it’s a bit long, sorry about that) and runs as a sort of timer/counter to illustrate the ability to fire a handler programmatically with checkBoxes.

If someone can explain why this condition is necessary ?

    var nn=0;
    //
    function doGet() {
      var app = UiApp.createApplication().setHeight('120').setWidth('200').setTitle('Timer/counter test');
      var Panel = app.createVerticalPanel()
      var label = app.createLabel('Initial display')
                     .setId('statusLabel')
      app.add(label);
      var counter = app.createTextBox().setName('counter').setId('counter').setValue('0')
      var handler1 = app.createServerHandler('loadData1').addCallbackElement(Panel);
      var handler2 = app.createServerHandler('loadData2').addCallbackElement(Panel);
      var chk1 = app.createCheckBox('test1').addValueChangeHandler(handler1).setVisible(true).setValue(true,true).setId('chk1');
      var chk2 = app.createCheckBox('test2').addValueChangeHandler(handler2).setVisible(true).setValue(false,false).setId('chk2');
      app.add(Panel.add(chk1).add(chk2).add(counter));
      SpreadsheetApp.getActive().show(app)
    }

    function loadData1(e) {
      var app = UiApp.getActiveApplication();
      var xx = e.parameter.counter
//*******************************************************
      if(xx){nn = Number(xx)}; // here is the question
    //  nn = Number(xx);       // if I use this line the first occurence = undefined
      nn++
      var cnt = app.getElementById('counter').setValue(nn)
      Utilities.sleep(500);
      var chk1 = app.getElementById('chk1').setValue(false,false)
      var chk2 = app.getElementById('chk2').setValue(true,true)
      var label = app.getElementById('statusLabel');
      label.setText("Handler 1 :-(");

      return app;
    }

    function loadData2(e) {
      var app = UiApp.getActiveApplication();
      var xx = Number(e.parameter.counter)
      xx++
      var cnt = app.getElementById('counter').setValue(xx)
      Utilities.sleep(500); 
      var chk1 = app.getElementById('chk1').setValue(true,true)
      var chk2 = app.getElementById('chk2').setValue(false,false)
      var label = app.getElementById('statusLabel');
      label.setText("Handler 2 ;-)");

      return app;
    }

The app looks like this:

and is testable here

EDIT : working solution is to fire the handler after adding the widgets to the panel (see Phil’s answer)
like this :

  var chk1 = app.createCheckBox('test1').addValueChangeHandler(handler1).setVisible(true).setId('chk1');
  var chk2 = app.createCheckBox('test2').addValueChangeHandler(handler2).setVisible(true).setId('chk2');
  app.add(Panel.add(chk1).add(chk2).add(counter));
  chk1.setValue(true,true);
  chk2.setValue(false,false);
  return app

Answer 1

The callback element which you specified for that handler (Panel) has no elements at the time that it is invoked. So you are essentially passing along a empty panel to that handler. So since chk1 hasn’t been added to the panel yet, its value isn’t added as a parameter to the handler.

Put chk1.setValue(true,true) after the call to Panel.add(chk1).

As seen in this example, the handler is queued when setValue(true,true) is called. This means that all the parameters that will be passed to the handler are gathered. It looks at the callback elements, reads their values, and then continues executing the doGet. After doGet finishes, the handler is executed.