Updating content in a Google Apps Script sidebar w

Question

I am using the following Google Apps Script code to display content in a custom sidebar of my spreadsheet while the script runs:

function test() {

  var sidebarContent = '1<br>';

  updateSidebar(sidebarContent);

  sidebarContent += '2<br>';

  updateSidebar(sidebarContent);

  sidebarContent += '3';

  updateSidebar(sidebarContent);

}

function updateSidebar(content) {

  var html = HtmlService.createHtmlOutput(content)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Sidebar')
      .setWidth(250);

  SpreadsheetApp.getUi().showSidebar(html);

}

It works, but each time the updateSidebar() function runs, the sidebar blinks when loading in the new content.

How can I program this to update the content of the sidebar more efficiently, thus removing the blink?

I'm assuming that SpreadsheetApp.getUi().showSidebar(html); should really only be run once, at the beginning, and the subsequent updates to the content should be handled by Javascript in a .js file.

But I don't know how to get the sidebarContent variable from Javascript code running client-side in the user's browser.

Also, I know this must be possible, because I just saw this post on the Google Apps Developer Blog today about an app that uses a custom sidebar, and the .gif towards the end of the article shows a nicely-animated sidebar that's being updated in real-time.

Answer 1

I believe the solution for this situation is to actually handle the flow of the server-side script from the client-side. That is the only way I can think of right now to pass data to the client side from the server without re-generating the HTML.
What I mean by this is that you would want to make the calls to the server-side functions from the client, and have them return a response as a success handler to the client. This means that each action that needs to be logged will need to be made into its own function. Ill show you a quick example of what I mean. Lets say your server-side GAS code looked like this:

function actionOne(){
...insert code here...
return true;
}
function actionTwo(){
...insert code here... 
return true;
}

And so on for as many actions need to be executed.

Now, for your .html file, at the bottom you would have javascript looking something like this:

<script>
callActionOne();
function callActionOne(){
  google.script.run.withSuccessHandler(callActionTwo).actionOne();
}
function callActionTwo(){
...update html as necessary to indicate that the first action has completed...
google.script.run.withSuccessHandler(actionsComplete).actionTwo();
}
function actionsComplete(){
..update html to indicate script is complete...
}
</script>

It is a bit more complex than is ideal, and you might need to use the CacheService to store some data in between actions, but it should help you with your problem. Let me know if you have any questions or if this doesn't fit your needs.