将动态值从 HTML 表单导入到应用脚本中



我对HTML和App-Script都是全新的。我在这里的目的是让谷歌工作表中的选项动态列表填充HTML中的列表框,然后当用户选择HTML列表框中的值并点击提交按钮时,将该值导入回App-Script,以便我可以将其附加到另一个googlesheet。任何帮助将不胜感激!

function getValuesFromSpreadsheet() { // Retrieve values from Googlesheet and send to HTML
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");  
return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
}

function update_status() { //Open the HTML Form
var html = HtmlService.createHtmlOutputFromFile('lists')
.setWidth(200)
.setHeight(300);
SpreadsheetApp.getUi() 
.showModalDialog(html, 'Update Status');
}

function createAgenda(form) { // Retrieve values from HTML Form
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var lr = ss.getLastRow();
var text = form.neworder;  //attempt to get HTML listbox value

sheet.appendRow([form.neworder]);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>  
<div class="dropdown"></div>
<br>
<form>
Select PO / Order:<br>
<body onload="loadOrders()"></body>
<div id="myDropdown" class="dropdown-content" name="neworder"></div>
<input type="submit" value="Submit" class="submit" 
onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.createAgenda(this.parentNode)"/>
</form>


</html>

<script>
function loadOrders() {
google.script.run.withSuccessHandler(function(ar) {
let select = document.createElement("select");
select.id = "select1";
select.setAttribute("onchange", "selected()");
document.getElementById("myDropdown").appendChild(select);
ar.forEach(function(e, i) {
let option = document.createElement("option");
option.value = i;
option.text = e;
document.getElementById("select1").appendChild(option);
});
}).getValuesFromSpreadsheet();
};
function selected() {
const value = document.getElementById("select1").value;
console.log(value);
}
</script>

thisNode

不会返回您期望的内容。它返回所选项的index,而不是项本身。另外,form没有属性neworder,该属性是空字符串""。我仍然可以通过返回工作表来检索所选值,下面的代码可以工作。大量用于调试的控制台日志。

function getValuesFromSpreadsheet() { // Retrieve values from Googlesheet and send to HTML
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");  
console.log(JSON.stringify(sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues()));
return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
}

function update_status() { //Open the HTML Form
var html = HtmlService.createHtmlOutputFromFile('lists')
.setWidth(200)
.setHeight(300);
SpreadsheetApp.getUi() 
.showModalDialog(html, 'Update Status');
}

function createAgenda(form) { // Retrieve values from HTML Form
console.log(JSON.stringify(form));
console.log(form[""]);
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
//var lr = ss.getLastRow();
//var text = form.neworder;  //attempt to get HTML listbox value
var selected_order = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data").getRange(form[""]+1, 1).getValue();
sheet.appendRow([selected_order]);
}

解释/问题:

服务器端函数getValuesFromSpreadsheet()返回一个 2D 数组,而由google.script.run.withSuccessHandler执行的客户端函数接受ar,这应该是元素的一维数组。

因此,forEach循环不会遍历单个值,而是遍历数组。

假设其他一切正常,您需要返回一个 1D 数组。由于您要创建一个下拉列表,因此我认为所需的值也应该是唯一的。因此,我提出以下修改:

var values = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().flat();
return [...new Set(values)];

它使用 flat 将数组转换为 1D,并使用 Set 获取唯一值。

溶液:

将服务器端getValuesFromSpreadsheet函数替换为:

function getValuesFromSpreadsheet() { // Retrieve values from Googlesheet and send to HTML
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");  
var values = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().flat();
return [...new Set(values)];
}

相关内容

最新更新