CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptgoogle-sheets
Chris Ward
Chris Ward

Reputation: 136

Apps Script WebApp - Update text box field from data from a google sheet

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.

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

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

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

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

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

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


}
    
</script>

Upvotes: 1

Views: 1263

Answers (1)

Tanaike
Tanaike

Reputation: 201713

Modification points:

  • Unfortunately, the variables declared as the global at Google Apps Script side cannot be used for Javascript side. So nextLead of document.getElementById("name") = nextLead[0]; cannot be used.
    • I thought that this is due to the reason of your issue.
  • In this case, withSuccessHandler can be used.
  • And, I think that document.getElementById("name") = nextLead[0]; occurs an error. In this case, please modify to document.getElementById("name").value = nextLead[0];.

When above points are reflected to your script, it becomes as follows.

Modified script:

Google Apps Script side:

Please modify assignLead() as follows.

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:

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. Please be careful this.

Reference:

Upvotes: 1

Related Questions