javascript - Updating content in a Google Apps Script sidebar without reloading the sidebar - Stack Overflow

admin管理员组

文章数量:1026380

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.

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.

• javascript
• google-apps-script

Share Improve this question Follow asked Jul 29, 2015 at 23:34 EmployeeEmployee 2,43133 gold badges3737 silver badges6565 bronze badges 4

• The method for doing this depends on what you are trying to acplish. The short answer is, if you want to update sidebar content it should be done client-side, probably using javascript. – Jonathan Seed Commented Jul 30, 2015 at 15:50
• I basically have a long script that's triggered by a user from the Google Sheet. Since the script takes about 45 seconds to run, I have it display the sidebar with an HTML-formatted progress bar and a log of each item as it's pleted. This happens about 10-12 times during the execution of the script. I don't know how a client-side script would get the latest value of the sidebarContent variable from the server during execution. – Employee Commented Jul 30, 2015 at 22:37
• Running this test function from the Apps Script development window does nothing, but running it from the spreadsheet window works. I wonder why that may be. – rudolfbyker Commented Sep 27, 2022 at 10:56
• Note that .setWidth() has stopped working since 2014. – Dan Dascalescu Commented Sep 3, 2023 at 13:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 pleted...
google.script.run.withSuccessHandler(actionsComplete).actionTwo();
}
function actionsComplete(){
..update html to indicate script is plete...
}
</script>

It is a bit more plex 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.

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.

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.

• javascript
• google-apps-script

Share Improve this question Follow asked Jul 29, 2015 at 23:34 EmployeeEmployee 2,43133 gold badges3737 silver badges6565 bronze badges 4

• The method for doing this depends on what you are trying to acplish. The short answer is, if you want to update sidebar content it should be done client-side, probably using javascript. – Jonathan Seed Commented Jul 30, 2015 at 15:50
• I basically have a long script that's triggered by a user from the Google Sheet. Since the script takes about 45 seconds to run, I have it display the sidebar with an HTML-formatted progress bar and a log of each item as it's pleted. This happens about 10-12 times during the execution of the script. I don't know how a client-side script would get the latest value of the sidebarContent variable from the server during execution. – Employee Commented Jul 30, 2015 at 22:37
• Running this test function from the Apps Script development window does nothing, but running it from the spreadsheet window works. I wonder why that may be. – rudolfbyker Commented Sep 27, 2022 at 10:56
• Note that .setWidth() has stopped working since 2014. – Dan Dascalescu Commented Sep 3, 2023 at 13:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 pleted...
google.script.run.withSuccessHandler(actionsComplete).actionTwo();
}
function actionsComplete(){
..update html to indicate script is plete...
}
</script>

It is a bit more plex 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.

本文标签： javascriptUpdating content in a Google Apps Script sidebar without reloading the sidebarStack Overflow