Select a criteria to show related data - apps script
In this article we have made an effort to show how you can fetch the data from google sheet on demanded category. I hope this article help you a bit to achieve your goal. Project is accessing following example sheet data to complete the demand.
Example sheet
<!DOCTYPE html>
<html>
<title>List on demanded criteria</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="w3-row-padding w3-border-bottom">
<div class="w3-col s5">
<select id="cls"onchange="list()"class="w3-select w3-col s8">
<option value="">CLASS</option>
<option value="Nur">Nursery</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="Pending">Pending</option>
<option value="Leaved">Leaved</option>
</select>
<select id="typ" onchange="list()"class="w3-select w3-col s4">
<option value="ALL">ALL</option>
<option value="Advance">Advance</option>
<option value="Dues">Dues</option>
</select>
</div>
<div class="w3-col s1 w3-center">
<i id="spin" class="fa fa-refresh fa-0"onclick="list()" style="font-size:20px"></i>
</div>
<div class="w3-col s4 w3-left">
<i id="info"></i>
</div>
<div class="w3-col s1 w3-right">
<input type="button" name="btnprint" value="Print" onclick="pPrint('result')"
class="w3-btn w3-teal w3-hover-red">
</div>
</div>
<div style="overflow: auto;height:520px;">
<div id="result"align="center"></div></div>
<script>
function list() {
var cl = document.getElementById('cls');
var clv = cl.options[cl.selectedIndex].value;
var typ = document.getElementById('typ');
var tyv = typ.options[typ.selectedIndex].value;
var spn = document.getElementById('spin');
var info = document.getElementById('info');
var resu = document.getElementById('result');
if(clv === ""){
info.innerHTML = "";
}else{
function fail(error){
resu.innerHTML = "<span style='color:red'>"+error+"</span>";
spn.classList.remove('fa-spin');
info.innerHTML = "";
};
function pass(list){
resu.innerHTML = list;
spn.classList.remove('fa-spin');
var rc =document.getElementById('table').rows.length-1;
info.innerHTML = rc+" Records found.";
};
resu.innerHTML = "";
spn.classList.add('fa-spin');
info.innerHTML = "Working on...";
google.script.run.withFailureHandler(fail)
.withSuccessHandler(pass)
.iList(clv,tyv);}};
</script>
</body>
</html>
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function iList(clv,tyv){
var ss = SpreadsheetApp.openById("1EmyJvd0afqxLYCmfI_gFoO0GLZQVtPDz1fvndKvW7Pg");
var ws = ss.getSheetByName("Users");
var dl = ws.getDataRange().getValues();
var tb = "";
var hd ='<table id=table class="w3-table-all w3-hoverable"><tr class="w3-red"><th>ID No.</th>
<th>Name</th><th>Village</th><th>Contact</th><th>Class</th><th>Balance</th></tr>';
for(var i=0; i<dl.length ; i++){
if(tyv == "ALL") { var sv = dl[i][7]+"!=''";}else{ var sv = dl[i][7] == tyv;};
if(clv == dl[i][5] && sv){
tb+="<tr><td><b>"+dl[i][0]+"</b></td><td>"+dl[i][1]+"</td><td> "+dl[i][4]+"</td><td> "+
dl[i][2]+"</td><td>"+dl[i][5]+"</td><td> "+dl[i][6]+" "+dl[i][7]+"</td></tr>";
}};
return hd+tb;
}
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------