Question

我正在为我公司的设备建立一个调度工具。我在带有侧边栏的Google表格中运行脚本。我想让用户选择一个按钮（即Make Reservation），它通向侧边栏中我可以接收用户输入的另一个页面。我不知道如何用我当前的代码触发此事件。我有一个HTML代码文件和一个Google脚本文件。

根据下面的代码，有人可以帮助我或引导我朝着正确的方向前进吗？

HTML / CSS代码：

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://ssl.gstatic.com/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.com">
            <button class="blue" id="run-translation">Make a Reservation</button>

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

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

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

    <script src="//ajax.googleapis.com/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.com", '_blank');
            win.focus();
        }

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

Google Apps脚本代码：

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);
}

Answer 1

好吧，首先，我假设这个应用程序是一个附加组件，因为它在你的电子表格中。这意味着你不需要那个讨厌的doGet（）。仅在独立脚本上才需要doGet。

幸运的是，在GAS插件中，您想要实现的目标非常简单。您需要做的就是将.run（）函数调用到.gs来处理它。所以，你的HTML应该是这样的。

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

所以，现在在.gs：

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

如果这是一个独立的脚本，请考虑将其更改为附加组件。它们更容易使用，并且它们最有可能更好地工作。

Google工作表中的补充工具栏功能：点击按钮可打开新页面＆＃39;在侧边栏内

1 个答案: