Google表單中的側欄功能：單擊按鈕以在側邊欄內打開新的「頁面」

我正在爲我公司的設備構建調度工具。我在帶有側邊欄的Google工作表中運行腳本。我希望讓用戶選擇一個按鈕（即Make Reservation），這個按鈕可以導向邊欄中的另一個頁面，我可以在其中輸入用戶輸入內容。我不知道如何用當前的代碼觸發此事件。我有一個HTML代碼文件和一個Google腳本文件。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>

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

來源

2016-07-07 Issab0bissa

您的代碼缺少許多結束標記。 – lorond

看起來你想要隱藏和顯示內容。您需要了解如何構建HTML，識別不同的HTML元素，並顯示和隱藏它們。以下是關於如何隱藏HTML元素的一些文檔：[Documentation - style.display none]（http://www.w3schools.com/jsref/prop_style_display.asp） –

我將照顧結束標記。謝謝。不知道隱藏/顯示的內容是我在找什麼，因爲按鈕/文本仍然會在相同的位置和地方，這會造成問題。 – Issab0bissa

好吧，首先，我假定這個應用程序是一個附加，因爲它在你的電子表格中。這意味着你不需要討厭的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); 
}

，如果這是一個獨立的腳本，很大程度上考慮改變這是一個附加的。他們使用起來更容易，他們很可能會更好地工作。

來源

2016-07-08 15:31:18 EvSunWoodard

這工作！非常感謝：）！！！！我到處搜索，找出並找不到它。 – Issab0bissa

非常歡迎您！ :) – EvSunWoodard

Google表單中的側欄功能：單擊按鈕以在側邊欄內打開新的「頁面」

回答

相關問題