Update Google Sheet From HTML Table Using Apps Script (CRUD)

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

Learn How to Update Google Sheet From HTML Table, enabling interactive selection of rows that open in a form for editing. Follow this step-by-step tutorial to seamlessly update records back to Google Sheet upon form submission. Enhance your web development skills and streamline data management effortlessly.

इस Article मे हमने जो पिछले Article मे Create और Read किया था उसी को आगे बढ़ाते हुवे उसमे Update कर कार्य किया हैं । इसमे हमने Data को उसी Form पर open किया हैं और Update किया हैं। पिछले Article आप निम्न link से Read कर सकते हैं ।

1. Google Sheet

1.1 Sheet for Form Design

सबसे पहले हम निम्न प्रकार से एक Google Sheet बनाएंगे जिसका नाम हम Form रखेंगे। इसमे आप जितनी Entry करेंगे उतने Form पर Column बन जाएंगे, इस Sheet के आधार पर ही Form मे Input बनते हैं।

Dynamic HTML Form
  • ID : आपको ID मे आपको Unique वैल्यू देना हैं ।
  • Name : आपको जो Heading देना हैं वह आप इस Column मे लिख सकते हैं ।
  • Type : इसमे आपको Input का type देना हैं। यदि String के लिए text और Number के लिए Number आदि।

1.2 Sheet for Form Data Storage

Data Entry के बाद Sheet आपको कुछ इस प्रकार दिखाई देगी , आप चाहे तो पहले से भी data Enter कर सकते हैं । इसमे आपको Columns के Heading देना होंगे।

Dynamic HTML Form Data

2. HTML Code for Update Google Sheet From HTML Table

यह HTML Code हैं इसमे Form और Table दोनों का ही code है । इसे बनाने के लिए आपको Apps Script मे जा कर File Menu के सामने वाले + पर क्लिक करना हैं और एक HTML File बनाना हैं जिसका नाम आपको index.html रखना हैं।

<!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>
<body class="p-2" onload="getJSRead(); getInputs();">
  <div class="p-1"> 
     <span class="h4">My Dynamic Form & Table (Update Operation) </span>        
      <button type="button" id="BtnCreate" class="btn mycolor text-white " onclick="myCreate()" style="float:right"> (+) Add Record  </button>
  </div>
    <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 ">
            <span id="SpanMsg"></span>
            <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>

    <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>
  • Onload : जैसे ही Page Load होगा इस Event से Form design और Html Table मे Data दिखाई देने लगेगा।
  • BtnCreate : इस Button से जब हम New Entry करना चाहते हैं तब यह Blank Form Open कर देगा।
  • MyForm : यह Form हैं इस मे Dynamic input Creation होगा।
  • BtnClose : Form को Close करने के लिए इस Button को बनाया गया हैं।
  • BtnSubmit : इस Button से From के Input पर हमने जो Value Enter की हैं वह Apps Script पर भेज दी जाएगी जिससे की Google Sheet पर Store कर दिया जाए । नए Record मे भी इसका उपयोग किया जाएगा और जब हम Record को edit करेंगे तब भी इसका उपयोग किया जाएगा।
  • DivTable : इस Div मे टेबल Display होती हैं ।

3. CSS Code for Update Google Sheet From HTML Table

यह CSS Code हैं यह आपको HTML Code मे Style Tag मे लिखना हैं । 

body {  
     background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%); 
}
.mycolor { 
     background-color: #3a67b1; //#6d3b89;  
}
.formBackground {
        position:fixed; 
        top:0;
        display:none; 
        width:100%; 
        height:100%;
        background-color: rgb(58, 103, 177, 39%);
}     
</style>

4. JavaScript Code for Update Google Sheet From HTML Table

यह JavaScript Code हैं यह आपको HTML Code मे Script Tag मे लिखना हैं । 


    let index = 0;
    function getInputs() {
     
    google.script.run.withSuccessHandler(function(data) {

      let myHTML="";   
       $.each(data, function(key, value) {   
        
          let myLabel = value[1];
          let myName  = value[0];
          let myType  = value[2];

           let myCode = `<div class="form-group mb-3">
              <label for="`+myName+`">`+myLabel+`</label>
              <input type="`+myType+`" class="form-control" id="`+myName+`" name="`+myName+`"  placeholder="`+myLabel+`">
            </div>`;
            myHTML = myHTML + myCode ;          
      });
      
       $("#MyForm").append(myHTML);  
    }).getInputsList();
  }

  function mySubmit()  {

       let myText = $("#MyForm").serialize();
       google.script.run.withSuccessHandler(function(data) { 
       let returnHTML = `<div class="alert alert-success" role="alert"> Success </div>`;
           //$("#MyForm").html(returnHTML);
           $("#MyForm input").val('');
           $("#SpanMsg").html(returnHTML);
           
           //$('#BtnSubmit').hide();

          getJSRead(); 
          setTimeout(() => {   formClose() ;    }, "2000");        
         }).getSubmit(myText,  index);  
  }


  function myCreate()  {
     index = 0;                         
      $('#SpanMsg').html(''); 
    $("#MyForm input").val(''); 
    $('#DivForm').show();
  }

  function formClose() {
      $('#DivForm').hide();
  }
  
  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 + "<th style='width:80px'></th>";  
          myRows  = myRows + "</tr>";
       });             
       $("#myTableHead").html(myRows);  
       
      myRows=""; 
      let i = 1;  
       $.each(tbody, function(key, row) {  
        i++;
          myRows  = myRows + "<tr>";
          $.each(row, function(key, cell) {  
              myRows  = myRows + "<td>" +  cell + "</td>";
          });

          //(5.U)
          let btnUpd = '<button class="btn btn-outline-success btn-sm" onclick="getJSOpen('+i+')">Open</button>';
          myRows  = myRows + "<td>"+btnUpd+"</td>";
          myRows  = myRows + "</tr>";
       });             
       $("#myTableBody").html(myRows);           
    }).getASRead();
  }

  function getJSOpen(i)  {
    index = i;
      $('#SpanMsg').html('');  

      google.script.run.withSuccessHandler(function(data) {
          let colnm = data[0];
          let row   = data[1][0];
          let idx   = 0;
          $.each(colnm, function(key, value) {                
              colname  = value[0];
              colvalue = row[idx];
              idx++;
              $('#'+colname).val(colvalue);
          }); 
          $('#DivForm').show();           
      }).getASOpen(i);
  }
  • getInputs() : यह Function Google Sheet के आधार पर Form मे Dynamic Inputs बनाने का कार्य करता हैं।
  • myCreate() : यह Function Form को show करता हैं और उसमे यदि कोई वैल्यू हैं तो value को Blank करता हैं ।
  • formClose() : यह Function Form को Hide करने का कार्य करता हैं।
  • getJSRead() : यह Function Google set सभी Data को HTML Table मे Display करने का कार्य करता हैं।
  • getJSOpen() : जब हम किसी Row को Edit करते हैं तब हम इस Function को call करते हैं इसमे index pass कर हम उस Row के data को Form पर Open करते हैं।

5. Apps Script Code for Update Google Sheet From HTML Table

अब यहाँ से Apps Script के Code की शुरुआत होती हैं 

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

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

function getInputsList() {
  let table = FormSheet.getRange("A2:C").getValues().filter(r => r.every(Boolean)); 
  return table;
} 

function getSubmit(data, index) {
  var myAry = [];
  const pair = data.split("&");

  pair.forEach(function(value) {
        const val = value.split("=");
        let finalValue = decodeURIComponent(val[1]);
           myAry.push(finalValue);
  });

  if (index == 0) {     
    EmpSheet.appendRow(myAry) ;  
  }
  else { 
      let cols = EmpSheet.getLastColumn();
      EmpSheet.getRange(index, 1, 1, cols).setValues([myAry]);
  }
}

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] ;
} 

function getASOpen(i) {  
  let cols = EmpSheet.getLastColumn();
  let colnm = FormSheet.getRange("A2:C").getValues().filter(r => r.every(Boolean)); 
  let data  = EmpSheet.getRange(i, 1, 1, cols).getValues();
  return [colnm, data];
}
  • doGet() : इस Function से हमने Index Page को सबसे पहले Display किया हैं।
  • getInputsList() : इस Function से हमने Google Sheet के data को JavaScript पर Return किया हैं जिससे की हम Form के Input बना सके ।
  • getSubmit() : इस Function से हम Data को Insert / Update करते हैं । इसमे हम Form के data को Post कर Apps Script मे Receive करते हैं और Index के आधार पर Google Sheet मे Row को update / Append करते हैं ।
  • getASRead() : इस Function से हम Google Sheet का data को HTML Table पर Retrieve करते हैं। ताकि सभी Rows और Columns Dynamically दिखा सके।
  • getASOpen() : जब हम किसी Record को open करते हैं तब इस Function का उपयोग करते हैं इसमे हम Index पास कर एक Single Row के data को Form पर Open करते हैं ताकि कुछ भी change कर उसे Update कर सके।

6. Project Deployment

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

How to Deploy Web API

7. Project Execution

अब हम इस Project (Update Google Sheet From HTML Table) को Execute कर देखेंगे की क्या रिजल्ट आ रहा हैं ।

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

Update Google Sheet From HTML Table

जब आप इसमे Open Button पर Click करेंगे तब आपको निम्न Form Open होगा जिसमे की Selected Row का Data Fill हो जाएगा।

Display Google Sheet data to HTML Form

आशा हैं मुझे की आपको किस तरह से Google Sheet के Data को update कर सकते हैं समझ मे आ गया होगा। फिर भी आपको कोई भी Doubt हो तो आप मुझे निःसंकोच Comment कर सकते हैं ।

आपको यह Article (Update Google Sheet From HTML Table) कैसा लगा बताना न भूले

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

Related Posts

One Comment

Add a Comment

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