如何使用Google电子表格作为后端创建HTML数据输入表单
我有一个谷歌电子表格，其中一些行附加在日常的基础上，并使用谷歌电子表格，客户反馈小组跟进。
谷歌电子表格数据。
https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing
在上面提到的Google电子表格中，总是有以下提到的数据在google (以蓝色突出显示)：
公司名称联系人1联系人2项目名称代理ID
其余的细节将从HTML基础上获取用户响应，最后单击“Submit&Next”或“Next”，输入将存储在google中。
用户必须首先在HTML上输入'Agent‘，并相应地将一个接一个的Ref ID细节提供给特定的'Agent’用户。
正如所附的屏幕截图中所提到的，信息的左侧将是静态的，而右侧的信息将由用户在电话会话的基础上填充。
以下所述详情将根据用户输入资料或无线电选项输入：
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不是空白的，也不是‘提交&下一步’，在marked扩展的表格中标记。
我们需要在column扩展表中再添加一列，只要Final_Status标记为'Submit &Next‘或'Next’，就可以捕获系统日期的日期时间戳。
Submit & Next按钮只有在用户捕获所有详细信息时才能启用。下一步，只有在选择Comment选项时才启用按钮。
此外，如果googlesheet中没有使用UI的新行，则UI将通过单击“Submit&Next”或“Next”按钮，向用户抛出在空白屏幕上“没有新任务可用”的消息。
预期UI：
回答 4
Stack Overflow用户
发布于 2019-12-23 07:28:33
从电子表格上的报头信息创建的数据输入对话框
Code.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");
}theform.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>我的电子表格：
我添加了输入数据类型，以便初始化日期字段，并使表单可以完全从电子表格上的数据构建，即使添加或移动了列。你总是可以把那一行藏起来，因为它在上面。
对话框：
Stack Overflow用户
发布于 2019-12-11 16:38:44
看起来Google应用程序开发人员文档有一个类似于此的不错的指南：
对于构建web应用程序或在Google、Sheet和Forms中添加自定义用户界面非常有用。
https://developers.google.com/apps-script/guides/html
看起来您需要授予Google应用程序脚本访问权限，然后添加一个：
https://developers.google.com/apps-script/guides/standalone
您可以创建独立脚本，也可以手动连接项目：
转到Google并单击New > More > Connect更多应用程序。 当“连接应用程序到驱动器”窗口出现时，在搜索框中键入"script“并按Enter键。 单击Google脚本列表旁边的Connect。
Google的脚本示例显示，您的脚本应该如下所示：
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Dialog')
.addItem('Open', 'openDialog')
.addToUi();
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Index');
SpreadsheetApp.getUi()
.showModalDialog(html, 'Dialog title');
}使用相应的HTML：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
My Google Sheets Interface.
<input type="button" value="Close"
onclick="google.script.host.close()" />
</body>
</html>这里似乎有很好的文档：
https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app
所以我想说那是个很好的开始。你想要达到的目标看上去是可行的，我认为这将是一个调整谷歌脚本支持的问题。
祝你好运！
https://stackoverflow.com/questions/59288795
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号