[英]How to Add 'Data List' in Google Sheet Apps Script that Populates Data from from Google Sheet with Bootstrap and HTML5
首先，如果這是一個愚蠢的問題，我深表歉意，因為我是編碼和編程的新手。
我正在嘗試使用 Google Apps 腳本為我的公司創建一個 CRM Webapp，它將其所有數據存儲在 Google Sheet 中。 這項工作仍在進行中。
這個 CRM Webapp 基本上有一個主頁選項卡（用於搜索和編輯數據）、銷售選項卡（用於輸入銷售條目）、購買選項卡（用於輸入購買條目）和聯系選項卡（用於添加聯系方式）。
這個想法是，用戶將首先在“聯系”選項卡中添加新客戶/供應商的聯系方式，這些數據將存儲在 Google 表格中。
現在要進行銷售或購買條目，用戶現在必須首先 select 在相應的選項卡中輸入已輸入的聯系人（僅顯示姓名、電話號碼和 Email Id）。
為此，我正在嘗試從 Bootstrap 添加一個數據列表，這將幫助用戶搜索 select 已經存儲的聯系人詳細信息，並且依賴的聯系人字段需要根據選定的名稱/電子郵件/電話自動填寫。
我厭倦了很多方法並參考了幾篇文章，但我無法從 Google 表格中填充搜索數據。 我嘗試使用下拉邏輯，但即使這樣也沒有用。
以下是我的代碼。 我只粘貼看起來與你們相關的部分，因為整個事情非常雜亂無章。 任何幫助將不勝感激。
加載表格.gs：
function loadForm() {
const htmlServ = HtmlService.createTemplateFromFile("uform");
const html = htmlServ.evaluate();
html.setWidth(850).setHeight(600);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, "VKSPCPL CRM");
}
function createMenu_(){
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("CRM");
menu.addItem("Open APP", "loadForm");
menu.addToUi();
}
function onOpen(){
createMenu_();
}
函數.gs：
//Sales Functions---------------------------
function salesEntry(rowDataSales) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Sales Contact Details");
const currentDate = new Date();
const uniqueIDs = ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
var maxNum = 0;
uniqueIDs.forEach(r => {
maxNum = r[0] > maxNum ? r[0] : maxNum
});
var caseNo = maxNum + 1;
ws.appendRow([
caseNo,
rowDataSales.inputSalesCxName,
"Sales",
rowDataSales.inputSalesCaseOwner,
currentDate,
rowDataSales.inputSalesCoName,
rowDataSales.inputSalesEmail,
rowDataSales.inputSalesPhone,
rowDataSales.inputSalesGST,
rowDataSales.inputSalesCoAdd,
rowDataSales.inputSalesState]);
return true;
}
function getSalesCaseOwnerDropdown(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("CaseOwners");
return ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
}
function salesStateList(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("States");
return ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
}
function salesContactName(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Contact Details");
return ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
}
//-------------------------------------------------------------------------------------------
//Contact Functions--------------------------------------------------------------------------
function getContactDropdown(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Customer Type");
return ws.getRange(2, 1, ws.getLastRow()-1, 2).getValues();
}
function contactEntry(rowDataContact) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Contact Details");
const currentDate = new Date();
ws.appendRow([
rowDataContact.inputContactName,
rowDataContact.inputContactCoName,
rowDataContact.inputContactPhone,
rowDataContact.inputContactEmail,
rowDataContact.inputContactGST,
rowDataContact.inputContactCoAdd,
rowDataContact.inputContactState,
rowDataContact.inputContactCategory,
rowDataContact.inputContactType,
currentDate]);
return true;
}
function contactStateList(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("States");
return ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
}
uform.html：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" aria-controls="sales" aria-selected="false">Sales</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="purchase-tab" data-bs-toggle="tab" data-bs-target="#purchase" type="button" role="tab" aria-controls="purchase" aria-selected="false">Purchase</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact Details</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="sales" role="tabpanel" aria-labelledby="sales-tab">
<br><h3 class="display-6">New Sales Case</h3>
<div class="col-md-4">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="inputSales-CaseOwner">
</select>
</div>
<br><h5>Contact Details</h5>
<form class="row g-3">
<div class="col-md-4">
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="inputSales-CxName">
</datalist>
...
...
...
<script>
//JS Script Here
</script>
</body>
</html>
如果你們需要更多腳本或詳細信息，請告訴我。 任何幫助將不勝感激。 提前非常感謝！
根據您的問題，我了解到您希望執行搜索，如果它與您已經存儲在工作表中的名稱之一匹配，則select HTML元素選項應該填充與該名稱對應的信息，並且應該被禁用。
為了做到這一點，我首先按照 Apps 腳本指南中的這個詳細且解釋良好的示例，了解如何處理 forms 並將表單輸入信息傳遞到您的code.gs文件。 然后，一旦我根據使用getValues獲得的電子表格列A檢查輸入數據，我就會在與輸入名稱相對應的選定行中返回匹配數據。 最后我簡單地使用了 innerHtml和getElementById來修改 select 字段。
我已經構建了一個簡單而抽象的示例，說明如何實現您的目標，以便其他有類似疑問的用戶可以從中學習。 請調整您的代碼以包含此示例。 下面我插入了工作表數據結構和 web 應用程序工作的圖像：
該代碼具有不言自明的注釋，但如果您有任何疑問，請隨時詢問他們：
HTML 文件，代碼文件
function doGet(e) { var template = HtmlService.createTemplateFromFile('Index'); return template.evaluate().setTitle('Web App Window Title'); } // name is an object like this {name: "your inputed name"} function getData(name) { // Get the sheet where you have all your data var sheet = SpreadsheetApp.openById('1Ifqk1LukwzjeZHc7DulMmoZPl34zbHNnLIzFanFAsqI').getSheetByName('Sheet1'); // Get a list of all your stored names. As getValues returns a 2D array, if // you use flat() it will convert it into a 1D array which is of easier manipullation var names = sheet.getRange(2,1,sheet.getLastRow(),1).getValues().flat(); // variable to store matching name data var populateElements; // if the array of names has the name entered in the input if(names.includes(name.name)){ // get the index of the matching name in the names array var index = names.indexOf(name.name); // get an array of corresponding values of the name // ie age and field in this example populateElements = sheet.getRange(index+2,2,1,2).getValues().flat(); // return the array of matching fields for that name return populateElements; }else{ // if there was no name match just return whatever you want that is not an array return "popcorn" } }
<?DOCTYPE html> <html> <head> <base target="_top"> <.-- STYLES --> <.;= HtmlService?createHtmlOutputFromFile('Stylesheet').getContent(); ;> <script> // This function is used so that the form submission // does not refresh the web app function preventFormSubmit() { var forms = document.querySelectorAll('form'); for (var i = 0. i < forms,length. i++) { forms[i];addEventListener('submit'; function(event) { event.preventDefault(), }); } } window.addEventListener('load', preventFormSubmit). // Function that gets the data returned getData if everything worked fine function onSuccess(data) { // data is the array of the elements to be populated; // In this example [age. field] // Select the HTML select elements var selectAge = document;getElementById('age'); var selectField = document;getElementById('field'). // create the variables that will store the options var optionAge; var optionField. // if data is an array and thus the name searched was successful and // there were matches if(data;length){ // create an option HTML element for each element in the array optionAge = "<option value='" + data[0] + " disabled'>" + data[0] + "</option>"; // and set it to the corresponding select element selectAge.innerHTML = optionAge; optionField = "<option value='" + data[1] + " disabled'>" + data[1] + "</option>". selectField:innerHTML = optionField. } } // This function will run when the form is submitted // formObject is that data submitted. In this case this is equals to {name.name} function handleFormSubmit(formObject) { // set to run getData passing the inputed name and if successful run the function // ablove onSuccess google.script;run.withSuccessHandler(onSuccess).getData(formObject); } </script> </head> <body> <h1> Select Name </h1> <!-- On this form submission this will call the function handleFormSubmit --> <!-- and it will pass the input value --> <form id="myForm" onsubmit="handleFormSubmit(this)"> <input name="name" type="text" /> <input type="submit" value="Submit" /> </form> <!-- The select inputs that will be modified on the name search --> <select name="age" id="age"> <option value="Selection 1">Selection 1</option> <option value="Selection 2">Selection 2</option> </select> <select name="field" id="field"> <option value="Selection 1">Selection 1</option> <option value="Selection 2">Selection 2</option> </select> </body> </html>
需要從 Google Apps 腳本查詢 Google 表格以獲取特定數據
[英]Need to Query Google Sheet for specific data from Google Apps Script
使用 Google Apps 腳本添加/更新 Google 工作表行數據比較 HTML 表單中的值 - 嘗試在工作表上查找匹配項並更新所選行數據
[英]Add/Update Google Sheet Row Data Comparing Values from HTML Form Using Google Apps Script - Trying to Find Match on Sheet & Update Selected Row Data
將谷歌工作表中的單元格數據放入 html 輸入框。 谷歌應用程序腳本
[英]put cell data from google sheet into html input box. google apps script
如何使用腳本從 Google 表格中“工作表 B”上的數據生成“工作表 A”上的列表
[英]How Do You Generate List On "Sheet A" from Data on "Sheet B" in Google Sheets Using a Script
使用 Google 工作表腳本將數據從 HTML 表單推送到工作表在工作表未打開時不起作用
[英]Using Google sheet script to push data from HTML form to sheet not working when sheet is not open
如何使用 Google Apps 腳本將數組的數據打印到 Google 表格中
[英]How to print the data of an array into a Google sheet with Google Apps Script
Google 腳本 - 從網站論壇解析 HTML - 並將數據寫入工作表
[英]Google script - parse HTML from Website Forum - and Write Data to Sheet
將數組值從Google表格添加到HTML邊欄（Google Apps腳本）
[英]Add array values to HTML sidebar from Google Sheet (Google Apps Script)
如何使用Apps Script Execution API從Google表格中提取數據
[英]How to use Apps Script Execution API to pull data from a Google Sheet
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.