如何从Google库运行HTML? [英] How to run HTML from google library?
问题描述
我有一个带有HTML表单，处理表单脚本addNewItem和用于在弹出窗口addItem中运行该表单的脚本的Google图书馆.
I have a Google Library with HTML form, process form script addNewItemand script to run the form in popup window addItem.
function addItem()
{
var html = HtmlService.createHtmlOutputFromFile('input/form.html');
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add New Recipe');
}
function addNewItem(form_data)
{
var url = "SPREADSHEET_URL_TO_DATA_COLLECTION";
var ss = SpreadsheetApp.openByUrl(url);
var sheet = ss.getSheetByName('List');
var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
var dishName = form_data.dish_name;
var cuisineName = form_data.cuisine_name;
var placeName = form_data.place_name;
var categoryName = form_data.category_name;
var num = sheet.getRange(sheet.getLastRow(), 1).getValue() + 1 || sheet.getLastRow();
sheet.appendRow([num, dishName, cuisineName, placeName, categoryName, asiaTime]);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form id="myform">
<div class="block form-group">
<label for="dish_name">Dish name</label>
<input type='text' name='dish_name' id="dish_name" required="required"/>
</div>
<div class="block form-group">
<label for="place_name">Place</label>
<select id="place_name" name="place_name" type="text" required>
<option value="LL4H">LL4H</option>
<option value="LL4T">LL4T</option>
</select>
</div>
<div class="block form-group">
<label for="cuisine_name">Cuisine</label>
<select id="cuisine_name" name="cuisine_name" type="text" required>
<option value="Asian">Asian</option>
<option value="Western">Western</option>
</select>
</div>
<div class="block form-group">
<label for="category_name">Category</label>
<input id="category_name" name="category_name" type="text" list="quote-choices" required>
<datalist id="quote-choices">
<option value="Starter">Starter</option>
<option value="Main course">Main course</option>
<option value="Veggi side">Veggi side</option>
<option value="Carbs side">Carbs side</option>
<option value="Dessert">Dessert</option>
<option value="Dough">Dough</option>
<option value="Sauce">Sauce</option>
<option value="Drink">Drink</option>
<option value="Other">Other</option>
</datalist>
</div>
<div class="block">
<button type="submit" class="action">Submit</button>
</div>
</form>
<script>
document.querySelector("#myform").addEventListener("submit",
function(e)
{
e.preventDefault(); //stop form from submitting
console.log(this)
google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
}
);
</script>
</body>
</html>
我将此库与Google Spreadsheet连接起来，并声明了新函数来运行库脚本以打开表单.
I connected this Library with the Google Spreadsheet and declared new function to run library script to open the form.
function createRecipe() {
RecipeBuilder.addItem();
}
function addNewItem(form_data) {
RecipeBuilder.addNewItem(form_data);
}
表格很好地出现在弹出窗口中.
Form appears in popup window well.
我单击Submit从表单提交数据，但是服务器端进程未启动.
I click Submit to submit my data from the form, but serverside process does not start.
如何正确运行此表格?我哪里错了?如何解决?
How to run this form correct? Where I'm wrong? How to fix it?
它仍然不能与库一起使用，但是如果我将其放在某些电子表格的绑定容器脚本中，则可以很好地工作.不幸的是，我不能在绑定容器中使用它，因为addNewItem(form_data)函数的完整代码必须复制当前的电子表格.最终将是1000多个具有相同数量的绑定容器的Google Spreadsheets.更新它会超级复杂
It's still does not work with library but works well if I put it in bound-container script of some spreadsheet. Unfortunately, I can't use it in bound-container because full code of addNewItem(form_data) function must replicate current spreadsheet. Finally it will be 1000+ Google Spreadsheets with same numbers of bound-containers. It will be super complicated to update it
推荐答案
我相信您的目标和情况如下.
I believe your goal and situation as follows.
- 您要将
addItem()，addNewItem(form_data)和input/form.html用作GAS库. - 从客户端调用此库时，单击提交"按钮时，不会发送数据.
- 您要删除此问题.
- You want to use
addItem(),addNewItem(form_data)andinput/form.htmlas a GAS library. - When you call this library from the client side, when the submit button is clicked, the data is not sent.
- You want to remove this issue.
为此，该修改如何?
- 我认为您遇到问题的原因是
google.script.run.addNewItem(this);.在这种情况下，运行addNewItem(this)时，将从GAS项目中搜索此功能.这样，将发生类似于Uncaught TypeError: google.script.run.addNewItem is not a function的错误.我认为这是您遇到问题的原因.
- I think that the reason of your issue is
google.script.run.addNewItem(this);. In this case, whenaddNewItem(this)is run, this function is searched from the GAS project. By this, an error occurs likeUncaught TypeError: google.script.run.addNewItem is not a function. I think that this is the reason of your issue.
为了消除此问题，如何进行以下修改?在此修改中，客户端又添加了一个功能.
In order to remove this issue, how about the following modification? In this modification, one more function is added to the client side.
function createRecipe() { RecipeBuilder.addItem(); } // Added function addNewItem(form_data) { RecipeBuilder.addNewItem(form_data); }- 这样，当在库侧运行
google.script.run.addNewItem(this);时，将运行客户端的addNewItem，然后运行库侧的RecipeBuilder.addNewItem. - By this, when
google.script.run.addNewItem(this);is run at the library side,addNewItemof client side is run, and then,RecipeBuilder.addNewItemof the library side is run. -
在库端的Javascript中，按顺序运行
google.script.run.addNewItem(this);和google.script.host.close();.但是google.script.run可用于异步过程.因此，如果addNewItem(this)的进程很慢，则在运行addNewItem(this)之前可能会关闭对话框.因此，我认为也可以使用以下修改形式. In your Javascript of library side,
google.script.run.addNewItem(this);andgoogle.script.host.close();are run in order. Butgoogle.script.runworks with the asynchronous process. So if the process ofaddNewItem(this)is slow, the dialog might be closed beforeaddNewItem(this)is run. So I think that the following modification might be also used.-
来自
From
google.script.run.addNewItem(this); google.script.host.close();//close this dialogbox -
收件人
To
google.script.run.withSuccessHandler(()=> google.script.host.close()).addNewItem(this);
这篇关于如何从Google库运行HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
