堆棧內存溢出
  簡體   English   中英

使用 Google 表格中的數組在 html 中創建一個數據列表，該列表可提供給 Google Apps 腳本以自動完成文本輸入

[英]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

 原文  2022-01-12 16:44:01  6   2    javascript/ google-apps-script/ google-sheets/ modal-dialog

問題描述

幾天來，我一直在努力為我的同事構建一個簡單的界面來記錄每一次客戶互動。 他們將輸入以下內容：

  1. 客戶姓名（自動完成功能，來自電子表格列中所有姓名的超集）
  2. 互動日期
  3. 互動總結
  4. 前景（熱、暖、溫、冷）

我的問題是讓自動完成功能正常工作。

我已經看到@Tanaika 漂亮地布置了服務器端、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>

代碼.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;
}

2 個解決方案

解決方案1
 0  2022-01-12 19:18:34

向 email 對話框提出建議的示例

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（使用 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([]);
    }
  }

谷歌應用腳本：

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;
}

這段代碼大約有 5 年的歷史。 它仍在原始應用程序中運行

解決方案2
 0 已采納  2022-01-13 01:13:50

修改點：

  • 在您的 HTML 中，使用了該模板。 在這種情況下，請使用createTemplateFromFile而不是createHtmlOutputFromFile 。
  • <?.=..? ?>的小腳本 <?.=..? ?>是Force-printing scriptlets （ like printing scriptlets except that they avoid contextual escaping. ）。 參考

我認為這些是您的問題的原因。 當這些點反映到你的腳本中時，它變成如下。

修改后的腳本：

Google Apps 腳本方面：

從：

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()的 function。

HTML 和 Javascript 側：

從：

<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.

相關問題 使用 Google 表格中的數據在 Google Apps 腳本中自動完成 我可以在Google表格中創建一個函數並從網絡應用程序Google Apps腳本中使用它嗎？ 由 Google Apps 腳本提供的 HTML/JS 將 Google Apps 腳本數組應用到 HTML 表單自動完成數據列表中 從Google Apps腳本創建HTML頁面 更新工作表、創建 PDF、pdf 中的舊數據（谷歌應用程序腳本） 在 Google 表格中使用來自 HTML 界面的數據 Append Google Apps 腳本中來自表格數據的新幻燈片 如何更新 HTML 中通過 Google 腳本從 Google 表格中提取變量的文本 取消選中數組中的復選框（Google Apps 腳本 - 表格）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM