Sidebar functionality in google sheets: clicking a button to open a new 'page' within the sidebar
<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>