如何构建一个扩展，以保存HTML表单的值到电子表格使用应用程序脚本

How to build an extension to save values of HTML form to spreadsheet using app script

本文关键字：表单 电子表格 应用程序 HTML 脚本 构建 何构建 一个 扩展 保存      更新时间：2023-09-26

我试图建立一个扩展，以保存HTML表单的值使用谷歌应用程序脚本的电子表格。

我能够保存当我发布作为一个web应用程序通过应用程序脚本。
但是当我尝试从一个不工作的扩展相同。

当我们提交表单时，如何调用应用程序脚本URL以从扩展发布值到电子表格?

HTML: 

<form name="input">
    <!-- fieldset draws a border around all the input elements -->
    <fieldset>
        <!-- There are form attributes, like type, name, id -->
        <input type="text" value="Manufacturer"
            class="ss-q-short" id="id_Maker" dir="auto" aria-required="true"
            title=""> <br>
        <br>
        <br> <input type="button" value="Save Input"
            onclick="WriteInput()"> <input type="reset" value="Reset">
    </fieldset>
</form>

JS文件:

<script>
     function WriteInput() {
     alert("hello");
        var d=new Date();
        var daMonth = d.getMonth() + 1;
        var ToInputStrng = (daMonth + "/" + d.getDate() + "/" + d.getFullYear()  + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
         alert(ToInputStrng);
        var strngTwo = document.getElementById('id_Maker').value;
        alert(strngTwo);
        google.script.run.withFailureHandler(onFailure)
           .withSuccessHandler(onSuccess)
           .AddToSheet(ToInputStrng, strngTwo);
    }
</script>

应用程序脚本:

function doGet(){
    return HtmlService.createHtmlOutputFromFile('OfferedInput')
            .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function AddToSheet(InputData, InputTwo){
    var sheet = SpreadsheetApp.openById("Put the spreadsheet ID here");
    return sheet.appendRow([InputData, InputTwo]);
}

将"scriptlet"放入"OfferedInput" HTML文件中。"scriptlet"为<?!= include("JS"); ?>。确保在HTML中使用<!DOCTYPE html><html>和<body>标签:

<!DOCTYPE html>
<html>
  <head>
  <?!= include("JS"); ?>
  </head>
  <body>
  <form name="input">
    <!-- fieldset draws a border around all the input elements -->
    <fieldset>
        <!-- There are form attributes, like type, name, id -->
        <input type="text" value="Manufacturer"
            class="ss-q-short" id="id_Maker" dir="auto" aria-required="true"
            title="">
        <br>
        <br>
        <br> 
        <input type="button" value="Save Input" onclick="WriteInput()"> 
        <input type="reset" value="Reset">
    </fieldset>
  </form>
  </body>
</html>

脚本使HTML文件成为"模板"。现在必须在doGet()中使用createTemplateFromFile()方法。你需要一个include()函数。

function doGet() {
  var template = HtmlService.createTemplateFromFile('OfferedInput');
  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
};
function include(filename) {
  //Logger.log('filename: ' + filename)
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
};

将沙箱模式设置为IFRAME, NATIVE被认为已弃用。

相关文章：