Unable to load HTML file of a Dialog on menu of Google Sheets with Google Apps Script-CodePudding

This question was

Where have I gone wrong? Why can I not load the HTML into the file?

CodePudding user response：

I tried to replicate your code and found some issues:

Incorrect file extension for loadForm.html and loadAddSupermarket.html, File contains Apps Script method, you should use .gs file extension instead
You have unnecessary imports in your HTML file. nav-bar action does not need Popper.js, it requires JQuery and JQuery is not imported in your HTML, this causes the other tab not to be clickable.
In your loadAddSupermarket.gs file, addSupermarket does not match any file in your file list. Apps Script is case sensitive when it comes to file names. Rename your addsupermarket.html with addSupermarket.html
In the htmlServ.evaluate.getContent(); of loadPartialHTML_(partial) function. This will produce an error as script can't find evaluate property in the HtmlTemplate. I think you missed to add () next to it.
The items under <li> starts with <div> but ends with </a>. You should use instead.

Here I refactor your code and was able to get the correct output for Add Supermarket tab.

main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <ul >
    <li ><a data-toggle="tab" href="#search" id="search-link">Search</a></li>
    <li ><a data-toggle="tab" href="#addsupermarket" id="add-supermarket-link">Add Supermarket</a></li>
  </ul>
  <div >
    <div id="search" ></div>
    <div id="addsupermarket" ></div>
  </div>

  <script>
    function loadAddSupermarketView() {
      google.script.run.withSuccessHandler(function(html) {
        document.getElementById("addsupermarket").innerHTML = html;
      }).loadAddSupermarketView();
    }
    document.getElementById("add-supermarket-link").addEventListener("click", loadAddSupermarketView);
  </script>
</body>
</html>

addSupermarket.html

<h1>Add Supermarket</h1>

loadform.gs

function loadMainForm() {
  const htmlServ = HtmlService.createTemplateFromFile("main");
  const html = htmlServ.evaluate();
  const ui = SpreadsheetApp.getUi();
  html.setWidth(850).setHeight(600);
  ui.showModalDialog(html, "Add Supermarket");
}

function createMenu() {
   SpreadsheetApp.getUi().createMenu("Utilities")
     .addItem("Add new Supermarket", "loadMainForm")
     .addToUi();
}

function onOpen() {
  createMenu();
}

loadAddSupermarket.gs

function loadPartialHTML_(partial) {
  const htmlServ = HtmlService.createTemplateFromFile(partial);
  return htmlServ.evaluate().getContent();
}

function loadAddSupermarketView() {
  return loadPartialHTML_("addSupermarket");
}

Output: