Question

I have an interface that calls a script for spreadsheet creation using data taken from other spreadsheet. I want the interface to update its labels at runtime in order to give visual feedback to the user and let him know the script is running and it’s not stuck. When I try to update the label I put in the interface, it doesn’t update the first time, but updates correctly after myFunction() reaches its end. Which means I can see the message “Creation Completed”, but the message “Creating file…” is never shown. Also, the button buttonCompile is never disabled so it seems that the instructions before myFunction() are not executed at all. How can I get the labels updated and the button disabled before myFunction() starts executing? (I already double-checked variable references)

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("File creation"));
  var buttonCreate = app.getElementById('createBtn');
  var handlerCrea = app.createServerHandler('createClickHandler');
  buttonCreate.addClickHandler(handlerCreate);
  return app;
}

function createClickHandler(e) {
  var app = UiApp.getActiveApplication();
  var label = app.getElementById('createLbl');
  label.setText("Creating file...");
  var buttonCompile = app.getElementById('compileBtn');
  buttonCompile.setEnabled(false);
  myFunction();
  label.setText("Creation completed.");
  buttonCompile.setEnabled(true);
  app.close();
  return app;
}

Answer 1

The cause of this behavior is that the GUI is updated only after leaving a handler. A workaround is to use two handlers. The 1st one sets the label text to Creating file... and disables the button, the 2nd one executes the myFunction function, changes the text to Creation completed, and eanbles the button. Here is an example. It disables/enables the button and the worker handler simply waits 5 seconds.

function doGet(e) {
  var app = UiApp.createApplication();
  var container = app.createHorizontalPanel().setId('container');
  var btnPerformance = app.createButton("Performance Demo").setId('btnPerformance');
  var handlerPerformance = app.createServerHandler('onBtnPerformanceClick');
  var handlerWait = app.createServerHandler('onWait');
  btnPerformance.addClickHandler(handlerPerformance);
  btnPerformance.addClickHandler(handlerWait);
  container.add(btnPerformance);
  app.add(container);
  return app;
}

function enableControls(enable) {
  var lstControls = [ 'btnPerformance' ];
  var app = UiApp.getActiveApplication();
  for (var i = 0; i < lstControls.length; i++) {
    var ctl = app.getElementById(lstControls[i]);
    ctl.setEnabled(enable);
  }
}

function onWait(e) {
  enableControls(false);
  return UiApp.getActiveApplication();
}

function onBtnPerformanceClick(e) {
  Utilities.sleep(5000);
  enableControls(true);
  return UiApp.getActiveApplication();
}