title: Unable to load HTML file of a Dialog on menu of Google Sheets with Google Apps Script
body: <p>I've been unable to load the HTML file called <code>addSupermarket.html</code> into the dialog which pops up. The idea is that main.html which contains the pop-up dialog's HTML has tabs. And the tabs won't switch and also don't load the respective html files for the tabs.</p>
  <p>This file is called <code>loadForm.gs</code> and it loads the menu.</p>
  <pre><code>function loadMainForm() {
    const htmlServ = HtmlService.createTemplateFromFile(&quot;main&quot;);
    const html = htmlServ.evaluate();
    const ui = SpreadsheetApp.getUi();
    html.setWidth(850).setHeight(600);
    ui.showModalDialog(html, &quot;Add Supermarket&quot;);
  }
  
  function createMenu() {
     SpreadsheetApp.getUi().createMenu(&quot;Utilities&quot;)
       .addItem(&quot;Add new Supermarket&quot;, &quot;loadMainForm&quot;)
       .addToUi();
  }
  
  function onOpen() {
    createMenu();
  }
  </code></pre>
  <p>This is what <code>main.html</code> looks like. It is the actual HTML of the dialog but I want to load the HTML of the tab <code>addSupermarkets.html</code> into the tab called <em>Add Supermarket</em>.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; crossorigin=&quot;anonymous&quot;&gt;
  
      &lt;title&gt;Hello, world!&lt;/title&gt;
      &lt;style&gt;
        .nav-link {
          cursor:pointer;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;ul class=&quot;nav nav-tabs&quot;&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;div class=&quot;nav-link active&quot; id=&quot;search-link&quot;&gt;Search&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;div class=&quot;nav-link&quot; id=&quot;add-supermarket-link&quot;&gt;Add Supermarket&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Optional JavaScript; choose one of the two! --&gt;
  
      &lt;!-- Option 1: Bootstrap Bundle with Popper --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Option 2: Separate Popper and Bootstrap JS --&gt;
  
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js&quot; integrity=&quot;sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
    &lt;script&gt;
  
      function loadAddSupermarketView() {
        google.script.run.withSuccessHandler(function(html) {
          document.getElementById(&quot;app&quot;).innerHTML = html;
        }).loadAddSupermarketView();
      }
      document.getElementById(&quot;add-supermarket-link&quot;).addEventListener(&quot;click&quot;, loadAddSupermarketView);
  
    &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p><code>addsupermarket.html</code> looks like this right now, it just has an H1 text as a placeholder.</p>
  <pre><code>&lt;h1Add Supermarket&lt;/h1&gt; 
  </code></pre>
  <p>This is <code>loadAddSupermarket.gs</code></p>
  <pre><code>function loadPartialHTML_(partial) {
    const htmlServ = HtmlService.createTemplateFromFile(partial);
    return htmlServ.evaluate.getContent();
  }
  
  function loadAddSupermarketView() {
    return loadPartialHTML_(&quot;addSupermarket&quot;);
  }
  </code></pre>
  <p>This is the dialog that shows up. <a href="https://i.stack.imgur.com/w9cg2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w9cg2.png" alt="Pop up Dialog with blank contents" /></a></p>
  <p>Where have I gone wrong? Why can I not load the HTML into the file?</p>