使用 Google Apps Script HtmlService答案

【问题标题】：work with Google Apps Script's HtmlService使用 Google Apps Script HtmlService
【发布时间】：2015-02-22 09:10:01
【问题描述】：

我看到很多使用 UiApp 的例子，但不知道如何使用 HtmlService。例如：

var app = UiApp.getActiveApplication();
...
app.createListBox().setName('list').setId('list')
...
app.getElementById('list').clear(); 
app.getElementById('list').addItem(...);

使用 HtmlService，我如何创建一个带有这样一个列表框的 HTML 文件？我会有同样的方法吗？

【问题讨论】：

标签： google-apps-script

【解决方案1】：

HtmlService 与 UiApp 根本不同，但与“普通”HTML 开发非常接近，因为该应用程序主要基于客户端。因此，您可能熟悉的 UiApp 方法在 HtmlService 中没有直接等效的方法。实际上，“服务”只是提供了组装和显示用户界面的方法，并实现了它们与服务器端 GAS 功能之间的安全通信。

下面是一个简单的示例，它创建了一个带有使用模板化 HTML 填充的列表的表单。提交后，它会发布到doPost() 函数。（注意：将脚本发布为 Web 应用程序。）

代码.gs

// Adapted from http://stackoverflow.com/a/11300412/1677912

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  template.listId = "browsers";
  template.datalist = ["Internet Explorer","Firefox","Chrome","Opera","Safari"];
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  template.browser = e.parameter.browsers;
  return template.evaluate();
}

Form.html

<html>
  <body>
    <h1>Select a browser</h1>
    <form action="<?= action ?>" method="post">
      <input list="<?= listId ?>" name="<?= listId ?>">
      <datalist id="<?= listId ?>">
        <? for (var i=0; i<datalist.length; i++) { ?>
          <option value="<?= datalist[i] ?>">
        <? } ?>
      </datalist> 
      <input type="submit" value="Submit" />
      </form>
  </body>
</html>

谢谢.html

<html>
  <body>
    <h1>Thanks</h1>
    <p>Thank you for your response.</p>
    Browser: "<?= browser ?>"<br/>
  </body>
</html>

【讨论】：

那么，我如何获得丰富的小部件？我可以像 UiApp 一样获得 GWT 吗？还是我需要找到自己的小部件库并使用它？
本周之前，jQueryUI 是丰富小部件的最佳选择，因为它们通常与 Google 的 Caja 清理程序一起使用。（有numerous examples here。）不过，现在，使用SandboxMode.IFRAME，您应该能够适应几乎任何javascript 框架。