Adding Bootstrap 4 Searchable Dropdown In Google Apps Script
So I have been trying to use Bootstrap-select to add a search feature in my dropdown menu for Google Apps Script. I tried following this guide, and added the cdn and js available h
Solution 1:
You must to add stylesheet into your head after bootstrap stylesheets.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
and add script into body
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script><!doctype html><htmllang="en"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"crossorigin="anonymous"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous"><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"></head><body><divclass="container"><ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="nav-item"role="presentation"><buttonclass="nav-link active"id="home-tab"data-bs-toggle="tab"data-bs-target="#home"type="button"role="tab"aria-controls="home"aria-selected="true">Home</button></li><liclass="nav-item"role="presentation"><buttonclass="nav-link"id="sales-tab"data-bs-toggle="tab"data-bs-target="#sales"type="button"role="tab"aria-controls="sales"aria-selected="false">Sales</button></li><liclass="nav-item"role="presentation"><buttonclass="nav-link"id="purchase-tab"data-bs-toggle="tab"data-bs-target="#purchase"type="button"role="tab"aria-controls="purchase"aria-selected="false">Purchase</button></li><liclass="nav-item"role="presentation"><buttonclass="nav-link"id="contact-tab"data-bs-toggle="tab"data-bs-target="#contact"type="button"role="tab"aria-controls="contact"aria-selected="false">Contact Details</button></li></ul><divclass="tab-content"id="myTabContent"><divclass="tab-pane fade show active"id="home"role="tabpanel"aria-labelledby="home-tab">1</div><divclass="tab-pane fade"id="sales"role="tabpanel"aria-labelledby="sales-tab"><br><h3class="display-6">New Sales Case</h3><divclass="col-md-4"><selectclass="selectpicker"data-live-search="true"aria-label=".form-select-sm example"id="inputSales-CaseOwner"></select></div><br><h5>Contact Details</h5><formclass="row g-3"><divclass="col-md-4"><labelfor="inputSales-CxName"class="form-label">Search with Phone Number</label><selectclass="selectpicker"data-live-search="true"aria-label="Default select example"id="inputSales-CxName"></select></div></form><br><div><buttontype="submit"class="btn btn-primary"id="save-button-contact">Save</button></div></div></div></div><!-- Optional JavaScript; choose one of the two! --><!-- Option 1: Bootstrap Bundle with Popper --><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"crossorigin="anonymous"></script><!-- Option 2: Separate Popper and Bootstrap JS --><!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
--><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script><script>functiongetSalesCaseOwnerDropdown() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("CaseOwners");
return ws.getRange(2, 1, ws.getLastRow() - 1, 1).getValues();
}
</script><script>functionafterSalesDropdownReturned(arrayOfArrays) {
var item = document.getElementById("inputSales-CaseOwner");
arrayOfArrays.forEach(function(r) {
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
}
functionafterFormLoadsSalesCaseOwner() {
//google.script.run.withSuccessHandler(afterSalesDropdownReturned).getSalesCaseOwnerDropdown();
}
document.addEventListener("DOMContentLoaded", afterFormLoadsSalesCaseOwner);
</script></body></html>Continue to pay attention to the scripts order
Post a Comment for "Adding Bootstrap 4 Searchable Dropdown In Google Apps Script"