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

这一行：

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);
 };

Answer 2

建议：创建新的Google表单而不是在index.html中创建表单，再次将其从谷歌电子表格中的响应收集到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>

使用两个文本框创建HTML UI表单。在Google Spreadsheets中使用回复

2 个答案: