.gs / .html-使用表單元素，HTML服務和電子表格的Google Apps腳本作為網絡應用程序

Question

我目前正在嘗試從“網絡應用程序”角度學習一些“ Google Apps腳本”基礎知識。 我想使用“ HTML服務”，因為舊的“ UI服務”現在已折舊。

基本上，我要完成的工作是在“名稱”文本輸入框中鍵入一個名稱，然后單擊“提交”按鈕，然后應使用輸入的值填充電子表格。 我認為下面的代碼接近我需要的代碼，但是我不確定如何將它們綁在一起，因此表單元素可以與.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

通常，“提交”按鈕與“表單”一起使用。 您在表單中沒有“提交”按鈕。 注意第一個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>

代碼

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

這是一些基本結構。 您將需要對其進行修改和更正。