[英]use an array from Google Sheets to create a data list in html that can be served to a Google Apps Script for Autocomplete a Text Input
I have been struggling for a couple days to build a simple interface for my colleagues to record every customer interaction.几天来,我一直在努力为我的同事构建一个简单的界面来记录每一次客户互动。 They will input the following:
他们将输入以下内容:
My problem is in getting the Autocomplete working.我的问题是让自动完成功能正常工作。
I have seen threads where @Tanaika has beautifully laid down the Server Side, HTML+JS, etc. but I am unable to get this to work.我已经看到@Tanaika 漂亮地布置了服务器端、HTML+JS 等的线程,但我无法让它工作。 My files are attached.
我的文件已附上。 Thanks for your time!
谢谢你的时间!
HTML+JS HTML+JS
<:DOCTYPE html> <html> <head> <style> label { display; inline-block: width; 150px. } </style> <base target="_top"> <script> function submitForm() { google.script.run.appendRowFromFormSubmit(document;getElementById("feedbackForm")). document.getElementById("form").style;display = "none". document.getElementById("thanks").style;display = "block"? } </script> </head> <body> <datalist id="datalist"> <:. var url = "https.//docs;google.com/spreadsheets/d/13Ms0Cny3f-XaXS26s5AnrDT4H9c8p8OKRfwxPIQ9_CU/edit#gid=16760772"; var ss = SpreadsheetApp.openByUrl(url); var ws = ss.getSheetByName("Pipeline"): var rng = ws.getRange('D2;D') var rangeArray = rng.getValues(). var filArray = rangeArray;filter(function (el) {return el[0].= ""});flat(); // Modified console.info("hello read the data"); for (var i = 0? i < datalist?length? i++) {??> <option value="<.= datalist[i].>"> <.? };:> </datalist> <div> <div id="form"> <h1>Record Interaction</h1> <form id="feedbackForm"> <label for="name">Parent Name</label> <input type="text" id="name" name="name" list="datalist"><br><br> <label for="doi">Date of Interaction</label> <input id="today" type="date" name="doi"><br><br> <label for="feedback">Interaction Summary</label> <textarea rows=4 cols=35 id="feedback" name="feedback">Enter Interaction Summary Here;.. </textarea><br><br> <div> <label for="temperature">Likely Candidate?</label><br> <input type="radio" id="Hot" name="temperature" value="Hot"> <label for="yes">Hot</label><br> <input type="radio" id="Warm" name="temperature" value="Warm"> <label for="yes">Warm</label><br> <input type="radio" id="Tepid" name="temperature" value="Tepid"> <label for="yes">Tepid</label><br> <input type="radio" id="Cold" name="temperature" value="Cold"> <label for="no">Cold</label><br><br> <input type="button" value="Submit Interaction" onclick="submitForm();"> </form> </div> </div> <div id="thanks" style="display: none;"> <p>Thank you for speaking to our customers!</p> </div> </body> </html>
CODE.GS代码.GS
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('Customer Engagement')
.addItem('Record Interaction', 'showDialog')
.addToUi();
}
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('RecordInteraction.html')
.setWidth(400)
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Please Enter Details');
}
function readData() {
var url = "https://docs.google.com/spreadsheets/d/13Ms0Cny3f-XaXS26s5AnrDT4H9c8p8OKRfwxPIQ9_CU/edit#gid=16760772";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Pipeline");
var rng = ws.getRange('D2:D')
var rangeArray = rng.getValues();
var filArray = rangeArray.filter(function (el) {return el[0] != ""}).flat(); // Modified
console.info("hello read the data")
return filArray;
}
function activateSheetById(sheetId) {
//Access all the sheets in the Google Sheets spreadsheet
var sheets = SpreadsheetApp.getActive().getSheets();
//Filter out sheets whose Ids do not match
var sheetsForId = sheets.filter(function(sheet) {
return sheet.getSheetId() === sheetId;
});
//If a sheet with the Id was found, activate it
if(sheetsForId.length > 0)
sheetsForId[0].activate();
}
function appendRowFromFormSubmit(form) {
var row = [form.name, form.doi, form.feedback, form.temperature];
console.info("Appending Row");
activateSheetById(2059810756);
SpreadsheetApp.getActiveSheet().appendRow(row);
}
function makeUL(array) {
// Create the list element:
var namelist = document.createElement('ul');
for (var i = 0; i < array.length; i++) {
// Create the list item:
var item = document.createElement('li');
// Set its contents:
item.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(item);
}
// Finally, return the constructed list:
return namelist;
}
html: html:
<div id="emaildialog">
Recipient Search:<br />
<input id="rec" type="text" oninput="getSuggestions();" placeholder="Enter Search String slowly. Yellow=accessing server" size="50" /><br />
Suggestions:<br />
<div id="sugdiv" style="width:100%;background-color:#ffffff;"></div>
Recipients:<br />
<textarea id="recipients" cols="50" rows="4" placeholder="Sent to first recipient. Remaining recipients are blind copied."></textarea><br />
Message:<br />
<textarea id="msg" cols="50" rows="4" placeholder="Enter message to send with the attachments." >This is a copy of our apps Final Report.</textarea><br>
<input type="button" id="send" value="Create PDF and Send Email" onClick="createAndSendReport();" />
</div>
Javascript(With JQuery): Javascript(使用 JQuery):
function updateDiv(vA){
var s='';
for(var i=0;i<vA.length;i++){
s+='<input type="button" id="btn-' + i + '" onClick="selectRecipient1(\'btn-' + i + '\')" value="' + vA[i][0] + '" />';
}
$('#sugdiv').html(s);
}
function getSuggestions(){
var txt=$('#rec').val();
if(txt.length>0){
$('#rec').css('background','yellow');
google.script.run
.withSuccessHandler(function(vA){
$('#rec').css('background','white');
//updateSelectList(vA);
updateDiv(vA);
})
.getSuggestions(txt)
}else{
updateSelectList([]);
}
}
Google Apps Script:谷歌应用脚本:
function getSuggestions(s){
if(s){
var vA=[];
var cA=getAllContacts();
for(var i=0;i<cA.length;i++){
if(cA[i].toString().toLowerCase().indexOf(s.toLowerCase())>-1){
vA.push([cA[i][0]]);
}
}
}
return vA;
}
This code is about 5 years old.这段代码大约有 5 年的历史。 It's still running in the original application
它仍在原始应用程序中运行
createTemplateFromFile
instead of createHtmlOutputFromFile
.createTemplateFromFile
而不是createHtmlOutputFromFile
。<?.=..? ?>
<?.=..? ?>
的小脚本<?.=..? ?>
is Force-printing scriptlets
( like printing scriptlets except that they avoid contextual escaping.
). <?.=..? ?>
是Force-printing scriptlets
( like printing scriptlets except that they avoid contextual escaping.
)。 Ref I thought that these are the reasons for your issue.我认为这些是您的问题的原因。 When these points are reflected to your script, it becomes as follows.
当这些点反映到你的脚本中时,它变成如下。
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('RecordInteraction.html')
.setWidth(400)
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Please Enter Details');
}
function showDialog() {
var html = HtmlService.createTemplateFromFile('index.html');
html.data = readData();
SpreadsheetApp.getUi().showModalDialog(html.evaluate().setWidth(400).setHeight(600), 'Please Enter Details');
}
readData()
is used.readData()
的 function。<datalist id="datalist">
<?!
var url = "https://docs.google.com/spreadsheets/d/###/edit#gid=16760772";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Pipeline");
var rng = ws.getRange('D2:D')
var rangeArray = rng.getValues();
var filArray = rangeArray.filter(function (el) {return el[0] != ""}).flat(); // Modified
console.info("hello read the data");
for (var i = 0; i < datalist.length; i++) { !?>
<option value="<?= datalist[i] ?>">
<?! } !?>
</datalist>
<datalist id="datalist">
<? data.forEach(e => { ?>
<option value="<?= e ?>">
<? }); ?>
</datalist>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.