如何将HTML界面中的多个输入添加到Google Spreadsheet？ [英] How can I add multiple inputs from an HTML UI to a Google Spreadsheet?

查看：127
本文介绍了如何将HTML界面中的多个输入添加到Google Spreadsheet？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个电子表格，其中包含一个链接到我的Google Apps脚本中的功能的按钮， openInputDialog 。我希望得到的结果是，按下按钮将打开一个HTML用户界面，用户可以在其中输入文本到五个字段，文本从该输入中获取并附加到电子表格底部的新行。我遇到了点击提交按钮时没有任何反应的问题;该对话框不会关闭，更重要的是，没有新的行添加了输入的值。



代码如下：

>

addItem.gs：


$ b 

  function openInputDialog ）{
 var html = HtmlService.createHtmlOutputFromFile（'Index'）
 return HtmlService.createHtmlOutputFromFile（'Index'）
 .setSandboxMode（HtmlService.SandboxMode.IFRAME）; 
 SpreadsheetApp.getUi（）
 .showModalDialog（html，'添加项目'）; 
} 
 
函数itemAdd（）{
 var ss = SpreadsheetApp.getActiveSpreadsheet（）; 
 var sheet = ss.getSheets（）[0]; 
 sheet.appendRow（[，'category'，'item'，'manupub'，'details'，'quantity']）; 
}

Index.html：

 <！DOCTYPE html> 
< html> 
< head> 
< base target =_ top> 
< / head> 
< br> 
< form> 
分类：< br> 
< input type =textname =category> 
< br> 
产品：< br> 
< input type =textname =item> 
< br> 
制造商或出版商：< br> 
< input type =textname =manupub> 
< br> 
详情：< br> 
< input type =textname =details> 
< br> 
数量：< br> 
< input type =textname =quantity> 
< br>< br> 
< input type =submitvalue =添加项目> 
< / form> 
< script> 
 google.script.run.addItem（）; 
< / script> 
< / html>

我很确定我的问题的答案在于某个简单问题或某些部分的滥用但我的编程知识目前还不足以正确理解我一直在阅读的Google Apps脚本文档。

解决方案



 < script>您的脚本目前正在调用不带参数的addItem。 
 google.script.run.addItem（）; 
< / script>

相反，您需要在点击Submit按钮时调用该函数。虽然我们在Google Apps脚本中使用HTML表单，但我们无法使用正常的提交操作;相反，我们设置了一个输入按钮，并使用点击处理程序来收集表单内容并将其传送到服务器功能。



您的提交按钮可以是这样的： 

 < input type =buttonvalue =Submit
 onclick =google.script.run 
 .withSuccessHandler（google.script.host.close）
 .addItem（this.parentNode）/>

当响应为 return ed来自跑步者， addItem（）。要关闭对话框，请使用 google.script.host.close 。你也可以有一个失败处理程序; （注意：你的 itemAdd 在你的<$ c中） $ c> gs ，但是 addItem 在你的JavaScript中 - 这是永远不会有效的。）



您的 openInputDialog（）函数是奇数;它有一个不必要的 return ，它可以阻止对话框显示出来，这可能是一些调试尝试的结果。



当runner函数 itemAdd（）被调用时，它应该传递HTML表单的内容。由于提交按钮是该表单的一部分，表单的字段在DOM中显示为其父节点的属性;因此点击处理程序将 this.parentNode 作为参数传递给跑步者。



在服务器端， itemAdd（）接收表单对象，所以我们需要一个参数来促进对它的操作。命名的表单字段然后被引用，如下所示：

  sheet.appendRow（[，form.category，form.item， form.manupub，form.details，form.quantity]）;

无论如何，现在这个工作：



addItem.gs 



 函数openInputDialog（）{
 var html = HtmlService.createHtmlOutputFromFile（'Index'）。setSandboxMode（HtmlService.SandboxMode.IFRAME）; 
 SpreadsheetApp.getUi（）
 .showModalDialog（html，'添加项目'）; 
} 
 
 function itemAdd（form）{
 var ss = SpreadsheetApp.getActiveSpreadsheet（）; 
 var sheet = ss.getSheets（）[0]; 
 sheet.appendRow（[，form.category，form.item，form.manupub，form.details，form.quantity]）; 
返回true; 
}



Index.html 



 <！DOCTYPE html> 
< html> 
< head> 
< base target =_ top> 
< / head> 
< br> 
< form> 
分类：< br> 
< input type =textname =category> 
< br> 
产品：< br> 
< input type =textname =item> 
< br> 
制造商或出版商：< br> 
< input type =textname =manupub> 
< br> 
详情：< br> 
< input type =textname =details> 
< br> 
数量：< br> 
< input type =textname =quantity> 
< br>< br> 
< input type =buttonvalue =Submit
 onclick =google.script.run 
 .withSuccessHandler（google.script.host.close）
 .itemAdd （this.parentNode）/> 
< / form> 
< / html>


I've got a spreadsheet with a button that links to a function in my Google Apps Script, openInputDialog. My desired outcome is that pushing the button opens an HTML UI where a user can input text to five fields, and the text is taken from that input and appended to a new row at the bottom of the spreadsheet. I'm experiencing an issue where when clicking the submit button nothing happens; the dialog does not close, and more importantly, there is not a new row appended with the values that are input in it.

The code is as follows:

addItem.gs:

function openInputDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
  return HtmlService.createHtmlOutputFromFile('Index')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
  .showModalDialog(html, 'Add Item');
}

function itemAdd() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  sheet.appendRow(["  ", 'category', 'item', 'manupub', 'details', 'quantity']);
}

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Category:<br>
    <input type="text" name="category">
    <br>
    Item:<br>
    <input type="text" name="item">
    <br>
    Manufacturer or Publisher:<br>
    <input type="text" name="manupub">
    <br>
    Details:<br>
    <input type="text" name="details">
    <br>
    Quantity:<br>
    <input type="text" name="quantity">
    <br><br>
    <input type="submit" value="Add Item">   
    </form>
    <script>
     google.script.run.addItem();
    </script>
</html>

I'm pretty sure that the answer to my issue lies with some simple problem or misuse of some part of this script, but my programming knowledge is currently not good enough to properly understand the Google Apps Script documentation that I've been reading.

解决方案

Your script is currently calling addItem with no parameters, as soon as the page loads:

<script>
 google.script.run.addItem();
</script>

Instead, you need to call this function when the Submit button is clicked. While we use HTML forms in Google Apps Script, we can't use the normal submit action; instead, we set up an input button, and use a click handler to collect the form content and transfer it to the server function.

Your Submit button could be something like this:

  <input type="button" value="Submit"
    onclick="google.script.run
        .withSuccessHandler(google.script.host.close)
        .addItem(this.parentNode)" />

The success handler will be invoked when a response is returned from the runner, addItem(). To just close the dialog, use google.script.host.close. You could also have a failure handler; it would be invoked if the runner threw an exception.

(Note: you had itemAdd in your gs, but addItem in your JavaScript - that would never have worked.)

Your openInputDialog() function is odd; it has an unnecessary return in it that would stop the dialog from showing up, probably left over from some debugging attempt.

When the runner function, itemAdd(), gets called, it should be passed the content of the HTML form. Since the submit button is a part of that form, the fields of the form appear as properties of its parent node in the DOM; so the click handler passes this.parentNode as a parameter to the runner.

On the server side, itemAdd() receives the form object, so we need a parameter to facilitate operations on it. The named form fields are then referenced like this: 

sheet.appendRow(["  ", form.category, form.item, form.manupub, form.details, form.quantity]);

Anyway, this works now:

addItem.gs

function openInputDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
       .showModalDialog(html, 'Add Item');
}

function itemAdd(form) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  sheet.appendRow(["  ", form.category, form.item, form.manupub, form.details, form.quantity]);
  return true;
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Category:<br>
    <input type="text" name="category">
    <br>
    Item:<br>
    <input type="text" name="item">
    <br>
    Manufacturer or Publisher:<br>
    <input type="text" name="manupub">
    <br>
    Details:<br>
    <input type="text" name="details">
    <br>
    Quantity:<br>
    <input type="text" name="quantity">
    <br><br>
     <input type="button" value="Submit"
        onclick="google.script.run
            .withSuccessHandler(google.script.host.close)
            .itemAdd(this.parentNode)" />
    </form>
</html>

这篇关于如何将HTML界面中的多个输入添加到Google Spreadsheet？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆