Google 表格中的侧边栏功能:单击按钮可在侧边栏中打开新的“页面”

Sidebar functionality in google sheets: clicking a button to open a new 'page' within the sidebar

本文关键字：侧边栏 页面 按钮 功能 表格 单击 Google      更新时间：2023-09-26

我正在为我公司的设备构建一个调度工具。我正在谷歌工作表中运行一个带有侧边栏的脚本。我想让用户选择一个按钮（即预订），该按钮会转到侧边栏中的另一个页面，我可以在其中接受用户输入。我不确定如何使用我拥有的当前代码触发此事件。我有一个HTML代码文件和一个谷歌脚本文件。

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

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>

谷歌企业应用套件代码：

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

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

幸运的是，您在 GAS 附加组件中要实现的目标非常容易。您需要做的就是对 .gs 调用 .run（） 函数来处理它。所以，你的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);
}

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

相关文章：