Effortlessly Search HTML Invoices from Google Sheet with Apps Script

| April 20, 2023 | Google Apps Script | No Comments

In this tutorial, you will learn how to create an HTML invoice that can search for relevant records in a Google Sheet using Apps Script and JavaScript. This tutorial covers the steps to create a search button that retrieves data from a Google Sheet and displays it on the invoice.

Related Video : HTML Invoice Search From Google Sheet Using Apps Script

हम इस Article से सीखेंगे की किस तरह से आप HTML Invoice पर जिस भी Invoice का Number Type करेंगे और सर्च करेंगे तो उस Invoice का Data Google Sheet से Apps Script के द्वारा HTML पर Invoice पर कैसे Set किया जाए ।

Google Sheet : Data search will be done from here

  • सबसे पहले Google Sheet का Data हमे दिखाना हैं इसलिए हमने यह Google Sheet बनाई हैं ।
  • इस Sheet का नाम Inv हैं जब हम Apps Script Coding के समय Sheet से Data Pick करेंगे तब इसका उपयोग करेंगे ।
Google Sheet

HTML Invoice

इसमे Inv. No. पर Invoice Number Type करने के बाद जब आप Search Button Press करेंगे तब JavaScript Function call होगा और Apps Script का उपयोग कर Google Sheet से data ला कर इसी Invoice पर Display कर देगा।

HTML Invoice

चलिए अब हम Step by Step सीखते हैं

Step 1 : Apps Script Code for Getting Records

यह Apps Script का Code हैं । इस Code को आपको Apps Script Editor मे Paste करना है और इसको Deploy कर Deployment की लिंक बना कर JavaScript मे उपयोग करना हैं ।

Apps Script Deploy करने की Process जानने के लिए क्लिक करे ।

let MySheets = SpreadsheetApp.getActiveSpreadsheet();      //01
let InvSheet = MySheets.getSheetByName("Inv");             //02
function doGet(e) {                                        //03
  let page = e.parameter.page;                             //04
  if (page == 'search')                                    //05
  {
      let no = e.parameter.no;                             //06  
      let ReturnData = InvSheet.getRange("A:A").createTextFinder(no).matchEntireCell(true).findAll();
                                                           //07
      let StartRow=0;
      let EndRow=0;

      ReturnData.forEach(function (range) {                //08 
        StartRow = range.getRow();                         //09
      });

      if (StartRow > 0) {                                  //10
         for (var i = StartRow + 1; i <= StartRow + 10; i = i + 1) { //11
             let val = InvSheet.getRange(i, 6).getValue(); //12
             if (val == "") {                              //13
                 EndRow = i - 1;                           //14
                 break;
             }
         }
  
         let table = InvSheet.getRange("A"+StartRow+":I"+EndRow).getValues(); 
                                                           //15
         let str = JSON.stringify(table);                  //16 
         return ContentService.createTextOutput(str);      //17
     }
     else {
         let str = JSON.stringify("NOT FOUND");            //18 
         return ContentService.createTextOutput(str);      //19
     }
  }
}
  • 01: यहां पर हमने  एक्टिव गूगल  शीट को एक वेरिएबल MySheets में सेट किया है। 
  • 02: यहां पर हमने MySheets से पहले वाली शीट “Inv” को एक वेरीअबल InvSheet मे सेट किया हैं । 
  • 03: यहां पर हमने doget फंक्शन बनाया हैं । 
  • 04: यहां पर हमने Page Parameter की value को get किया हैं। जो की हमारे द्वारा javascript से pass किया गया था । 
  • 05: आप यहां पर हमने Page variable से कंडीशन चेक की हैं हमने Javascript से Search pass किया था उसे चेक किया हैं । 
  • 06: यहा पर हमने जो एक और Parameter Pass किया था NO उसकी वैल्यू को एक Variable मे get किया हैं । 
  • 07: यहां पर हमने जो आप नंबर पास करेंगे उस पास किए हुए नंबर के लिए हमने टैक्स फाइंडर बनाया है जो जिसमें जो नंबर हम देंगे उस से रिलेटेड जो भी डाटा होगा वह हमें यहां पर आकर दिखाई देगा और जो हम सर्च कर रहे हैं वह पूरी रेंज में कर रहे हैं तो हमने यहां पर पहले वाले कॉलम में वह डाटा को सर्च करेगा और जो भी सर्च होगा वह रिटर्न डाटा वाले वेरिएबल में आ जाएगा। 
  • 08: यहां पर हमने जो रिटर्न वैल्यू है उस पर एक लूप लगाया है वैसे यहां पर हमेशा सिंगल वैल्यू ही रिटर्न होगी एक से ज्यादा वैल्यू भी रिटर्न हुई तो बाद वाले को यह मानेगा और उसकी वैल्यू को हमें रिटर्न कर देगा । 
  • 09: यहां पर हमें जो Rang आएगी उसकी Row का Serial Number  मिल जाएगा
  • 10: यहां पर हमने कंडीशन लगाई है कि यदि हमें StartRow 0 जीरो से बड़ी हो तो फिर आगे की स्क्रिप्ट एग्जीक्यूट होगी
  • 11: हां पर हमने एक StartRow  से एक लूप StartRows + 10 तक  चलाया है आप चाहे तो इस वैल्यू को बढ़ा सकते हैं। 
  • 12: यहां पर हमने जो हमारा 6th नंबर का कॉलम है उसकी वैल्यू को एक val  वेरिएबल में सेट किया है। 
  • 13: जब तक val की वैल्यू मैं कुछ मिलता रहेगा जब तक यह कंटिन्यू चलता रहेगा और जैसे ही val ब्लैंक मिलेगा वैसे ही हम निम्न Condition मे Enter हो जाएंगे। 
  • 14: यहा पर हमने EndRow की वैल्यू सेट की हैं । हमें यहां तक का डाटा उठाना है इसलिए हमने इसे -1 किया है और इसके बाद हम लूप को यहां से ब्रेक कर देंगे । 
  • 15: हमने जो अभी उपरोक्त Code लिखा हैं इससे हमे StartRow और End Row मिल गई हैं इसके आधार पर हम A:I तक की रेंज को Table Variable मे Set कर देंगे। 
  • 16: उसके बाद जो वैल्यू Table  में आई है उसे JSON। stringify  किया और STR  वेरिएबल में हमने उसकी वैल्यू को ले लिया। 
  • 17: अब जो वैल्यू STR  में आई थी उसे हमने रिटर्न कर दिया। 
  • 18: यदि Start Row 0 मिलेगी तब str Variable मे NOT FOUND सेट कर दिया हैं। 
  • 19: यहा पर हमने STR की Value को रिटर्न कर दिया हैं ।

Step 2 : HTML Code For Search Icon

2.1 Add Font CND

  • Search Icon लगाने के लिए हम सबसे पहले एक Icons की CDN add करेंगे । यह Code आपको head tag मे लिखना हैं । 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

2.2 Add Search Button

  • हमने पहले से बने Inv No के बाद मे एक button add करेंगे ।
  • Button add करने के लिए हमने एक button tag लिया हैं और Icon दिखाने के लिए हमने i tag मे bi bi-search class का उपयोग किया हैं ।
  • साथ ही मे हमने यहा पर button के onclick पर search() function का उपयोग किया हैं । 
<div class="input-group mb-3">
    <span class="input-group-text" >Inv. No</span>
    <input type="text" class="form-control" placeholder="Inv. No"  id="inv_no" name="inv_no" autocomplete="off" required >
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button" onclick="Search();"><i class="bi bi-search"></i></button>
    </div>
    <div class="valid-feedback">Invoice No. is OK</div>
</div>

Html का Preview कुछ इस प्रकार से दिखाई देगा ।

Step 3 : JavaScript Code For Set Result on HTML

Search Button पर जो हमने Search Function Call किया था वह Function यंहा पर बनाया हैं । 

function Search()
{
        var no = $('#inv_no').val();                      //01
        $.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=search&no="+no, 
        function (data) {                                 //02
          if (data == "NOT FOUND") {                      //03
            alert('Invoice No. Not Found...');
          }
          else {                                          //04
            var record = data;
            var i = 0;
            $.each(record, function(key, value) {         //05
                  if (i == 0) {                           //06
                      var dt = value[1].substring(0,10);  //07
                      document.getElementsByName("inv_dt")[0].value = dt;
                      document.getElementsByName("inv_no")[0].value = value[1];
                      document.getElementsByName("cust_nm")[0].value = value[2];
                      document.getElementsByName("addr")[0].value = value[3];
                      document.getElementsByName("city")[0].value = value[4];
                  }
                  else {                                  //08  
                       if (i > 1) BtnAdd();               //09
                       document.getElementsByName("item_nm")[i].value = value[5];                  
                                                          //10 
                       document.getElementsByName("qty")[i].value     = value[6];
                       document.getElementsByName("rate")[i].value    = value[7];
                       document.getElementsByName("amt")[i].value     = value[8];
                  }
                  i = i + 1;
            });
          }
        });
}
  • 01: इससे हमने जो Invoice Number Type कर रहे हैं उसे Get किया हैं ।
  • 02: getJSON से हम जो Apps Script Project की लिंक देते हैं उससे Data Return होता हैं, इसमने हमने Page मे Search और no पर invoice number पहुचाया हैं । जिसे हम Apps script मे read करते हैं ।
  • 03: यदि हमारे द्वारा कोई ऐसा Invoice No दिया गया जो की Google Sheet पर available नहीं हैं तब data मे NOT FOUND return होगा , इसके आधार पर हम Invoice Not Found का Message दिखा देंगे ।
  • 04: जब data variable मे data आएगा तब हम इस block मे लिखे Code Execute होंगे।
  • 05: data Rows और columns के form मे आता हैं यहा से हमने जितनी भी Rows हैं उनको अलग – अलग किया हैं ।
  • 06: यहा पर हमने जो Header मे Columns हैं उनकी Condition लगा कर उनको सेट किया हैं, जो पहली Rows Return होती है उसमे Header के Columns होते हैं ।
  • 07: यहा पर हमने जो भी Rows हमने Get हुई हैं उसमे array मान कर सभी Header Column की Value को हमने सेट कर लिया हैं ।
  • 08: पहली Rows के अलावा जितनी भी Rows हैं ऊनके Data को इस Block मे Read किया जाएगा ।
  • 09: Table मे एक Row open होने ओर Set हो जाती हैं , इसलिए हमने यहाँ पर Condition लगाई हैं की जो Detail वाला Data Get हो उसमे पहली Row पर Rows Insert नहीं होना चाहिए उसके बाद Rows Insert होना चाहिए।
  • 10: जीतने भी Tables के columns हो उनको अब एक एक कर Set किया गया हैं ।

इस Article मे हमने HTML Invoice Search From Google Sheet Using Apps Script के बारे मे बताया हैं आशा हैं की आपको यह Article बहुत अच्छे से समझ मे आ गया होगा।

आपको यह Article कैसा लगा ? बताना न भूले, मिलते हैं Next Article मे Thanks for Reading ।

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

Related Posts

Add a Comment

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