使用Google Apps脚本的HtmlService

时间:2014-12-24 08:13:07

标签: google-apps-script

我看到许多使用UiApp的例子,但无法弄清楚如何使用HtmlService。例如:

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

使用HtmlService,如何使用这样的列表框创建HTML文件?我会采用相同的方法吗?

1 个答案:

答案 0 :(得分:3)

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

这是一个简单的示例,它创建一个包含使用模板化HTML填充的列表的表单。提交后,它会发布到doPost()函数。 (注意:将脚本发布为Web应用程序。)

Code.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>

Thanks.html

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