Apps Script WebApp - 從谷歌表格中的數據更新文本框字段

Question

我正忙於應用程序腳本 Web 應用程序，並希望使用來自谷歌表的數據填充 web 應用程序中的輸入框。

我正在嘗試在單擊按鈕時檢索數據，並使用從工作表中檢索到的數據填充 webapp 中的字段。 從谷歌表格檢索數據后，我似乎無法更新文本框字段。

任何幫助將不勝感激。

我到目前為止的代碼是：

代碼.gs 文件

function doGet() {

  var htmlOutput = HtmlService.createTemplateFromFile("page");

  return htmlOutput.evaluate();



}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

var idx;
var nextLead;
var totalLeads;
var remainingLeads;

function assignLead() {
  var ss = SpreadsheetApp.openById("sheetId");
  var ws = ss.getSheetByName("leads");
  var range = ws.getRange(1, 1, ws.getLastRow(), ws.getLastColumn())
  var data = range.getValues();

  //console.log(data);

  var status = data.map(function (row) {
    return row[11];
  });

  //console.log(status);
  
  idx = status.indexOf("unassigned");
  //console.log(idx)
  for (var i = 0; i < data.length; i++) {
    nextLead = data[idx];
    updateStatusAssigned(idx)
  }

  // console.log(nextLead);
  // console.log(data);
}

function updateStatusAssigned(row) {
  var ss = SpreadsheetApp.openById("SheetId");
  var ws = ss.getSheetByName("leads");
  var range = ws.getRange(1, 1, ws.getLastRow(), ws.getLastColumn())
  ws.getRange(idx + 1, 12).setValue("assigned")
}

頁 html 文件

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <?!= include("page-css") ?>
    
</head>

<body>
    <div>

        <!-- Header -->
        <div class="header">
            <h1>Header</h1>
        </div>

        <!-- Agent Info -->
        <div class="row">
            <div>
                <p><label for="agnet">Agent Name:</label><input id="agent" type="text" ></input>
                <label for="loginTime">Login Time:</label><input id="loginTime" type="text"></input></p>
                <p><label for="campaign">Current Campaign:</label><input type="text" id="campaign"></input></p>
                <button id="btn-getLead" style= float: right>Get Lead</button>
            </div>
            <!-- <div>
                <button id="btn" style=”float: right”>Get Lead</button>
            </div> -->
        </div>

        <!-- Lead Details Banner -->
        <div class="row">
            <div class="container">
                <h3>Lead Details</h3>
            </div>

            <!-- Customer Information -->
            <div class="flex-container">
                <div>
                    <p>
                        <h5>Customer Information</h5>
                    </P>
                    <label>Name:</label><input type="text" id="name"></input>
                    <label>Surname:</label><input type="text" id="surname"></input>
                    <label>ID Number:</label><input type="text" id="id"></input>
                    <p><label>Address:</label><input type="text" id="add"></input><label>Postal Code:</label><input type="text" id="code"></input></p>
                    <p><label>Suburb:</label><input type="text" id="sub"></input></P>
                    <p><label>Postal Address:</label><input type="text" id="p-add"></input></p>
                    <p><label>Tel Number:</label><input type="tel" id="tel"></input>
                        <label>Mobile Number:</label><input type="tel" id="cell"></input>
                        <label>Alternate Number:</label><input type="tel" id="alt"></input></p>
                    <p>
                        <label>Disposition</label>
                        <select id="dispo">
            <option> </option>   
            <option>Wrong Number</option>
            <option>No Answer</option>
            <option>Win</option>
            </select>
                    </p>
          <p>
            <button id="submit">Submit</button>
          </p>
                </div>

                <!-- Call Notes -->
                <div>
                    <p>
                        <h5>Call Notes</h5>
                    </p>
                    <textarea rows="15" cols="50" id="notes"></textarea>
                </div>
            </div>

      
  <?!= include("page-js") ?>
</body>




</html>

頁面js文件

<script>
  
document.getElementById("btn-getLead").addEventListener("click",getLeadData);

function getLeadData(){
  
  google.script.run.assignLead()

  document.getElementById("name") = nextLead[0]; 


}
    
</script>

Answer 1

修改點：

不幸的是，在 Google Apps 腳本端聲明為全局的變量不能用於 Javascript 端。 所以document.getElementById("name") = nextLead[0]; nextLead nextLead 不能使用。
- 我認為這是由於您的問題的原因。
在這種情況下，可以使用withSuccessHandler 。
而且，我認為document.getElementById("name") = nextLead[0]; 發生錯誤。 這種情況請修改為document.getElementById("name").value = nextLead[0]; .

當以上幾點反映到您的腳本時，它變成如下。

修改后的腳本：

Google Apps 腳本方面：

請按如下方式修改assignLead() 。

從：

 for (var i = 0; i < data.length; i++) { nextLead = data[idx]; updateStatusAssigned(idx) } // console.log(nextLead); // console.log(data); }

至：

 for (var i = 0; i < data.length; i++) { nextLead = data[idx]; updateStatusAssigned(idx) } // console.log(nextLead); // console.log(data); return nextLead; // Added }

Javascript側：

從：

 function getLeadData(){ google.script.run.assignLead() document.getElementById("name") = nextLead[0]; }

至：

 function getLeadData(){ google.script.run.withSuccessHandler(nextLead => { document.getElementById("name").value = nextLead[0]; }).assignLead(); }

筆記：

在這個修改后的腳本中，它假設您的assignLead()的 function 工作正常，並且nextLead是您想要的正確值。 請注意這一點。

參考：

withSuccessHandler(函數)

Apps Script WebApp - 從谷歌表格中的數據更新文本框字段

問題描述

1 個解決方案

解決方案1
1 已采納 2021-03-28 23:42:18

修改點：

修改后的腳本：

Google Apps 腳本方面：

Javascript側：

筆記：

參考：

Apps Script WebApp - 從谷歌表格中的數據更新文本框字段

問題描述

1 個解決方案

解決方案1 1 已采納 2021-03-28 23:42:18

修改點：

修改后的腳本：

Google Apps 腳本方面：

Javascript側：

筆記：

參考：

解決方案1
1 已采納 2021-03-28 23:42:18