.gs/.html - Google Apps 脚本作为使用表单元素的 Web 应用程序，Html 服务和电子表格

Question

我目前正在尝试从 'Web Application' 角度学习一些 'Google Apps Script' 基础知识。我想使用 'HTML Service'，因为旧的 'UI Service' 现在已经折旧了。

基本上我想要完成的是在 'name' 文本输入中键入一个名称，然后单击 'Submit' 按钮，该按钮随后应使用输入的值填充电子表格。我认为下面的代码接近我需要的代码，但我不确定如何将它们结合在一起，以便表单元素与 .gs 代码一起使用。

目前，我发布的代码在电子表格打开时会在适当的位置写入一个值。

非常感谢任何帮助。 index.html

<div>
    <? var submit = insertInSS(); ?>
    <p>Add a Name:</p>

    <input type="text" name="name">
    <input type="submit"  name="submit"  value="Submit">

    <hr>
    <? var data = getData(); ?>

    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
      <tr>
      <? for (var j = 0; j < data[i].length; j++) { ?>
      <td><?= data[i][j] ?></td>
      <? } ?>
      </tr>
      <? } ?>
    </table>

</div>

我的 code.gs 看起来像下面这样

  var submissioSSKey = '1234567890abcdefghijklmnopqrstuvwkyz';
    function doGet() {
      return HtmlService
        .createTemplateFromFile('index')
        .evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    }

function getData() {
return SpreadsheetApp
  .openById(submissioSSKey)
  .getActiveSheet()
  .getDataRange()
  .getValues(); 
}

    function insertInSS(){
      var ss = SpreadsheetApp.openById(submissioSSKey);
      var sheet = ss.getActiveSheet();
      var lastRow = ss.getLastRow();
      var cell = sheet.getRange(lastRow+1, 1, 1,1);
      cell.setValue("name");
    }

此致，

克里斯

Answer 1

通常 SUBMIT 按钮与 FORM 一起使用。您在表单中没有提交按钮。请注意第一个 FORM 标记中的 onsubmit 事件侦听器。您不需要通过这种方式将触发器配置为运行脚本，还有其他方法。

表单和按钮 HTML

<div id="inputDiv">
  <form id="inputForm" onsubmit="fncWriteInputData()">
    <label>Some Label Text Here:</label>
    <br>
    <input type="text" tabindex="1" id="idFirstInput" class="inptFld" placeholder="Msg To User Here" required><br />
    <label>Label Two Here:</label>
    <br>
    <input type="text" tabindex="2" id="idInputTwo" class="inptFldSgn" required><br />
    <input type="submit" tabindex="3" id="btnSubmitInput" value="Click To Submit">
  </form>
</div>

HTML 脚本标签

<script>
  window.fncWriteInputData=function(){
    console.log("fncWriteInputData ran");
    google.script.run
    .fncRunAppScript(); //Runs server side .gs function

</script>

Code.gs

function fncRunAppScript() {
  Code here . . . 
  return someValue;
};

这是一些基本结构。您将需要根据需要修改和更正它。

.gs/.html - Google Apps 脚本作为使用表单元素的 Web 应用程序，Html 服务和电子表格

.gs/.html - Google Apps Script as a Web App using Form Elements, Html Service and a spreadsheet

html

javascript

google-sheets

google-apps-script

表单和按钮 HTML

HTML 脚本标签

Code.gs