Open an dialog from the sidebar

See full code
Leave a comment
Create script from the snippet ^{*See how to use scrviz for clone Apps Script project}

The main code

app/sidebar.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#" id="btnShowModalDialog">Show the modal dialog</a>
    <script>
      document.addEventListener('DOMContentLoaded', (e) => {
        document
          .getElementById('btnShowModalDialog')
          .addEventListener('click', (e) => {
            e.preventDefault();
            google.script.run.showModalDialog();
          });
      });
    </script>
  </body>
</html>

app/index.js

/**
 * Opens the sidebar
 */
function openSidebarDialog() {
  SpreadsheetApp.getUi().showSidebar(
    HtmlService.createHtmlOutputFromFile('app/sidebar.html')
  );
}

/**
 * Opens the modal dialog
 */
function showModalDialog() {
  SpreadsheetApp.getUi().showModalDialog(
    HtmlService.createHtmlOutputFromFile('app/dialog.html'),
    'Modal dialog'
  );
}

Run it

run.js

/**
 * Runs the snippet
 */
function run() {
  openSidebarDialog();
}

#common_ui