How to open a Model Dialog Box inside another Modal Dialog Box in Google Scripts-CodePudding

I am brand new to google scripts and currently I have a modal dialog box that opens an html file into the picture below.

I would like to able to press the open dashboard button and close this box and open another modal dialog box, however I am struggling to figure out how. Unlike normal html, I can't use a href to reference my other html file for some reason. I have also tried closing the modal box and then recalling the GS function that opens the initial dialog box, but with the new html passed in, also to no avail. I assume I am missing something simple here, since this is so trivial normally, but am not sure what I am missing, any advise would be greatly appreciated.

Code.gs

    function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Jigs & Tools')
      .addItem('First item', 'displayHtmlViewer')
      .addToUi();
}

function include(filename) {
 return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
}

function displayHtmlViewer(file = "index"){
  var html = HtmlService.createTemplateFromFile(file)
            .evaluate()
 SpreadsheetApp.getUi().showModalDialog(html, 'J&T Dashboard');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!=include('stylesheet');?>
  </head>
  
  <body style="background-color:powderblue;">
    
    <div class="btnGroup2" style="width:100%">
      <button style="width:50%" button onclick="google.script.host.close() ; google.script.run.displayHtmlViewer('dashboard')">Open dashboard</button>
    </div>

    <div class="divider"/></div>

    <div class="btnGroup1" style="width:100%">
      <button style="width:50%">Future Button 1</button>
      <button style="width:50%">Future Button 2</button>
    </div>

    <div class="divider"/> </div>


    <div class="btnGroup1" style="width:100%">
      <button style="width:50%">Future Button 3</button>
      <button style="width:50%">Future Button 4</button>
    </div>
    <div class="divider"/> </div>


    <div class="btnGroup1" style="width:100%">
      <button style="width:50%">Future Button 5</button>
      <button style="width:50%">Future Button 6</button>
    </div>

    <div class="divider"/> </div>

    <div class="btnGroup2" style="width:100%" id=myBtn>
      <button style="width:50%" button onclick="google.script.host.close()"> Exit </button>
    </div>


  </body>
</html>

dashboard.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
 <body>
<h4>This is the Dashboard</h4>
  </body>
</html>

CodePudding user response：

When the dialog is opened under a dialog that has already been opened, the existing dialog is closed. I thought that this might be able to be used for your situation. In your script, google.script.host.close() closes the dialog. By this, google.script.run.displayHtmlViewer('dashboard') is not run. So, how about the following modification?

From:

<button style="width:50%" button onclick="google.script.host.close() ; google.script.run.displayHtmlViewer('dashboard')">Open dashboard</button>

To:

<button style="width:50%" button onclick="google.script.run.displayHtmlViewer('dashboard')">Open dashboard</button>