更新Google Apps脚本侧栏中的内容，而无需重新加载侧栏 [英] Updating content in a Google Apps Script sidebar without reloading the sidebar

问题描述

我正在使用以下Google Apps脚本代码在自定义侧边栏中显示内容脚本运行时的电子表格:

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);

}

它可以工作，但是每次updateSidebar()函数运行时，在加载新内容时侧边栏都会闪烁.

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?

我假设SpreadsheetApp.getUi().showSidebar(html);实际上应该在一开始只运行一次，并且随后对内容的更新应该由.js文件中的Javascript处理.

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.

但是我不知道如何从在用户浏览器中运行客户端的Javascript代码获取sidebarContent变量.

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.

推荐答案

我认为这种情况的解决方案是实际从客户端处理服务器端脚本的流程.这是我现在想到的唯一方法，它可以在不重新生成HTML的情况下将数据从服务器传递到客户端.
我的意思是，您希望从客户端调用服务器端函数，并让它们将响应作为成功处理程序返回给客户端.这意味着需要记录的每个动作都必须变成其自己的功能. 病给你看一下我的意思的简单例子. 可以说您的服务器端GAS代码如下所示:

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.

现在，对于您的.html文件，在底部，您将看到javascript如下所示:

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>

它比理想情况复杂一些，您可能需要使用CacheService在两次操作之间存储一些数据，但是它应该可以帮助您解决问题. 让我知道您是否有任何疑问，或者这不符合您的需求.

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.

这篇关于更新Google Apps脚本侧栏中的内容，而无需重新加载侧栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！