[SOLVED] Google sheet extension showSidebar problem

Google sheet extension showSidebar problem

My Google App Script has a design with two layers of HTML switching, as follows:

The user clicks on the UI to open the sidebar (index.html). The user can then select the desired feature, which switches to the respective main function page.html.

User open
index.html (choose functionality)
main page.html

All page switching is done using a Google Script (GS) function:

// Here is my index.gs 
function switchPage(page, title) {
  const html = HtmlService.createTemplateFromFile(page)
      .evaluate() 
      .setTitle(title);
  SpreadsheetApp.getUi().showSidebar(html);
}

Here is my index.html part of JS


<div
  class="card mt-3 mb-3 shadow-sm"
  style="max-width: 540px; cursor: pointer"
  onclick="google.script.run.switchPage('Main functionPage', 'function 1')"
>
  <div class="row g-0">
    <div class="col-md-4 d-flex align-items-center justify-content-center">
      <img src="path/to/icon.png" width="85px" />
    </div>

    <div class="col-md-8">
      <div class="card-body">
        <h6 class="card-title">Main function 1</h6>
        <p class="card-text text-muted small">Main function 1</p>
      </div>
    </div>
  </div>
</div>

Recently, when users try to switch from index.html to another main function page, the sidebar automatically disappears. There are no error messages in the client-side log, nor are there any errors in the server-side log; it just crashes/closes directly.

I would like to know if there are any best practices or solutions for this issue.

Solution