Google Apps Script webApp UI redraw UI

Question

I have a GAS which displays a leader board (Google Chart) from a Google Spreadsheet.

I like to make it so that each time there is an update to the spreadsheet, the chart would refresh and show the latest scores.

Every time there is a new score, the spreadsheet calculates the new scores and updates the list. (This part is already working correctly using GAS)

what does NOT seem to work is that the webApp does not reload/redraw the chart.

the logChange() function is called by a Spreadsheet Trigger onChange() which fires when the spreadsheet is changed and successfully logs the beginning and end of its process (successfully calls the redrawUI() function).

The webApp code is provided below. Can anyone help me make this app redraw the chart each time there is a change in the spreadsheet?

function doGet(e) {
  var app = drawUI();
  return app;
}

function logChange(e) {
  Logger.log("Changed at: " + new Date());
  redrawUI();
  Logger.log("after redrawUI recall " + new Date());
  return app;
}

function redrawUI() {
  var app = drawUI();
  return app;
}

function drawChart() {
  var ss = SpreadsheetApp.openById('txS....w'); //Spreadsheet Key
  var hs = ss.getSheetByName('All Scores');
  var data = hs.getRange(1, 1, 11, 3);

  var barChart = Charts.newBarChart()
  .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2]))
  .setDataTable(data)
  .setOption('axisTitlesPosition', 'in')
  .setOption('hAxis.minorGridlines.count', 9)
  .setOption('theme', 'maximized')
  .setOption('colors', ['#45818e'])
  .setLegendPosition(Charts.Position.NONE)
  .setYAxisTextStyle(Charts.newTextStyle().setFontName('Courier New').setFontSize(48))
  .setDimensions(1000, 800)
  .build();

  return barChart;
}

function drawUI() {
  var barChart = drawChart();

  var app = UiApp.createApplication();
  var mainPanel = app.createHorizontalPanel();
  var hsLabel = app.createLabel("THE Geek Game 2013")
                   .setStyleAttribute("font-size", "5em")
                   .setStyleAttribute("font-weight", "bold")
                   .setStyleAttribute("line-height", "2em");
  var subLabel = app.createLabel("Leader Board")
                   .setStyleAttribute("font-size", "3em")
                   .setStyleAttribute("font-weight", "bold")
  var vPanel = app.createVerticalPanel().setId("vPanel");

  mainPanel.add(vPanel).setSize("100%", "100%")
    .setCellHorizontalAlignment(vPanel, (UiApp.HorizontalAlignment.CENTER));
  vPanel.add(hsLabel).add(subLabel);
  vPanel.add(barChart).setSize("500", "100%");
  vPanel.setCellHorizontalAlignment(hsLabel, (UiApp.HorizontalAlignment.CENTER));
  vPanel.setCellHorizontalAlignment(subLabel, (UiApp.HorizontalAlignment.CENTER));

  app.add(mainPanel);
  app.createServerHandler("redrawUI");  
  return app;
}

If you like to see how the current app displays you see this link: https://script.google.com/macros/s/AKfycbykZZYCXd9SCJL0pnoNrR7L5ekdFQb8CzRsut0vLunKwq4jg8o/exec

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

AFAIK there is no way to refresh a webApp Ui without user action except using a "timer*" in the webapp itself.

What I'd suggest is to let the onChange trigger in the spreadsheet bounded script set a 'flag value' in your userProperties and use a timer* to poll that value and update when you notice a change. You could limit the refresh to certain hours of the day to avoid quota limitations.

*note : for an example of such a timer see this post using the checkBox as a handler trigger.

edited May 23 '17 at 12:21

Community

1
1

answered Nov 09 '13 at 00:18

Serge insas

45,904
7
105
131

Thanks Serge for your response. However, aren't form submissions considered user action? I forgot to mention, that the spreadsheet is connected to a Google form, and upon each form submission, the spreadsheet updates the scores, and fires the `onChange()` trigger of the spreadsheet. How can I use this user action to redraw the Leader Board? - Thanks – Babak K Nov 09 '13 at 00:36
The webapp is a standalone app, there is no available bridge between the form and the UI instance, that's why I suggested this check box trick. – Serge insas Nov 09 '13 at 00:41
Thanks Serge for your trick. It works perfectly and now I am able to remove and redraw the chart on a time interval which causes the chart to disappear and appear with new results _every 30 seconds for example_:) However, I am looking to replicate the effect that you see in this Google I/O video at the 24m55s of this video (http://youtu.be/38H7WpsTD0M?t=24m55s). It seems that the sidebar is using UiApp and displays a dynamic chart(?) that updates (maybe with a slight delay) upon every submission to the form. Does anyone know how is this done? – Babak K Nov 10 '13 at 18:17
I have made a separate question for the comment above, as it is almost a different question from this one. If anyone likes to answer to the above comment, please do so here: [How to create a dynamic chart in Google Apps Script UI](http://stackoverflow.com/questions/19893540/how-to-create-a-dynamic-chart-in-google-apps-script-ui) – Babak K Nov 10 '13 at 18:45

Google Apps Script webApp UI redraw UI

1 Answers1