Apps Script WebApp - 从谷歌表格中的数据更新文本框字段

Question

I'm busy with an Apps Script Web App and would like to populate input boxes within the web app with data from a google sheet.我正忙于应用程序脚本 Web 应用程序，并希望使用来自谷歌表的数据填充 web 应用程序中的输入框。

I'm trying to retrieve data when a button is clicked and populate fields within the webapp with the data that is retrieved from the sheet.我正在尝试在单击按钮时检索数据，并使用从工作表中检索到的数据填充 webapp 中的字段。 I just can't seem to get the text box fields to be updated after retrieving the data from google sheets.从谷歌表格检索数据后，我似乎无法更新文本框字段。

Any help would be greatly appreciated.任何帮助将不胜感激。

The code I have so far is:我到目前为止的代码是：

Code.gs file代码.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")
}

page html file页 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>

page-js file页面js文件

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

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

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


}
    
</script>

Answer 1

Modification points:修改点：

Unfortunately, the variables declared as the global at Google Apps Script side cannot be used for Javascript side.不幸的是，在 Google Apps 脚本端声明为全局的变量不能用于 Javascript 端。 So nextLead of document.getElementById("name") = nextLead[0];所以document.getElementById("name") = nextLead[0]; nextLead nextLead cannot be used.不能使用。
- I thought that this is due to the reason of your issue.我认为这是由于您的问题的原因。
In this case, withSuccessHandler can be used.在这种情况下，可以使用withSuccessHandler 。
And, I think that document.getElementById("name") = nextLead[0];而且，我认为document.getElementById("name") = nextLead[0]; occurs an error.发生错误。 In this case, please modify to document.getElementById("name").value = nextLead[0];这种情况请修改为document.getElementById("name").value = nextLead[0]; . .

When above points are reflected to your script, it becomes as follows.当以上几点反映到您的脚本时，它变成如下。

Modified script:修改后的脚本：

Google Apps Script side: Google Apps 脚本方面：

Please modify assignLead() as follows.请按如下方式修改assignLead() 。

From: 从：

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

To: 至：

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

Javascript side: Javascript侧：

From: 从：

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

To: 至：

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

Note:笔记：

In this modified script, it supposes that your function of assignLead() works fine and nextLead is the correct value you want.在这个修改后的脚本中，它假设您的assignLead()的 function 工作正常，并且nextLead是您想要的正确值。 Please be careful this.请注意这一点。

Reference:参考：

withSuccessHandler(function) withSuccessHandler(函数)

Apps Script WebApp - 从谷歌表格中的数据更新文本框字段

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-28 23:42:18

Modification points:修改点：

Modified script:修改后的脚本：

Google Apps Script side: Google Apps 脚本方面：

Javascript side: Javascript侧：

Note:笔记：

Reference:参考：

Apps Script WebApp - 从谷歌表格中的数据更新文本框字段

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-28 23:42:18

Modification points:修改点：

Modified script:修改后的脚本：

Google Apps Script side: Google Apps 脚本方面：

Javascript side: Javascript侧：

Note:笔记：

Reference:参考：

解决方案1
1 已采纳 2021-03-28 23:42:18