更新Google Apps脚本侧边栏中的内容,而无需重新加载侧边栏

时间:2015-07-29 23:34:56

标签: javascript google-apps-script

我正在使用以下Google Apps脚本代码在脚本运行时在我的电子表格的custom sidebar中显示内容:

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()函数运行时,侧栏会在加载新内容时闪烁。

如何对此进行编程以更有效地更新侧边栏的内容,从而消除闪烁?

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

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

另外,我知道这一定是可能的,因为我今天刚刚看到this post on the Google Apps Developer Blog关于使用自定义侧边栏的应用程序,而文章末尾的.gif显示了一个正在更新的精美动画侧边栏实时。

1 个答案:

答案 0 :(得分:2)

我认为这种情况的解决方案是从客户端实际处理服务器端脚本的流程。这是我现在能够想到的唯一方法,可以在不重新生成HTML的情况下从服务器向客户端传递数据 我的意思是你想要从客户端调用服务器端函数,并让它们作为成功处理程序返回给客户端。这意味着需要记录的每个操作都需要进入自己的功能。 我会告诉你一个我的意思的快速例子。 让我们说你的服务器端GAS代码如下所示:

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

等等,因为需要执行许多操作。

现在,对于你的.html文件,在底部你会看到类似这样的javascript:

<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在操作之间存储一些数据,但它可以帮助您解决问题。 如果您有任何疑问或者这不符合您的需求,请与我们联系。