如何使用 Google 电子表格作为后端创建 HTML 数据输入表单
Vec*_* JX 5 html r google-sheets google-apps-script google-forms
我有一个谷歌电子表格，每天都会添加一些行，并使用谷歌电子表格，客户反馈团队跟进。
谷歌电子表格数据。
https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing
上面提到的谷歌电子表格总是在谷歌表中有下面提到的数据（以蓝色突出显示）：
Ref ID 公司名称 Contact No.1 Contact No.2 项目名称 Agent ID
其余提到的细节将根据用户响应从 HTML UI 中捕获，最后单击“提交和下一步”或“下一步”，输入将存储在谷歌表中。
用户必须首先在 HTML UI 上输入“代理 ID”，因此Ref ID将向特定的“代理 ID”用户提供一项详细信息。
如所附屏幕截图中所述，根据 googlespread 表，信息的左侧将是静态的，右侧信息将由用户根据电话对话填写。
下面提到的细节将是下拉或单选选项基于用户输入：
Product : Lite, Lite-I, Elite
Ref Code: LIT-1, LIT-2, LIT-3
Status : Accept, Reject, Pending
Comment : Satisfied, Call Back, Pending
下面提到的细节将得到：
Days Passed: It will be derived from the current system year - year mentioned in the `Date`
下面提到的细节将是用户输入的自由文本。
Client Name
Notes
Final_Status
注意：所述药剂将被分配并显示只有那些Ref ID其中Agent ID不为空并且Final_Status是空的，或者比标记Googlespread表“提交＆下一步”其他。
我们需要在 Googlespread 表中再添加一列，一旦Final_Status标记为“提交和下一步”或“下一步” ，它就会根据系统日期捕获日期时间戳
提交和下一步按钮只有在用户捕获所有详细信息时才会启用。仅在Comment选择选项时才会启用下一步按钮。
此外，如果使用 UI 的数据输入在 googlesheet 中没有可用的新行，则 UI 将通过单击“提交和下一步”或“在空白屏幕上向用户抛出“没有新任务可用”的消息下一步'按钮。
预期用户界面：
根据电子表格上的标题信息创建数据输入对话框
代码.gs：
function onOpen() {
SpreadsheetApp.getUi().createMenu("My Menu")
.addItem('Launch Dialog','launchTheFormAsDialog')
.addToUi();
}
function buildForm() {
var searchColumnName='RefId';
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet1');
var tA=sh.getRange(1,1,1,sh.getLastColumn()).getValues()[0];
var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
tA.splice(1,5);
var ftA=tA.slice();
hA.splice(1,5);
var fA=hA.slice();
var dstr=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd");
var html='<style>input{margin:2px 5px 2px 0;}</style><form id="myForm">';
for(var i=0;i<fA.length;i++) {
switch(ftA[i]){
case 'date':
html+=Utilities.formatString('<br /><input type="%s" value="%s" name="%s" /> %s',ftA[i],dstr,fA[i],fA[i]);
break;
default:
html+=Utilities.formatString('<br /><input type="%s" name="%s" /> %s',ftA[i],fA[i],fA[i]);
break;
}
}
html+='<br /><input type="button" value="Submit" onclick="submitForm(this.parentNode)" /></form>';
return {html:html};
}
function testUpload() {
upload({'Status':'none', 'Comment':'to long to fit', 'ClientName':'Don Trump', 'RefCode':'Tweeter', 'Final_Status':'impeachment', 'Product':'Bullshit', 'RefId':'id3', 'DaysPassed':'12', 'Final_Status_Date':'2019-12-23', 'Date':'2019-12-23', 'Notes':'none'})
}
function upload(theForm) {
Logger.log(theForm);
var kA=Object.keys(theForm);
kA.splice(kA.indexOf('refId'),1);//remove refID
Logger.log(kA);
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet1');
var hA=sh.getRange(2,1,1,sh.getLastColumn()).getValues()[0];
var hObj={};
hA.forEach(function(e,i){hObj[e]=i+1});
Logger.log(hObj);
var vA=sh.getRange(3,1,sh.getLastRow()-2,2).getValues();
for(var i=0;i<vA.length;i++) {
if(theForm.RefId==vA[i][0]) {
kA.forEach(function(key){
Logger.log(hObj[key]);
Logger.log(theForm[key]);
sh.getRange(i+3,hObj[key]).setValue(theForm[key]);
});
}
}
return buildForm();
}
function launchTheFormAsDialog() {
var ui=HtmlService.createHtmlOutputFromFile('theform').setHeight(550);
SpreadsheetApp.getUi().showModelessDialog(ui, "Form Data Entry");
}
表单.html：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(function(){
google.script.run
.withSuccessHandler(function(obj){
$('#formDiv').html(obj.html);
})
.buildForm();
});
});
function submitForm(frmData) {
google.script.run
.withSuccessHandler(function(obj){
//console.log('flag1');
$('#formDiv').html(obj.html);
})
.upload(frmData);
}
function updateSelect(vA,id){
var id=id || 'sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++) {
select.options[i] = new Option(vA[i][1],vA[i][0]);
}
}
console.log('My Code');
</script>
</head>
<body>
<h1 id="main-heading">Form Data Entry</h1>
<div id="formDiv"></div>
</body>
</html>
我的电子表格：
我添加了输入数据类型，以便可以初始化日期字段，并且即使添加或移动列，也可以完全根据电子表格上的数据构建表单。您始终可以隐藏该行，因为它位于顶部。
对话框：
