从嵌入式 html 文件站点访问 google sheet 条目

Question

我正在尝试通过 google 应用程序脚本在 google sheet 的右侧边栏中使用嵌入式 html。访问 sheet 的单元格并将其显示在 html5 canvas 元素上。我已经创建了一个 Code.gs 文件和一个 html 索引文件，并且已经成功地获得传播 sheet 以生成一个右侧边栏，其内容是 HTML 文件，其中包括一个 Canvas元素。这使用

function openSidebar() {
    var html = HtmlService.createHtmlOutputFromFile('index');
    SpreadsheetApp.getUi().showSidebar(html);
}

现在我想在 Canvas 元素上显示一些 spreadsheet 单元格条目。我的第一个任务是使用此方法在侧边栏上创建一个箱线图。我有五个包含五点摘要的单元格：min、Q1、Median、Q3、Max，但无法获取 canvas 元素来访问这些值。这是不起作用的：

通过调用以下范围直接访问 <script> </script> 标记之间的单元格：

var range = statsSheet.getRange(4,4);
var min = range.getValue();

它不起作用，因为 statsSheet 是在 Code.gs 文件上创建的。

如果这两行代码直接位于 Code.gs 文件中，则它们确实可以找到单元格值，但是 html 文件中的代码无法访问 min。

我还尝试创建一个单独的 .gs 文件 (boxPlot.gs) 并使用

导入它

<script src = "boxPlot.gs"> </script>

但这仍然不起作用。我无法访问变量 min wither 它是全局变量或 boxPlot.gs 文件中函数的 return 值。

对于如何转换伪代码的任何帮助，我将不胜感激：<html> create canvas;<script> add min which resides at cell (4,4) as text onto the canvas; </script></html>

谢谢

感谢您的帮助，但我仍然无法将变量的值从 Code.gs 文件传递到 index.html 中的 <script> </script> 代码。使用您的建议，我能够将 doSomething() 函数获取到运行，但无法读入 return 值。例如在 Code.gs 文件中，我有做一点事（）{ return("Hello World"); }

在 html 页面中，我有

 <script>
      console.log(google.script.run.doSomething());
 </script>

这会在控制台上显示 "undefined" 而不是 "Hello World"。当然，我希望能够读入更复杂的元素，例如表单条目，但如果我连 "Hello World" return 值都无法读入，那么复杂的任务将永远无法完成。任何建议将不胜感激。

Answer 1

您必须使用 google.script.run 客户端 API 才能从 HTML.

访问服务器端代码

Google Documentation - google.script.run

或使用将运行作为 .gs 服务器功能的小脚本，并在 HTML 提供内容之前将其添加到 HTML。首次打开侧边栏时，小脚本仅运行。因此，当侧边栏首次打开时，使用 scriptlet 作为初始内容。

术语是"Templated HTML"

Google Documentation - Templated HTML

要从服务器接收 return 值返回到 HTML 客户端 JavaScript，您必须使用 .withSuccessHandler(name_of_function_to_receive_return) 方法。

Google Documentation - withSuccessHandler Method

您正在使用以下测试代码：

google.script.run.DoSomething()

为了从服务器接收回 "return"，您必须使用 withSuccessHandler()。

google.script.run
  .withSuccessHandler(functionToHandleTheReturn)
  .DoSomething()

<script>
  function functionToHandleTheReturn(theReturnedValue) {
    alert('here is the returned value: ' + theReturnedValue;
  };
</script>

从嵌入式 html 文件站点访问 google sheet 条目

access a google sheet entry from the embedded html file site

javascript

sidebar

google-sheets

google-apps-script

html5-canvas