Read Dynamic Google Sheet Data to HTML Table using Apps Script (CRUD)

| February 9, 2024 | Google Apps Script | 1 Comment

Read Dynamic Google Sheet Data, Explore how to seamlessly display Google Sheet data into an HTML table using Apps Script & JavaScript, with a unique feature—no need to fix columns! With every column addition in your Google Sheet, the HTML table auto-updates upon page refresh. This tutorial provides a step-by-step guide on achieving dynamic data representation. Witness the magic of auto-updating columns effortlessly!

इस आर्टिकल (Read Dynamic Google Sheet Data) मे हमने Google Sheet के Data को HTML Table मे दिखाया हैं इसे हम Dynamic Read इसलिए बोल रहे है की जीतने भी Columns Display हो रहे हैं उनके लिए आपको प्रत्येक column के लिए Separate Coding करने की जरूरत नहीं हैं , जैसे ही Google Sheet मे Columns add करेंगे और page को Refresh करेंगे तब आपको जीतने भी Columns Google Sheet मे हैं उतने दिखाई देने लगेंगे।

इसके पहले वाले Article मे हमने Dynamic Create का Work किया था इसका लिंक निम्न प्रकार हैं ।

Create Dynamic HTML Form Using Google Apps Script

1. Google Sheet for Read Dynamic Data

यदि आप CRUD Series को Continue कर रहे हैं तो यह Google Sheet आपके पास पहले से होगी , और यदि आप केवल Read ही समझ रहे हैं तो आपको यह Google Sheet बना कर उसमे Data Enter करना होगा। इस Sheet का नाम आपको Employee रखना हैं। आप जितनी भी चाहे उतने Columns बना सकते हैं।

Read Dynamic Google Sheet Data

2. HTML Code for Read Dynamic Google Sheet Data

अब हमे Apps Script मे एक HTML Page बनाना होगा। इसे बनाने के लिए File Menu के सामने वाले + पर क्लिक करना हैं और एक HTML File बनाना हैं जिसका नाम आपको index.html रखना हैं। यदि आप CRUD Series को ही Continue कर रहे हैं तो आपको Last मे कुछ Changes दिए हैं वह करना होंगे। 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<style></style>
</head>
  <!-- 2.Add FOR (R)-->
 <body class="p-2" onload="getJSRead(); getInputs();">

 <div id="DivTable" class=" mt-2 col-12 shadow rounded-4 rounded bg-light p-2 " style="height:420px; overflow:auto" >
        <table class="table table-bordered ">
            <thead id="myTableHead" class="mycolor text-white"></thead>
            <tbody id="myTableBody"></tbody>
        </table>
    </div> 
    <script>    </script>
  </body>
</html>

3. CSS Code for Read Dynamic Google Sheet Data

उपरोक्त HTML मे जहां पर Style tag का उपयोग किया हैं वहाँ पर आप यह Code Paste कर सकते हैं । 

 body {  
     background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%); 
 }
 .mycolor { 
      background-color: #3a67b1; //#6d3b89;  
 }

4. JavaScript Code for Read Dynamic Google Sheet Data

उपरोक्त HTML मे जहां पर Script Tag लगा हैं Last मे वहाँ पर आप निम्न Code Paste कर सकते है , इस Script मे हमने getJSRead() JavaScript Function बनाया हैं जो की Apps Script के getASRead() function से Communicate कर data को myTableBody पर display करता हैं।

इस Function से Google Sheet मे जीतने भी Columns होते हैं सभी आ जाते हैं और जो उनकी Heading हैं वह भी as it is दिखाई देने लगती हैं । Heading को Display करने के लिए myTableHead का उपयोग किया हैं । 

  function getJSRead() {
       
    google.script.run.withSuccessHandler(function(data) {
         
      let thead = data[0];
      let tbody = data[1];

      let myRows="";   
       $.each(thead, function(key, row) {  
          myRows  = myRows + "<tr>";
          $.each(row, function(key, cell) {  
              myRows  = myRows + "<th>" +  cell + "</th>";
          });
          myRows  = myRows + "</tr>";
       });             
       $("#myTableHead").html(myRows);  

       
      myRows="";   
       $.each(tbody, function(key, row) {  
          myRows  = myRows + "<tr>";
          $.each(row, function(key, cell) {  
              myRows  = myRows + "<td>" +  cell + "</td>";
          });
          myRows  = myRows + "</tr>";
       });             
       $("#myTableBody").html(myRows);           

    }).getASRead();
  }

5. Apps Script Code for Read Dynamic Google Sheet Data

अब यहाँ से Apps Script का Code शुरू होता हैं। इसे आपको code.gs फाइल मे लिखना हैं। 

let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
let EmpSheet  = MySheets.getSheetByName("Employee");  

function doGet(e) {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getASRead() {
  let cols = EmpSheet.getLastColumn();
  let rows = EmpSheet.getLastRow() -1;
  let tHead = EmpSheet.getRange(1,1, 1,cols).getValues();
  let tBody = EmpSheet.getRange(2,1, rows,cols).getValues();
  return [tHead, tBody] ;
}
  • doGet() : इस Function से हमने सबसे पहले Index.html को display करवाया हैं।
  • getASRead() : इस function को JavaScript के द्वारा Call किया जाता हैं । यह tHead और tBody को Return करता हैं । इन्हे अलग अलग इसलिए Return किया हैं की हम आसानी से th और td मे data सेट करा सके ।

6. Project Deployment

इसके बाद आपको Project को deploy करना हैं और जो Deploy करने के बाद लिंक आएगी उसे प्रॉजेक्ट को Run करना है । यदि आपको Deploy करना सीखना हैं तो आप निम्न Link का उपयोग करे ।

How to Deploy Web API

7. Project Execution

अब हम Project को Execute कर देखेंगे की क्या रिजल्ट आ रहा हैं ।

जैसे ही आप लिंक पर क्लिक करेंगे कुछ इस तरह से स्क्रीन दिखाई देगी यह पूरी तरह से Dynamic हैं इसमे जितना भी data Display हो रहा हैं सभी Google Sheet के Data के आधार पर display हो रहा हैं ।

Project Merge (Create & Read)

पिछले Article मे हमने Create करना सीखा था इस Article (Read Dynamic Google Sheet Data) मे हमने Read करना सीखा, यदि आप चाहते हैं की दोनों ही Project को Merge किया जाए तो आपको Create वाले Project मे कुछ चेंज करा होंगे।

HTML Changes 

<!-- 1. -->
<body class="p-2" onload="getJSRead(); getInputs();">

<!-- 2. -->
 <button type="button" id="BtnCreate" class="btn mycolor text-white " onclick="myCreate()" style="float:right"> (+) Add Record  </button>

<!-- 3. -->
    <div id="DivForm"  class="formBackground">
    <div class="card col-4 mx-auto mt-4 shadow rounded-4 rounded" >

      <div class="card-header mycolor text-white">
        My Dynamic Form
      </div>

       <div class="card-body">
        <form id="MyForm">

        </form>
          <div class="row justify-content-end px-2 ">

            
            <button type="button" id="BtnClose" class="btn mycolor col-3 text-white" onclick="formClose()" style="margin-right:5px;"  > Close </button>

          <button type="button" id="BtnSubmit" class="btn mycolor col-3 text-white " onclick="mySubmit()" > Submit </button>
          </div>
        </div>
   
    </div>
    </div>
  • 1. यहा पर आपको जो भी Function Load होने पर Call करना हैं उनको लिखना है । हमें यहाँ पर Read और Input दोनों की function को call इसलिए किया हैं ताकि दोनों ही Load हो सके, सभी भी Display करना होंगे तब Display कर लेंगे।
  • 2. पिछले वाले Article मे हमने Main page पर ही Form दिखाया था लेकिन जब हैं Table मे data दिखा रहे हैं तो हमे Form को hide करना होगा , और form को दिखाने के लिए हमें एक Button देना होगा जिससे की Form Show हो सके।
  • 3. अब हम Form के Code को एक Div DivForm मे लिखेंगे ताकि हम उसे Hide Show कर सके । इस Form के साथ हम Close Button भी बनाएंगे ताकि Form को Hide कर सके।

CSS Changes

Css मे हमे एक Class और बनानी होगी ताकि हम Form की Position को Fix कर सके वह पहले से मोजूद Content के ऊपर ही display हो सके । 

      .formBackground {
        position:fixed; 
        top:0;
        display:none; 
        width:100%; 
        height:100%;
         background-color: rgb(58, 103, 177, 39%);
      }

JS Changes

Javascript मे हमे दो Function और बनाना होंगे ।

  • 1. myCreate() : Form को Show करने केलिए
  • 2. formClose() : Form को Hide करने के लिए । 
  function myCreate()  {
    $('#DivForm').show();
  }

  function formClose() {
      $('#DivForm').hide();
  }

इतना करने के बाद आप Project दो Deploy करेंगे और Execute करेंगे तब आपको टेबल के Top Right Corner पर (+) Add Record Button भी दिखाई देगा।

आशा हैं मुझे की आपको किस तरह से Dynamic Data Google Sheet से Read कर HTML मे दिखाया जाता हैं बहुत ही अच्छे से समझ मे आ गया होगा । फिर भी यदि कोई doubt हो तो आप मुझे निःसंकोच Comment कर सकते हैं।

अपना कीमती समय देने के लिए बहुत बहुत धन्यवाद । आपको यह Article Read Dynamic Google Sheet Data कैसा लगा बताना न भूले

Read Dynamic Google Sheet Data

हमारे अन्य आर्टिकल

Related Posts

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *