admin管理员组

文章数量:1026989

I'm build a scheduling tool for equipment in my pany. 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.

Can someone help me or lead me in the right direction here based on the code below?

HTML/CSS Code: 

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href=".css">
        <!-- The CSS package above applies Google styling to buttons and other elements. -->    
    </head>

<body>

    <center>
        <div class = "sidebar header-logo">
            <img alt="Add-on logo" class="logo"  src="img.png" width="250" height="35.75">
        </div>
    </center>
    <form>

    <style>

    .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;  
    }
    </style>

    <div class = "text" align = "center">
        <center>
            <b>What would you like to do today?</b>
        </center>
    </div>

    <div class="button1" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Make a Reservation</button>

    <div class="button2" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Cancel Reservation</button>

    <div class="button3" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Request Maintenance</button>

    <div class="button4" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Report Site Bug</button>
        </form>

    <script src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>


    <script>
        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("", '_blank');
            win.focus();
        }

    </script>
</body>
</html>

Google Apps Script 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);
}

I'm build a scheduling tool for equipment in my pany. 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.

Can someone help me or lead me in the right direction here based on the code below?

HTML/CSS Code: 

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://ssl.gstatic./docs/script/css/add-ons1.css">
        <!-- The CSS package above applies Google styling to buttons and other elements. -->    
    </head>

<body>

    <center>
        <div class = "sidebar header-logo">
            <img alt="Add-on logo" class="logo"  src="img.png" width="250" height="35.75">
        </div>
    </center>
    <form>

    <style>

    .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;  
    }
    </style>

    <div class = "text" align = "center">
        <center>
            <b>What would you like to do today?</b>
        </center>
    </div>

    <div class="button1" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Make a Reservation</button>

    <div class="button2" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Cancel Reservation</button>

    <div class="button3" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Request Maintenance</button>

    <div class="button4" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Report Site Bug</button>
        </form>

    <script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>


    <script>
        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.", '_blank');
            win.focus();
        }

    </script>
</body>
</html>

Google Apps Script 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);
}
  • javascript
  • html
  • css
  • google-apps-script
  • sidebar
Share Improve this question edited Aug 19, 2016 at 23:45 user229044♦ 240k41 gold badges344 silver badges347 bronze badges asked Jul 7, 2016 at 15:27 Issab0bissaIssab0bissa 411 silver badge2 bronze badges 3
  • Your code lacks of many closing tags. – lorond Commented Jul 7, 2016 at 15:46
  • It seems that you want to hide and show content. You will need to learn how to structure HTML, identify different HTML elements, and show and hide them. Here is some documentation on how to hide an HTML element: Documentation - style.display none – Alan Wells Commented Jul 7, 2016 at 16:34
  • I will take care of the closing tags. Thank you. Not sure if hiding / showing content is what I am looking for , since the buttons/text would still be in the same position and place which would pose issues. – Issab0bissa Commented Jul 7, 2016 at 16:55
Add a ment  | 

1 Answer 1

Reset to default 4

Alright, first of all, I'm assuming that this application is an add-on, since it's in your spreadsheet. That means you don't need that pesky doGet(). The doGet is only necessary on standalone script.

Luckily, what you are trying to achieve is very easy in a GAS add-on. All you need to do is call a .run() function to your .gs to handle it. So, your HTML should look like this.

<button onclick='doMyStuff()'>button</button>
<script>
  function doMyStuff() {
    google.script.run.setUpNewSidebar();
  }
</script>

So, now at .gs:

function setUpNewSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('newSidebar')
           .setTitle('Report Builder')
           .setSandboxMode(HtmlService.SandboxMode.IFRAME);
         SpreadsheetApp.getUi().showSidebar(ui);
}

If this IS a standalone script, heavily consider changing this to be an add-on. They are much easier to use and they will most likely work better.

I'm build a scheduling tool for equipment in my pany. 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.

Can someone help me or lead me in the right direction here based on the code below?

HTML/CSS Code: 

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href=".css">
        <!-- The CSS package above applies Google styling to buttons and other elements. -->    
    </head>

<body>

    <center>
        <div class = "sidebar header-logo">
            <img alt="Add-on logo" class="logo"  src="img.png" width="250" height="35.75">
        </div>
    </center>
    <form>

    <style>

    .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;  
    }
    </style>

    <div class = "text" align = "center">
        <center>
            <b>What would you like to do today?</b>
        </center>
    </div>

    <div class="button1" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Make a Reservation</button>

    <div class="button2" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Cancel Reservation</button>

    <div class="button3" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Request Maintenance</button>

    <div class="button4" id="button-bar">
        <form action="">
            <button class="blue" id="run-translation">Report Site Bug</button>
        </form>

    <script src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>


    <script>
        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("", '_blank');
            win.focus();
        }

    </script>
</body>
</html>

Google Apps Script 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);
}

I'm build a scheduling tool for equipment in my pany. 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.

Can someone help me or lead me in the right direction here based on the code below?

HTML/CSS Code: 

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://ssl.gstatic./docs/script/css/add-ons1.css">
        <!-- The CSS package above applies Google styling to buttons and other elements. -->    
    </head>

<body>

    <center>
        <div class = "sidebar header-logo">
            <img alt="Add-on logo" class="logo"  src="img.png" width="250" height="35.75">
        </div>
    </center>
    <form>

    <style>

    .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;  
    }
    </style>

    <div class = "text" align = "center">
        <center>
            <b>What would you like to do today?</b>
        </center>
    </div>

    <div class="button1" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Make a Reservation</button>

    <div class="button2" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Cancel Reservation</button>

    <div class="button3" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Request Maintenance</button>

    <div class="button4" id="button-bar">
        <form action="http://google.">
            <button class="blue" id="run-translation">Report Site Bug</button>
        </form>

    <script src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>


    <script>
        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.", '_blank');
            win.focus();
        }

    </script>
</body>
</html>

Google Apps Script 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);
}
  • javascript
  • html
  • css
  • google-apps-script
  • sidebar
Share Improve this question edited Aug 19, 2016 at 23:45 user229044♦ 240k41 gold badges344 silver badges347 bronze badges asked Jul 7, 2016 at 15:27 Issab0bissaIssab0bissa 411 silver badge2 bronze badges 3
  • Your code lacks of many closing tags. – lorond Commented Jul 7, 2016 at 15:46
  • It seems that you want to hide and show content. You will need to learn how to structure HTML, identify different HTML elements, and show and hide them. Here is some documentation on how to hide an HTML element: Documentation - style.display none – Alan Wells Commented Jul 7, 2016 at 16:34
  • I will take care of the closing tags. Thank you. Not sure if hiding / showing content is what I am looking for , since the buttons/text would still be in the same position and place which would pose issues. – Issab0bissa Commented Jul 7, 2016 at 16:55
Add a ment  | 

1 Answer 1

Reset to default 4

Alright, first of all, I'm assuming that this application is an add-on, since it's in your spreadsheet. That means you don't need that pesky doGet(). The doGet is only necessary on standalone script.

Luckily, what you are trying to achieve is very easy in a GAS add-on. All you need to do is call a .run() function to your .gs to handle it. So, your HTML should look like this.

<button onclick='doMyStuff()'>button</button>
<script>
  function doMyStuff() {
    google.script.run.setUpNewSidebar();
  }
</script>

So, now at .gs:

function setUpNewSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('newSidebar')
           .setTitle('Report Builder')
           .setSandboxMode(HtmlService.SandboxMode.IFRAME);
         SpreadsheetApp.getUi().showSidebar(ui);
}

If this IS a standalone script, heavily consider changing this to be an add-on. They are much easier to use and they will most likely work better.

本文标签：

版权声明：本文标题：javascript - Sidebar functionality in google sheets: clicking a button to open a new &#39;page&#39; within the sidebar - 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745661834a2161936.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。