CODEWITHSUNDEEP
google-apps-script
ryano
ryano

Reputation: 241

Adding a ClientHandler like loading bar to a ServerClickHandler

I'm using the code below to run a a function that takes a while to load. My question is, without a lot of modification, is there an easy way of adding something like a clienthandler so that in the midst of running the function it says something along the lines of "Loading...?"

function doGet(e) {

  var app = UiApp.createApplication().setTitle('New app');

  var grid = app.createGrid(1, 2);
  grid.setWidget(0, 0, app.createLabel('First Name + Last Name (Case Sensitive):'));
  grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));



  var panel = app.createVerticalPanel();
  panel.add(grid);
  var buttonPanel = app.createHorizontalPanel();
  var button = app.createButton('Submit');
  var submitHandler = app.createServerClickHandler('submit')
  submitHandler.addCallbackElement(grid);
  button.addClickHandler(submitHandler);
  buttonPanel.add(button);

  var clearButton = app.createButton('Clear');
  var clearHandler = app.createServerClickHandler('clear');
  clearButton.addClickHandler(clearHandler);
  buttonPanel.add(clearButton);

  var statusLabel = app.createHTML("").setId('status').setVisible(false);
  panel.add(statusLabel);

   panel.add(buttonPanel);

  app.add(panel);
  return app;
};

function clear() {
  var app = UiApp.getActiveApplication();
  app.getElementById('userName').setValue('');
  app.getElementById('status').setVisible(false)
  return app;
};

Upvotes: 0

Views: 760

Answers (2)

Serge insas
Serge insas

Reputation: 46802

It can be more pleasant if you add an image to your status label, here is an example using a transparent animated gif : (simply replace in Srik's code)

  var statusLabel = ui.createHorizontalPanel().add(ui.createImage('https://dl.dropboxusercontent.com/u/211279/loading3T.gif'))
  .add(ui.createHTML("Loading...")).setId('status').setVisible(false);// Label + animated gif, the text in the HTML widget can be there from the start.

Edit : just noticed something was missing in Srik's code... the clientHandler should go like this :

  var plswait = app.createClientHandler().forTargets(statusLabel).setVisible(true);// and eventually setText(' blah blah...') if you didn't define/change it before/elsewhere

Note : now that you have a clientHandler you could also make use of it to setEnabled(false) the button that triggered it to avoid multiple clicks... simply add .forEventSource().setEnabled(false) to your clientHandler.

Upvotes: 0

Srik
Srik

Reputation: 7967

Yes, indeed. That is what client handlers are for. 

function doGet(e) {

  var app = UiApp.createApplication().setTitle('New app');

  var grid = app.createGrid(1, 2);
  grid.setWidget(0, 0, app.createLabel('First Name + Last Name (Case Sensitive):'));
  grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));

  /* Have the widget ready */
  var statusLabel = app.createHTML("").setId('status').setVisible(false);

  var panel = app.createVerticalPanel();
  panel.add(grid);
  var buttonPanel = app.createHorizontalPanel();
  var button = app.createButton('Submit');
  var submitHandler = app.createServerClickHandler('submit')
  submitHandler.addCallbackElement(grid);
  button.addClickHandler(submitHandler);
  buttonPanel.add(button);

  var clearButton = app.createButton('Clear');
  var clearHandler = app.createServerClickHandler('clear');
  /* Create the client handler */
  var plswait = app.createClientHandler().forTargets(statusLabel).setText('Loading...');

  clearButton.addClickHandler(clearHandler).addClickHandler(plswait);
  buttonPanel.add(clearButton);

  panel.add(statusLabel);

   panel.add(buttonPanel);

  app.add(panel);
  return app;
};

function clear() {
  var app = UiApp.getActiveApplication();
  app.getElementById('userName').setValue('');
  app.getElementById('status').setVisible(false).setText('');


  return app;
};

Upvotes: 1

Related Questions