Creating a Unique Data Dropdown with Google Apps Script and Google Sheets | Eliminate Duplicates

Sandip Nigam | December 28, 2023 | Google Apps Script | No Comments

In this detailed Unique Data Dropdown tutorial, we’ll explore the powerful capabilities of Google Apps Script to supercharge your web app’s user experience. You’ll discover how to eliminate duplicate data from your Google Sheet and present it elegantly in a user-friendly HTML select dropdown.

This step-by-step guide covers essential topics, including:

Writing efficient Google Apps Script code.
Building a custom HTML web app.
Removing duplicate entries from Google Sheets.
Populating a dropdown menu with clean data. Deploying your solution for real-world use.

जब भी हमे Google Sheet से Data को Dropdown मे दिखाना होता हैं तो हम आसानी से दिखा पाते हैं लेकिन कभी कभी हमे Duplicates Records मे से केवल Unique Value को ही दिखाना होता हैं तब हमे कुछ Logics लगाना होते हैं , आज के इस Unique Data Dropdown Tutorial मे मे आपको इन Logics के बारे मे ही बताऊँगा। चलिए शरु करते हैं ।

सबसे पहले हम एक Google Sheet बनाएगे जिसमे की हम Duplicate Data की Entry कर लेंगे।

इसके बाद हम Apps Script मे एक dropdown.html File बना लेंगे

<!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>


</head>

<body onload="getCountry();">
  <div class="d-flex align-items-center justify-content-center " style="height:400px">
    <div class="border border-primary p-4 m-4 col-md-4 ">
      <div class="form-group ">
        <label for="Country">Select Country </label>
        <select class="form-control ClsCountry" id="Country"  autocomplete="off" >
          <option>Select</option>
        </select>
      </div>
    </div>
  </div>

  <script>
      //Add JavaScript 
  </script>
</body>

</html>

इस Code को आप चाहे तो अभी जो हमने HTML File बनाई हैं उसमे भी रख सकते हैं ओर चाहे तो एक अलग File बना कर उसे भी Link कर सकते हैं ।

 <script>
      function getCountry() {

            google.script.run.withSuccessHandler(function(data) {
            var Options="";                              
            $.each(data, function(key, value) {
                Options = Options + '<option>' + value + '</option>';   
            });

            $(".ClsCountry").append(Options);           
          }).getCountryList();
      }
  </script>

4. Apps Script Code for Forgot Password

अब हम अपने Code.gs File मे यह Code लिखेंगे ।

let MySheets =SpreadsheetApp.getActiveSpreadsheet();
let CountrySheet = MySheets.getSheetByName("country");  

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

function getCountryList() {
  let table = CountrySheet.getRange("A2:A").getValues().filter(r => r.every(Boolean)); 
  table = removeDuplicates(table);
  return table;
} 

function removeDuplicates(data) {
  newArray = [];
  oldData="";
  data.forEach(function(value) {
    value = value[0];
    if (oldData != value)
      newArray.push(value);
    oldData = value;
 });
 return newArray;
}

doGet(e) : इस Function से हमने हमारे Dropdown.html page को Display करवाया हैं।
getCountryList() : इस Function से हमने Country की List दिखाई इस इस Function को JavaScript द्वारा Call किया गया हैं ।
removeDuplicates(data) : इस Function के द्वारा हमने Duplicate Values को Remove किया हैं ।

इसके बाद Project को Deploy कर लेंगे । Deploy किस तरह से किया जाता हैं सीखने के लिए यहाँ क्लिक करे ।

5. Video के माध्यम से समझने के लिए

Execute करने के बाद आपको जो पहले Duplicates Record दिखाई दे रहे थे अब उनमे से केवल Unique Data ही दिखाई दे रहे होंगे। जब भी आपको Dependent Dropdown बनाना हो तब इस तरह के Logic काम मे आते हैं।

आशा हैं मुझे आपको Unique Data Dropdown बहुत ही अच्छे से समझ मे आ गया हैं, इस Article से related कोई भी Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । यह Article कैसा लगा Comment करना न भूले । अपना कीमती समय देने के लिए धन्यवाद ।

Developer Tips

Creating a Unique Data Dropdown with Google Apps Script and Google Sheets | Eliminate Duplicates

Table of Contents

4. Apps Script Code for Forgot Password

5. Video के माध्यम से समझने के लिए

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

Add a Comment

Table of Contents

1. Google Sheet For Unique Data Dropdown

2. HTML Code for Unique Data Dropdown

3. JavaScript Code for Unique Data Dropdown

4. Apps Script Code for Forgot Password

5. Video के माध्यम से समझने के लिए

6. Result (Unique Data Dropdown)

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

Related Posts

Add a Comment