Google Sheet Data Fetch to web Page with Hyperlink Button

In this blog we will tell you Google Sheet Data Fetch to web Page with Hyperlink Button so read the complete blog carefully and learn Google Sheet Data Fetch to web Page with Hyperlink Button according to given guidelines.

Practical For Click :- Demo App

Enter Student Roll No :- 123

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 2 file Name Given Below

Code.gs

index.html

Step 4 :- Copy of Code.gs Code Given Below

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle("FETCH Data BY ID");
}
function submitDT(obj){
  var ss = SpreadsheetApp.openById("Paste Your Google Sheet ID");
  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 b4 = sheet.getRange(i, 5).getValue();
   var b5 = sheet.getRange(i, 6).getValue();
  
  var data ="<center><table><tr><th colspan=2>Student Information.</th></tr><tr><td>Roll NO:</td><td>"
+obj+"</td></tr><tr><td>Name:</td><td>"+b1+"</td></tr><tr><td>Father Name:</td><td>"+b2+"</td></tr><tr><td>Village Name:</td><td>"+b3+"</td></tr><tr><td>Hyperlink Same Window:</td><td>"+b4+"</td></tr><tr><td>Hyperlink New Window:</td><td>"+b5+"</td></tr></table></center>";
  return data;
    }
   }
     if(flag==1){
  var data ="Data not found & Wrong ID.";
      return data;
    } 
    };

Step 5 :- Paste Google Sheet id in Code.gs File Line No 7

https://docs.google.com/spreadsheets/d/Google Sheet ID/edit#gid=0

Step 6 :- Copy of index.html Code Given Below

<!DOCTYPE html>
<html>
  <head>
     <base target="_top" />
     <h2>Google Sheet Data Fetch to Web Page With Hyperlink Button</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 #ff0000;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #CCCCFF;
}
</style>
  </head>
  <body align="center">
    <input type="text"id="id" placeholder="Enter Student Roll NO"/></br>
    <br>
    <input type="submit" value="Fetch Data From Google Sheet" 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>

Google Sheet Data Fetch to web Page with Hyperlink Button

Google Sheet Data Fetch to web Page with Hyperlink Button

In this blog we will tell you Google Sheet Data Fetch to web Page with Hyperlink Button so read the complete blog carefully and learn Google Sheet Data Fetch to web Page with Hyperlink Button according to given guidelines.

Practical For Click :- Demo App

Enter Student Roll No :- 123

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 2 file Name Given Below

Step 7 :- Click here to >> Deploy >> New Deployment >>

More Detail See Video :-

Post a Comment

Donation and Support

Contact Form