Fetch Item Rates from Google Sheets | Dynamic Invoice Tutorial using Apps Script & JavaScript

In this tutorial, you’ll learn how to fetch item rates from Google Sheets to create a dynamic invoice. We’ll build a web application that leverages Google Apps Script and JavaScript to retrieve item rates from a Google Sheet based on user selections. The invoice will update in real-time as users choose different items from the dropdown list. This step-by-step guide is perfect for beginners looking to explore web development and Google Sheets integration.

Requirement : Fetch Item Rates from Google Sheets

हम चाहते हैं की हमने जो Invoice बनाई थी उसमे Item select करने पर उस Item का जो Rate Google Sheet पर Update हैं वह Invoice मे Rate Wale Column पर आ कर Set हो जाए । ओर आगे के जो भी Calculation हो वह अपने अनुआर कर करने लगे । इसके लिए सबसे पहले मैंने जो Item की dropdown Google Sheet से लगाई थी उसी Google Sheet मे मैंने Rate का एक Column Add कर उसमे Value Fill कर दी है।

Project Flow (Fetch Item Rates from Google Sheets)

जैसा की आप इस Article मे देखेंगे की एक पहले से बनी HTML Invoice मे हम एक Functionality और add कर रहे हैं की जैसे ही हम Item सिलेक्ट करे उसका Rate भी हमे दिखाई देने लगे।

• इसके लिए हमने Google Sheet बनाई हैं उस पर एक Rate का Column बनाएगे।
• इसके बाद हम Apps Script मे doGet पर एक Condition लगा कर item name के आधार पर Google Sheet से Item का Rate return करेंगे।
• इसके बाद Apps Script को Deploy कर एक Link बना लेंगे।
• इसके बाद हम javascript मे एक Function बना कर apps Script की जो लिंक हमने बनाई हैं उस पर item pass कर rate get करेंगे और उसे HTML पर set करवा देंगे।
• अंत मे हम HTML के onchange event का उपयोग कर JavaScript के function को Call कर लेंगे।

HTML से JavaScript Function call होगा फिर JavaScript से Apps Script call होगी और Apps Script Google Sheet से Data Fetch कर हमे Apps Script को देगी Apps Script उस data को JavaScript को Return कर देगी ओर JavaScript उसे HTML पर सेट कर देगा।

Html Form के data को Google Sheet पर कैसे भजे ? सीखने के लिए देखे

Apps Script Code for Fetch Item Rates from Google Sheets

Value fill करने के बाद हम एक Apps Script मे doGet पर एक Condition और add करेंगे ।

let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
let InvSheet  = MySheets.getSheetByName("Inv");                   
let ItemSheet = MySheets.getSheetByName("Item");   //01

function doGet(e) {

  let page = e.parameter.page;
 else if (page == 'getrate') {   //02
    let no = e.parameter.no;  //03
    let ReturnData = ItemSheet.getRange("A:A").createTextFinder(no).matchEntireCell(true).findAll(); //04
    let StartRow = 0;
    ReturnData.forEach(function (range) {
      StartRow = range.getRow();  //05
    });

    let val = 0;
    if (StartRow > 0) {   
        val = ItemSheet.getRange(StartRow, 2).getValue(); //06
    }

    let str = JSON.stringify(val);
    return ContentService.createTextOutput(str);  //07
  }


}

• 01: यहाँ पर हमने जो Item Sheet बनाई थी उसे एक Variable मे Point किया हैं ।
• 02 : यहा पर हमने page के आधार पर के Condition लगा कर जब हम getrate page के नाम से link को Execute करेंगे तब इस Condition मे entrer हो इसलिए इस तरह से Condition लगाई हैं ।
• 03: यहाँ पर जो हम उधर से यानि की Javascript से Item pass करेंगे उसे यहाँ पर no variable मे receive करेंगे।
• 04: अब हमने जो Item Pass किया हैं उस Item को हम Item Sheet मे Search करेंगे। और Return Value को ReturnData नामक Variable मे Store कर लेंगे।
• 05: अब हमने जो Return value प्राप्त की थी उसका Row number, StartRow Variable मे store कर लेंगे।
• 06: अब हमारे पास Row Number आ गया हैं इसके आधार पर हम Column number 2 यानि की Rate की वैल्यू को val Variable मे Store कर लेंगे।
• 07: यहाँ से जो Rate हमे प्राप्त हुव हैं उसे json stirng बना कर हम Return कर देंगे।

इतना करने के बाद आप Apps Script Project को Deploy कर एक link generate कर लेंगे ओर copy कर उसका उपयोग हम JavaScript मे करेंगे।

JavaScript Code for Fetch Item Rates from Google Sheets

अब आपको निम्न function को आपके JavaScript मे बनाना हैं ।

function GetRate(v) { //01
        var index = $(v).parent().parent().index();  //02
	var Item = $(v).val(); //03
        $.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=getrate&no="+Item,
        function (data) { //04
		if (data > 0) {
		document.getElementsByName("rate")[index].value = data;	//05
		Calc(v); //06
		}
        });
}

• 01: JavaScript मे हम सबसे पहले एक Function बनाएंगे जिसका नाम हमने GetRate रखा हैं इस function का उपयोग हम Html मे करेंगे ।
• 02: Invoice मे Multiple Rows हैं तो Current Row का Index प्राप्त करने के लिए हमने index variable मे item के parent के parent का index को Store कर लिया हैं .
• 03: यहाँ पर हमने Item की वैल्यू को भी Store कर लिया हैं ।
• 04: अब हमने जो Apps Script से Link Generate की थी उसको हम यहाँ पर $.getJSON का उपयोग उससे से Return वैल्यू को Get करेंगे ।
• 05: अब जो वैल्यू हमे Return मिली हैं उसे हम rate वाले Column पर set कर देंगे।
• 06: इसके बाद हम जो हमने आगे के Calculation के लिए Function लिखा हैं उसको कल कर देंगे

HTML Code for Fetch Item Rates from Google Sheets

अब हम हमारे HTML पर जहा पर हमने Table मे Item Input बनाया हैं उस पर आ कर उसके onchange event पर function को Call करेंगे जो की हमने JavaScript मे बनाया हैं ।

 <input class="form-control " name="item_nm"  list="mylist" autocomplete="off" 
                                 required value="a" onchange="GetRate(this)"  >
 <datalist id="mylist" ></datalist>

अब जैसे ही आप list मे से Item Name select करेंगे तब यहा से GetRate function call होगा और apps script से Item का Rate ला कर HTML पर सेट कर देगा।

Output

यहा पर आप देख रहे होने की item select करने पर उसका का Rate हैं वह Google Sheet से आकर Display हो गया हैं

आशा हैं मुझे आपको किस तरह से HTML Page पर Google Sheet से Data को Fetch कर दिखाया जाता हैं बहुत ही अच्छे से समझ मे आ गया होगा, फिर भी यदि आपको इस Article से Related कोई Doubt हो या कोई Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । अपना कीमती समय देने के लिए धन्यवाद

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

• MySQL Function
• MySQL Stored Procedure
• PHP Get /Post Method के बारे में जाने
• PHP Math Function के बारे में जाने
• C से C ++ सीखे सरल शब्दों में
• PHP Variable के बारे में जाने
• Arduino Control Structure 
• Union in C
• Declaration of Pointer in C
• jQuery Search Filter
• MySQL Create Table | Alter Table | Drop Table
• API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
• CPANEL In Hindi