Create Dynamic HTML Forms Using Google Apps Script (CRUD)

| February 8, 2024 | Google Apps Script | 3 Comments

Learn how to create dynamic HTML forms using Google Apps Script in this comprehensive tutorial. Follow along as we walk through the step-by-step process of building a customizable form that dynamically adjusts and responds to user inputs. Discover powerful techniques and best practices for leveraging Google Apps Script to enhance form creation and interactivity.

इस Article मे हम किस तरह से HTML Form के सभी Input का Data Google Sheet पर Store कर सकते हैं । इसे Dynamic इसलिए कहा जा रहा है क्युकी आप जीतने भी Column को चाहे Google Sheet पर Store कर सकते है , आपको बार बार HTML Code को Change करने की कोई आवश्यकता नहीं होती हैं , या समझे की हम Google Sheet मे एक Sheet पर Define कर देते हैं की हमे कौन कौन से Columns रखना हैं उसके आधार पर एक Form बन जाता हैं। और और आप जैसे ही उस पर Entry कर Submit करते हैं data Google Sheet पर आ कर स्टोर हो जाता हैं। यानि की हम दो Sheet को आवश्यकता होती हैं पहली जो की Form को Design करती हैं और दूसरी जिस पर आ कर Data Store होता है।

इसमे हम Create के बारे मे बता रहे हैं आने वाले Article मे Read , Update, Delete के बारे मे भी बताएंगे

1. Google Sheet for Form Design

1.1 Sheet for Form Design

सबसे पहले हम निम्न प्रकार से एक Google Sheet बनाएंगे जिसका नाम हम Form रखेंगे।

  • ID : इस Column मे आपको एक Unique column name रखना हैं space आदि का उपयोग नहीं करना हैं।
  • Name : इस मे आप जो भी लिखेंगे यह Label बन कर आपको Form मे दिखाई देगा
  • Type : इस Column मे आपको Input का टाइप लिखना होता हैं की आप इसे number type का बनाना चाहते हैं की text type

1.2 Sheet for Form Data Storage

एक Blank Sheet और बनाएंगे जिसका नाम हमने Employee रखा हैं उसमे केवल आपको Column बनाना हैं जो आपने पहली वाली Sheet मे बनाए थे वैसे

2. HTML Code for Create Dynamic HTML Forms

आपको 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> /*Add Style */   </style>



</head>
 <body onload="getInputs();">
    
    <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="BtnSubmit" class="btn mycolor col-4 text-white " onclick="mySubmit()" > Submit </button>
          </div>
        </div>
    </div>
      <script> /*Add Script */   </script>

  </body>
</html>
  • getInputs() : Page के load होने पर इस Function को Call कर दिया जाता हैं जिससे की HTML मे Dynamic From Create हो जाता हैं ।
  • mySubmit() : और Submit button पर इस Function को Call कर दिया जाता हैं जिससे की Form का Data Google Sheet पर Post हो जाता हैं।

उपरोक्त HTML मे आपको CSS और JavaScript जोड़ना होगी जिसका Code आगे दिया गया है।

3. CSS Code for Create Dynamic HTML Forms

यह CSS Code हैं । इसे आपको Copy कर HTML मे Style Tag मे Paste करना हैं। यदि आप अलग file बनाना चाहे तो अलग file भी बना सकते है। 

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

4. JavaScript Code for Create Dynamic HTML Forms

यह JavaScript Code हैं । इसे आपको Copy कर HTML Body tag मे last मे Script Tag मे Paste करना हैं। यदि आप अलग file बनाना चाहे तो अलग file भी बना सकते है। 

<script>
    
    function getInputs() {
     
    google.script.run.withSuccessHandler(function(data) {
          
      let myHTML="";   
       $.each(data, function(key, value) {   
        
               //let MyLabel = '<label>' +value[1]+ '</label>';
               //let MyInput = '<input name="'+value[0]+'" type="'+value[2]+'"  />';
          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);
           $('#BtnSubmit').hide();
         }).getSubmit(myText);
  }
    </script>
  • getInputs() : यह Function Apps Script के getInputsList() Function को call कर Google Sheet से data को read कर आपके HTML Form पर Create कर देता है ।
  • mySubmit() : यह Function जो भी Input बने हैं उसके data को Google Sheet पर Post कर देता है।

5. Apps Script Code for Create Dynamic HTML Forms

यह Code आपको code.gs फाइल मे लिखना हैं। 

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) {

  var myAry = [];
  const pair = data.split("&");

  pair.forEach(function(value) {
        const val = value.split("=");
        let finalValue = decodeURIComponent(val[1]);
        myAry.push(finalValue);
  });
  
  EmpSheet.appendRow(myAry) ;  
 
}
  • doGet() : इस Function से जैसे ही आप Apps Script Deployment से project को Run करते हैं तब यह Function Call होता हैं और index page को display कर देता हैं ।
  • getInputsList() : यह Function Form Sheet से सभी data को JavaScript पर Return कर देता है ।
  • getSubmit() : जब हम Form Submit करते हैं तब यह Function call होता है जो की Form से भेजे गए Data को Google Sheet पर append कर देता हैं।

6. Project Deployment

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

How to Deploy Web API

7. Project Execution (Create Dynamic HTML Forms)

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

जैसे ही आप लिंक पर क्लिक करेंगे कुछ इस तरह से स्क्रीन दिखाई देगी यह पूरी तरह से Dynamic हैं इसमे जीतने भी Input बने हैं सभी Google Sheet मे Store वैल्यू के आधार पर बने हैं ।

जब आप इसमे दो तीन Entry कर अपडेट करेंगे तो Google Sheet मे कुछ इस तरह से Data दिखाई देने लगेगा।

आपको यह Article Create Dynamic HTML Forms कैसा लगा बताना न भूले

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

Related Posts

3 Comments

Add a Comment

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