Get user input in Webapp and display some rows in HTML

Question

I have a sheet with ticket number, call date, customer mobile no, customer name I want to take the user input (Ticket number) in a Webapp. From that, I will find the customer mobile number in the table. From the customer mobile number, I want to display all the matching rows (in the same table) to the user in HTML. I want to display all the calls made by the customer (he could have made many calls before)

I referred to

How to search and filter a Google Sheet based on two parameters in two different columns

and Tried

code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}
//
function getValuesFromSS(search) {
  var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1zObr0he1SYJkOXMMyFrOWk-0OtV6w/edit#gid=926906658")//service calls
  var calsht=ss.getSheetByName('Calls');
  //var lastRow = calsht.getLastRow();
  var arange = calsht.getRange("A:D").getValues(); 
  for (m= arange.length-1; m>0; m--){
    if (arange[m][0]==search.name){//search.name
      var cusmob=arange[m][3];
      //Logger.log(m);      
      //Logger.log(cusmob);
    }
  }
  var names = '';
  var techs = '';
  var eqips = '';
  var urls = '';
  var lastCol = calsht.getLastColumn();
  for (m= arange.length-1; m>0; m--){
    if (arange[m][3]==cusmob){
      var values = calsht.getRange("A"+(m+1)+":AL"+(m+1)).getValues(); //get all values for the row
      var name = values[0][4]; //column E
      var tech = values[0][5];  //column F
      var eqip = values[0][14];  //column O
      var url = values[0][37]; // AL
      //Logger.log(url);      
      names+=Utilities.formatString("<td>" + name + "</td>");
      techs+=Utilities.formatString("<td>" + tech + "</td>");
      eqips+=Utilities.formatString("<td>" + eqip + "</td>");
      urls+=Utilities.formatString('<td>' + '<a href="' + url + '">Inv</a>' + '</td>');
    }//if
  }//for
  return {
  first: names,
  second: techs,
  third: eqips,
  fourth: urls
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">

function setPageValues () {
  var search = document.getElementsByName('searchtext')[0].value;
  var obj = {};
  if (!search) alert("Ticket No is required");
  if (search) {
    obj.name = search;
  }
  google.script.run.withSuccessHandler(disp).getValuesFromSS(obj);
}

    function disp(values){
      document.getElementById("results1").innerHTML = values.first;
      document.getElementById("results2").innerHTML = values.second;
      document.getElementById("results3").innerHTML = values.third;
      document.getElementById("results4").innerHTML = values.fourth;
    }
  </script>
</head>
<style>
table {
    border-collapse: collapse;
    }
tr { 
  display: block; 
  float: left; 
  }
td {
    border: 1px solid Black;
    display: block; 
    }
</style>
<body>

<input type="text" name="searchtext">
<input type="button" value="Search" onclick="setPageValues();">

<br>
<div name="resultbox">
<table>
<tr id="results1">
</tr>
<tr id="results2">
</tr>
<tr id="results3">
</tr>
<tr id="results4">
</tr>
</table>
</div>
</body>
<script>
</script>
</html>

Now it seems to be working.

I changed from findall to for loop.

At what point do you want to send data, to what function do you want to pass it, and what is the data you wish to pass? — Rafa Guillermo
– Rafa Guillermo, Commented Jul 7, 2021 at 7:58
I want to take user input (Ticket number). Then I will find the customer mobile number corresponding to that ticket number. Then I will filter the sheet for the mobile number. Then I want to display the filtered rows on the screen for the user to view — arul selvan
– arul selvan, Commented Jul 7, 2021 at 8:11

Cooper · Accepted Answer · 2021-07-08 00:41:11Z

1

Take a look at google.script.run

you can display your results with the withSuccessHandler

answered Jul 8, 2021 at 0:41

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get user input in Webapp and display some rows in HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related