Googleのサイドバー機能：サイドバー内に新しい「ページ」を開くためのボタンをクリック

私の会社の機器のスケジューリングツールを作成しています。私はサイドバーがあるGoogleのシートでスクリプトを実行しています。私はユーザがユーザ入力を受け入れることができるサイドバーの別のページにつながるボタンを選択させる（すなわち、予約する）ようにしたいと思う。私は現在のコードでこのイベントをトリガーする方法がわかりません。私は1つのHTMLコードファイルと1つの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>

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

出典

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アドオンでは非常に簡単です。 .gsに.run（）関数を呼び出してそれを処理するだけです。したがって、HTMLはこのようになります。 .GSで今そう

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

、：

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のサイドバー機能：サイドバー内に新しい「ページ」を開くためのボタンをクリック

答えて

関連する問題