i´m currently new to sheets coding, i´ve been following this tutorial in order to create a userform, the problem is when i get to approximately 19:03 of the video, my view of "Search" tab doesn´t seem to work, below are my codes:
https://www.youtube.com/watch?v=6zFowiTNhqI
loadForm.gs
function loadMainForm() {
const htmlServ = HtmlService.createTemplateFromFile("main");
const html = htmlServ.evaluate();
html.setWidth(850).setHeight(600);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, "Editar informações dos prescritores")
}
function createMenu(){
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("Custom Menu");
menu.addItem("Open Form", "loadMainForm");
menu.addToUi();
}
function onOpen(){
createMenu();
}
search.html
<h1>Search</h1>
addcustomers.html
<h1>Add Customers</h1>
main.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.nav-link {
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<div class="nav-link active" id="home-link">Home</div>
</li>
<li class="nav-item">
<div class="nav-link" id="search-link">Search</div>
</li>
<li class="nav-item">
<div class="nav-link" id="add-customer-link">Add Customer</div>
</li>
</ul>
<div id="app"></div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
function loadSearchView(){
google.script.run.withSuccessHandler(function(html){
document.getElementById("app").innerHTML = html;
}).loadSearchView();
}
document.getElementById("search-link").addEventListener("click",loadPartialHTML);
</script>
</body>
</html>
loadPartials.gs
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView(){
return loadPartialHTML_("search");
}
function loadAddCustomersView(){
return loadPartialHTML_("addcustomers");
}
I´ve already tried rewriting the code 3 times, and nothing seems to work, when i open the console, an error appears as the following image
If someone could please help me figure out what I did wrong, I would be very grateful