Create Dynamic HTML Dropdown from Google Sheet

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

Learn how to create dynamic HTML dropdown from Google Sheet for a more user-friendly and engaging website. Our step-by-step guide will show you how to easily integrate this feature and improve user experience.

Welcome Friends मैं हूं संदीप निगम और आज आपको बताऊंगा किस तरह से आप Google Apps Script का उपयोग कर अपने HTML पर Dropdown/Select/Data list दिखा सकते हैं. जैसा की आपको निम्न Image मे दिखाई दे रहा होगा

Dynamic HTML Dropdown from Google Sheet

इस आर्टिकल से पहले के आर्टिकल मे हमने एक HTML Bootstrap Invoice उसके बाद उसमे Dynamic Rows Creation और Delete के लिए jQuery के logic लिखे फिर Invoice के Data को Google Sheet पर Submit किया और अब हम Google Sheet से Dropdown लगाना इस आर्टिकल से सीखेंगे । अभी तक के आर्टिकल पढ़ने के लिए नीचे लिंक दे रहा हु ।

अब इस आर्टिकल मे हम dropdown / select / Data list लगाना सीखेंगे ।

Step For Create Dynamic HTML Dropdown from Google Sheet

  • Step 1 – Create Google Sheet : सबसे पहले एक गूगल शीट बनाएं जिसमें आपको जो डाटा दिखाना हो वह लगाएं
  • Step 2 – Apps Script Code : अब हम Apps का एक Function लिखेंगे जो कि Google Sheet से डाटा को लेकर उसे JSON में Convert कर हमें Data Return करेगा.
  • Step 3 – JavaScript Code : इसके बाद JavaScript का एक Function बनाकर हमने जो Apps Script Link का उपयोग कर डाटा को यहां पर गेट कर लेंगे और उससे HTML पर सेट कर देंगे .
  • Step 4 – HTML Code : अब हमें HTML में एक का Data List या फिर Select Option बनाना होगा.

इस आर्टिकल (Create Dynamic HTML Dropdown from Google Sheet) का Video भी Available हैं।

Step 1 : Create Google Sheet

हमने यहां पर एक Google sheet बनाई है और इसमें पहले कॉलम में जो भी Item की लिस्ट हम Invoice में दिखाना चाहते हैं वह हमने यहां पर टाइप की है और इस डाटा को हम जो script लिख रहे हैं उसका उपयोग कर HTML पर दिखाएंगे.

Google Sheet for dropdown

Step 2 : Apps Script Code

यहां पर हम Apps Script का उपयोग कर ,हमने जो Google Sheet बनाई है उसे Link कर, उसके डाटा को doGet Function में पहले कॉलम के डाटा को फिल्टर कर रिटर्न करेंगे.

Create Dynamic HTML Dropdown from Google Sheet के लिए Apps Script Code इस प्रकार है

let MySheets = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1cS....");  //01
let ItemSheet = MySheets.getSheetByName("Item");  //02
function doGet(e) {
  let page = e.parameter.page;                    //03

  if (page == null || page == undefined) {
    page = "index";
    return HtmlService.createTemplateFromFile(page).evaluate();
  }
  else if (page == 'dropdown') {                  //04
    let table = ItemSheet.getRange("A:A").getValues().filter(r => r.every(Boolean));                                //05
    let str = JSON.stringify(table);              //06
    return ContentService.createTextOutput(str);  //07 
  }
}

 अब मैं आपको इस स्क्रिप्ट में जो स्टेटमेंट लिखे हैं उनका क्या अर्थ है वह एक-एक कर समझाता हूं

  • 01. यहां पर हमने एक स्क्रिप्ट से हमारी Google Sheet फाइल को लिंक किया  है, Inverted Commas (“) के अंदर आपको अपनी Google Sheet  का URL लिखना है.
  • 02. यहां पर हमने Google Sheets में जो Second Sheet है Item वाली उसको लिंक किया है.
  • 03. यहां पर हमने जो URL से Parameter पास किए हैं उन्हें Get करेंगे.
  • 04. यहां पर हम URLमें जो हमने Page का नाम दिया था उसकी Base पर Condition लगाएंगे ताकि हम Multiple फंक्शन का उपयोग कर सकें.
  • 05. यहां पर हमने पहले कॉलम की वैल्यू Get की है , Filter का उपयोग इसलिए किया है ताकि यदि कोई Blank Valueहो तो वह ना आए.
  • 06. यहां पर हमने जो Array में वैल्यू Get की है उसे JSON String में Convert करेंगे.
  • 07. अब अंत में हम यहां पर JSON String रिटर्न कर देंगे.

यहां पर Apps Script का काम पूरा होता है अब आप इसे Deploy कर ले और Deploy करने के बाद जो Link आएगी उसे यहां से कॉपी करें . इस लिंक का उपयोग हम जावा स्क्रिप्ट में करेंगे. यदि आप पहली बार Deploy कर रहे हैं तब निम्न लिंक की मदद ले ।

Deploying Apps Script as a Web API: A Step-by-Step Guide

Step 3 : JavaScript Code

अब हम JavaScript का Code लिखेंगे जिसमें हमने जो Apps script से प्रोजेक्ट को Deploy किया है उस Link को हम यहां पर लगाकर Apps Script से जो डाटा Return किया था उसे हम यहां पर Get करेंगे और HTML में Set करेंगे

function FillDataList()
{
        $.getJSON("https://script.google.com/macros/s/"+AppsScriptLink+"/exec?page=dropdown", 
        function (data) {                              //01
          var Options="";                              
          $.each(data, function(key, value)            //02
          {
            Options = Options + '<option>' + value + '</option>';   //03
          });
          $(".item_nm").append(Options);               //04
        });
}
  • 01: इस लाइन के पहले Parameter में आपको Apps Script की Link देना है जो कि हमने अभी Deploy की थी.
  • 02: अब जो हमारे पास Return Data आया है उसे हमने एक Loop लगाकर JSON String को अलग अलग कर लिया है 
  • 03. JSON स्ट्रिंग को अलग अलग करने के बाद हमारे पास जो Value आई है उसे हमने Option Tag में जोड़ कर एक String
  • 04. यहां पर हम जो HTML का उपयोग करेंगे उसमें एक का Data List या Select Option बनाएंगे उसमें हमने यह जो अभी String बनाई है उसे हम यहां पर  jQuery का उपयोग कर Append कर देंगे .

हमने अभी जो यह उपरोक्त फंक्शन बनाया है इसे जब Page Load है उस समय पर Call कर देंगे. 

$(document).ready(function () {
    FillDataList();
});

इतना करने पर आपका JavaScript का Work Complete होता है अब हम HTML पर Work करेंगे .

Step 4 : HTML Code For Dropdown

देखिए HTML में आप 2 तरह से आप इस डाटा को दिखा सकते हैं

पहला तो आप <SELECT> <OPTION> का उपयोग कर लें जिसमें डेटा एक Dropdown के फॉर्मेट में दिखेगा और आप उसमें से कोई भी रिकॉर्ड सिलेक्ट कर सकते हैं

दूसरा ऑप्शन आपके पास यह है कि आप <datalist> का उपयोग करें इसमें आपको एक Benefit यह मिलेगा कि आप जैसे जैसे टाइप करेंगे आपके पास एक फिल्टर लिस्ट आती जाएगी,

जैसी आपके प्रोजेक्ट की Requirement है उसके अनुसार आप Select Option या फिर Datalist का उपयोग कर सकते हैं मैंने यहां पर आपको दोनों के बारे में बताया है तो इसमें से कोई भी एक आप अपने Project में उपयोग कर सकते हैं.

4.1 HTML Code For Select Option Tag

यहां पर हमने Dropdown में डाटा दिखाने के लिए Select Option का उपयोग किया है हमने जो JavaScript Code लिखा था उसमें आपने देखा होगा कि jQuery का उपयोग कर हमने एक Class जिसका नाम item_nm था उसमें Data को Append किया था

हमने item_nm Class यहां पर Select Tag की Class में दी है जिसके कारण वह जो Data हम Apps Script का उपयोग कर Google Sheet से लाए थे वह यहां पर Append हो जाएगा.

Name Attribute में जो हमने item_nm लिखा है वह डाटा को Google Sheet पर Submit करने के लिए लिखा है 

 <select class="form-control item_nm" name="item_nm"  autocomplete="off">
      <option>Select</option>
 </select>

HTML में उपरोक्त Code लिखने के बाद जब आप उसे Browser में Preview कर देखेंगे तो पाएंगे कि कुछ निम्न प्रकार से Display Dropdown दिखाई देगा.

Create Dynamic HTML Dropdown from Google Sheet

यहां पर मैंने आपको केवल drop-down लगाने का Logic बताया है यदि आप यह पूरा Invoice HTML Bootstrap से बनाना चाहते हैं तो इसके लिए मैं आपको आर्टिकल का Link दे रहा हूं आप यहां Click कर उसे समझ कर बहुत अच्छे से बना सकते हैं.

4.2 HTML Code For Datalist Tag

यहां पर हमने Filter Datalist में डाटा दिखाने के लिए <input> and <datalist> का उपयोग किया है हमने जो JavaScript Code लिखा था उसमें आपने देखा होगा कि jQuery का उपयोग कर हमने एक Class जिसका नाम item_nm था उसमें Data को Append किया था.

हमने item_nm Class यहां पर Datalist Tag की Class में दी है जिसके कारण वह जो Data हम Apps Script का उपयोग कर Google Sheet से लाए थे वह यहां पर Append हो जाएगा.

<Input> Tag के Name Attribute में जो हमने item_nm लिखा है वह डाटा को Google Sheet पर Submit करने के लिए लिखा है 

<input class="form-control " name="item_nm" list="mylist" autocomplete="off">
<datalist id="mylist" class="item_nm"> </datalist>

<input> tag पर Data दिखाने के लिए हमें datalist को input से Link करना होता है और Link करने के लिए हम list Attribute का उपयोग करते हैं List Attribute में हम datalist की id देते हैं जिससे वह datalist Link होकर हमें डाटा दिखाती है और हम जैसे जैसे Type करते हैं वह Data Filter होता जाता है जैसा कि आपको प्रीव्यू में दिखाया है.

Dynamic HTML Datalist from Google Sheet
  • Preview 1 : जैसे ही आप item name <input> Tag पर Click करेंगे तो आपको एक लिस्ट दिखाई देगी जिसमें पूरा डाटा दिखाई देगा जो हमने Google Sheet में आइटम वाली Sheet पर लिखा था.
  • Preview 2 : उसके बाद आप जैसे ही <input> tag पर C टाइप करेंगे तो C से Related जो डाटा उस लिस्ट में है वह Filter होकर आपको दिखाई देगा जैसे यहां पर C से रिलेटेड Computer, Cabinet और Scanner दिखाई दे रहा है, Scanner मे बीच में C होने के कारण आपको Scanner भी दिखाई दे रहा.
  • Preview 3 : इसी सर्च को आगे जारी रखते हुए C को हटाकर जैसे ही P Type करूंगा तो P से Related जो भी मेरे पास Item है वह सभी दिखाई देंगे चाहे उनमें भी शुरू में P आ रहा हो, बीच में P आ रहा हो या आखरी में P आ रहा हो.

आशा है मुझे आपको यह आर्टिकल Dropdown List में Google Sheet के डाटा को दिखाने के लिए जो मेरे द्वारा बनाया गया है बहुत अच्छे से समझ में आ गया होगा यदि इस आर्टिकल से रिलेटेड आपके मन में कोई भी Query हो कोई भी Doubt हो तो आप निसंकोच मुझे कमेंट कर सकते हैं .

यह आर्टिकल Create Dynamic HTML Dropdown from Google Sheet कैसा लगा मुझे कमेंट कर बताना ना भूलें , मिलते हैं नेक्स्ट आर्टिकल में Thank for Reading.

अपना कीमती समय देने के लिए धन्यवाद

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

Related Posts

Add a Comment

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