title: Sidebar functionality in google sheets: clicking a button to open a new 'page' within the sidebar
body: <p>I'm build a scheduling tool for equipment in my company. I am running a script in Google sheets that has a sidebar. I would like to have the user select a button (i.e., Make Reservation) which leads to another page in the sidebar where I can take in user input. I am not sure how to trigger this event with the current code I have. I have one HTML code file and one Google scripts file. </p>
  
  <p>Can someone help me or lead me in the right direction here based on the code below? </p>
  
  <p><strong>HTML/CSS Code:</strong> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;base target="_top"&gt;
          &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"&gt;
          &lt;!-- The CSS package above applies Google styling to buttons and other elements. --&gt;    
      &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;center&gt;
          &lt;div class = "sidebar header-logo"&gt;
              &lt;img alt="Add-on logo" class="logo"  src="img.png" width="250" height="35.75"&gt;
          &lt;/div&gt;
      &lt;/center&gt;
      &lt;form&gt;
  
      &lt;style&gt;
  
      .button1 {
          position: absolute;
          transition: .5s ease;
          top: 50%;
          left: 5%;   
      }
  
      .button2 {
          position: absolute;
          top: 0%;
          left: 115%;
      }
  
      .button3 {
          position: absolute;
          top: 115%;
          left: 0%;   
      }
  
      .button4 {
          position: absolute;
          top: 0%;
          left: -100%;   
      }
  
      .text {
          position: absolute;
          top: 150px;
          color: #000000;
          font-size:12pt;  
      }
      &lt;/style&gt;
  
      &lt;div class = "text" align = "center"&gt;
          &lt;center&gt;
              &lt;b&gt;What would you like to do today?&lt;/b&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  
      &lt;div class="button1" id="button-bar"&gt;
          &lt;form action="http://google.com"&gt;
              &lt;button class="blue" id="run-translation"&gt;Make a Reservation&lt;/button&gt;
  
      &lt;div class="button2" id="button-bar"&gt;
          &lt;form action="http://google.com"&gt;
              &lt;button class="blue" id="run-translation"&gt;Cancel Reservation&lt;/button&gt;
  
      &lt;div class="button3" id="button-bar"&gt;
          &lt;form action="http://google.com"&gt;
              &lt;button class="blue" id="run-translation"&gt;Request Maintenance&lt;/button&gt;
  
      &lt;div class="button4" id="button-bar"&gt;
          &lt;form action="http://google.com"&gt;
              &lt;button class="blue" id="run-translation"&gt;Report Site Bug&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;
      &lt;/script&gt;
  
  
      &lt;script&gt;
          window.writeData = function() {
              var formObj = document.getElementById('myForm');
  
              google.script.run.myServerFunctionName(formObj);
          };
  
          $(function() {
              $('#run-translation').click(runTranslation);
              $('#insert-text').click(insertText);
              google.script.run.withSuccessHandler(loadPreferences)
                    .withFailureHandler(showError).getPreferences();
          });
  
          function runTranslation() {
              var win = window.open("http://google.com", '_blank');
              win.focus();
          }
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Google Apps Script Code:</strong> </p>
  
  <pre><code>function onOpen(){
      //
      var ui = SpreadsheetApp.getUi();
  
      ui.createMenu('Scheduling Controls')      
        .addItem('Show sidebar', 'showSidebar')
        .addToUi();
  }
  
  function showSidebar() {
      doGet();
      var html = HtmlService.createHtmlOutputFromFile('Sidebar')
                            .setSandboxMode(HtmlService.SandboxMode.IFRAME)
                            .setTitle('Scheduling Tool')
                            .setWidth(300);
       SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
                     .showSidebar(html);
  
  
  }
  
  function doGet() {
      return HtmlService
              .createTemplateFromFile('Sidebar')
              .evaluate()
              .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
  </code></pre>