GET DATA BY ID | ENTER ID AND GET DETAIL | FETCH DETAIL BY ID | APPS SCRIPT
FETCH DETAIL USING ID IN APPS SCRIPT ,GOOGLE SHEET AND JAVASCRIPT- WEBAPP
HELLO FRIENDS, HERE WE'LL CREATE A WEB APP AND FETCH USER DATA USING USER ID.
TO FETCH DATA BY ID, WE NEED FOLLOWING TYPE OF CODE THAT CAN CHECK AND FIND OUT THE RESULT IF ID EXIST ELSE RESPONSE THAT USER NOT EXIST.
LT'S GET STARTED TO CREATE APP.
FIRST STEP
CREATE A SPREAD SHEET CLICK HERE TO CREATE, IF ALREADY CREATED, SET DATA LIKE FOLLOWING EXAMPLE...
AFTER CREATING SPREADSHEET GET SPREADSHEET ID.
DO'T KNOW HOW TO GET SPREADSHEET ID, SEE FOLLOWING EXAMPLE:-
DO'T KNOW HOW TO GET SPREADSHEET ID, SEE FOLLOWING EXAMPLE:-
LIKE ABOVE, GET YOUR SHEET ID. DON'T USE ABOVE ID .
SECOND STEP
ATER COMPLETING ABOVE WORK, GO TO GOOGLE SCRIPT PAGE CLICK HERE TO GO .AND CREATE A NEW PROJECT. AND COPY AND PASTE FOLLOWING CODE INTO code.gs
code.gs
function doGet(e) {
return HtmlService
.createHtmlOutputFromFile('index.html')
.setTitle("FETCH DETAIL BY ID");
}
function submitDT(obj){
var ss = SpreadsheetApp.openById("PASTE YOUR SPREADSHEET ID HERE");
var sheet = ss.getSheetByName("Sheet1");
// MAKE SURE YOUR SHEET NAME IS "Sheet1"
// else change it as your sheet name is.
var flag = 1 ;
var lr = sheet.getLastRow();
for(var i = 1;i <= lr;i++){
var vid = sheet.getRange(i, 1).getValue();
if(vid == obj){
flag = 0;
var b1 = sheet.getRange(i, 2).getValue();
var b2 = sheet.getRange(i, 3).getValue();
var b3 = sheet.getRange(i, 4).getValue();
var data ="<table><tr><th colspan=2>Data Fetched.</th></tr><tr><td>ID:</td><td>"
+obj+"</td></tr><tr><td>Name:</td><td>"+b1+"</td></tr><tr><td>Village:</td><td>"
+b2+"</td></tr><tr><td>Age:</td><td>"+b3+"</td></tr></table>";
return data;
}
}
if(flag==1){
var data ="User not exist.";
return data;
}
};
THIRD STEP
NOW CREATE A NEW HTML FILE IN APPS PROJECT.
TO CREATE FILE CLICK ON FILES +
RENAME IT index.htnl AND COPY AND PASE THE FOLLOWING CODE IN IT.
index.htlm
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<h2>FETCH DETAIL USING ID IN APPS SCRIPT ,GOOGLE SHEET AND JAVASCRIPT- WEBAPP</h2>
<style>
input{
width: 40%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
table {
font-family: times;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body align="center">
<input type="number"id="id" placeholder="Enter ID"/>
<br>
<input type="submit" value="GET DETAIL" onclick="info()"/>
<hr>
<div id="result"></div>
<script>
function info () {
let txt = document.querySelector('#id').value;
let updateLocation = document.querySelector('#result');
//you can add other element here
updateLocation.innerHTML = "Getting detail...";
function onFailure(error){
let warning = "<span style='color:red'>"+error+"</span>";
updateLocation.innerHTML = warning;
};
function onSuccess(response){
let result ="<span style='color:green'>"+response+"</span>";
updateLocation.innerHTML = result;
};
google.script.run.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.submitDT(txt);
};
</script>
</body>
</html>
LAST STEP
SAVE THE FILE AND CLICK ON DEPLOY BUTTOB AND DEPLOY AS WEP APP.
RESULT APPEAR LIKE THIS:
| CodyLab Blogger CodyLab Blogger |
Have a nice day!
-------------------------- -------------------------
-------------------------- -------------------------