创建一个带有两个文本框的 HTML UI 表单。在 Google 个电子表格中使用回复

Question

需要的东西可能很简单，但我不知道该怎么做。

我需要一个带有 google 脚本的电子表格，该脚本提示用户在 html 表单中输入三个值。（名字，姓氏，汽车）这些值需要在脚本的其余部分可以访问。

UI 服务已弃用，所以我想了解如何使用 HTML 服务

这是我目前所掌握的。我创建了一个简单的 Google 脚本：

   function openForm() {
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheetByName('HTML');
    var firstNameRange = sheet.getRange('A1');
    var lastNameRange = sheet.getRange('A2');
    var carRange = sheet.getRange('A3');

var html = HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);

SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Fill in this form');

 //----I want the responses of the form in 'index.html' to be used here. 
 //The openById thing is what is not working...

    var firstname = html.openById('firstname'); 
    var lastname = html.openById('lastname');
    var car = html.openById('car');

 firstNameRange.setValue(firstname);
 lastNameRange.setValue(lastname);
 carRange.setValue(car);

}

我还创建了一个名为 'index.html' 的 HTML 文件：

<div>
<form> First name:<br>
<input type="text" id="firstname" name="firstname">
<br>   Last name:<br>
<input type="text" id="lastname" name="lastname">
<br>   Car:<br>
<select id="car" name="Car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
<br><input type="submit" value="Submit" id="submitbotton" onclick="google.script.host.close()">    </form>
</div>

Here is an example of the script in a spreadsheet so far. 我现在一直在使用多个提示，但使用 HTML 形式的答案将对下一个 google 脚本项目有很大帮助。

如有任何帮助，我们将不胜感激！

Answer 1

建议：创建新的 google 表单而不是在 index.html 中创建表单，再次将 google 电子表格中的回复收集到 HTML 中。帮助可以是 https://developers.google.com/apps-script/guides/html/templates:

function getData() {
//  var s = SpreadsheetApp.getActive().getId();
return SpreadsheetApp
      .openById(id)
      .getActiveSheet()
      .getDataRange()
      .getValues();
};

index.html

<? 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>

Answer 2

这一行：

var sheet = ss.getSheetByName('HTML');

不工作。

应该是：

var sheet = ss.getSheetByName('HTML-responses');

您缺少打开对话框所需的 return 语句：

SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
  .showModalDialog(html, 'Fill in this form');
  return;

您的 onclick 活动有误，目前是：

<input type="submit" value="Submit" id="submitbutton" onclick="google.script.host.close()">

需要 google.script.run API 调用：

你的 HTML 应该是这样的：

<div>
  <form> First name:<br>
    <input type="text" id="firstname" name="firstname">
    <br>   Last name:<br>
    <input type="text" id="lastname" name="lastname">
    <br>   Car:<br>
    <select id="car" name="Car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    <br><input type="submit" value="Submit" id="submitbutton" onmouseup="writeFormData()">
  </form>
</div>

<script>
  window.writeFormData = function() {
    console.log('writeFormData ran!');
    var firstNameIs = document.getElementById("firstname").value;
    var lastNameIs = document.getElementById("lastname").value;
    var carIs = document.getElementById("car").value;

    google.script.run
      .withSuccessHandler(dataWasWritten)
      .processForm(firstNameIs, lastNameIs, carIs);
  };

  window.dataWasWritten = function() {
    console.log('dataWasWritten ran');
  };
</script>

.gs 代码应该是这样的：

 function onOpen() {
   //Runs when spreadsheet opens 
   openForm();
 };

 function openForm() {
   Logger.log('openForm ran!');

   var html = HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);

    SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Fill in this form');
      return;
 };

 function processForm(argFirstName, argLastName, argCar) {
   Logger.log('argFirstName: ' + argFirstName);

   var ss = SpreadsheetApp.getActiveSpreadsheet();

   var sheet = ss.getSheetByName('HTML-responses');

   var firstNameRange = sheet.getRange('A1');
   var lastNameRange = sheet.getRange('A2');
   var carRange = sheet.getRange('A3');

   firstNameRange.setValue(argFirstName);
   lastNameRange.setValue(argLastName);
   carRange.setValue(argCar);
 };

创建一个带有两个文本框的 HTML UI 表单。在 Google 个电子表格中使用回复

Create a HTML UI form with two textboxes. Use responses in Google Spreadsheets

google-sheets

google-apps-script