如何使用Google脚本从侧边栏(也是HTML)调用模式对话框(带有HTML文件)

问题描述 投票:0回答:1

我需要稍微了解如何使某些按钮起作用。

我在HTML文件上创建了一个边栏,该边栏是通过google应用中电子表格内的按钮调用的。这是功能:

function Sidebar() {
  var Form = HtmlService.createTemplateFromFile("Sidebar");
  var ShowForm = Form.evaluate();

  ShowForm.setTitle("Sidebar");
  SpreadsheetApp.getUi().showSidebar(ShowForm);
}

这是我的Sidebar.html文件:

<!DOCTYPE html>
  <html>
     <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize-icons.css">      
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     </head>

    <!--WELCOME CARD-->

    <body style="background-color:#424242">
    <div class="card grey darken-2" style="top:3px">
        <div class="card-content white-text">
          <span class="card-title" style="font-size:20px;font-weight:bold;color:#80cbc4">MANAGER</span>
          <p style="font-size:14px">Welcome to the manager, choose an option below to start!</p>
        </div>
    </div>


    <!--BUTTONS-->

    <div class="fixed-action-btn" style="bottom: 45px; right: 10px;">
       <a class="btn-floating btn-large teal">START</a>
       <ul>
          <li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn1" data-position="left" data-tooltip="Button 1"><i class="material-icons">format_list_numbered</i></a></li>
          <li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn2" data-position="left" data-tooltip="Button 2"><i class="material-icons">assessment</i></a></li>
          <li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn3" data-position="left" data-tooltip="Button 3"><i class="material-icons">search</i></a></li>
          <li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn4" data-position="left" data-tooltip="Button 4"><i class="material-icons">add_box</i></a></li>
       </ul>
    </div>


  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
  $(document).ready(function(){
    $('.tooltipped').tooltip();
    $('.fixed-action-btn').floatingActionButton();
  });
  </script>

    </body>
  </html>

我创建了所有按钮(这是一个固定的操作按钮,可以显示4个以上的实际按钮)并且在视觉上可以正常工作,但是我不知道如何使每个按钮都调用新的html.file进行模式对话框。我已经为.gs文件中的每个按钮编写了函数,但无法使实际的按钮调用这些函数。那是我的整个.gs文件:

/** @OnlyCurrentDoc */


function Sidebar() {
  var Form = HtmlService.createTemplateFromFile("Sidebar");
  var ShowForm = Form.evaluate();

  ShowForm.setTitle("Sidebar");
  SpreadsheetApp.getUi().showSidebar(ShowForm);
}

function btn1(){
  var Form = HtmlService.createTemplateFromFile("btn1");
  var ShowForm = Form.evaluate();

  ShowForm.setTitle("btn1").setHeight(400).setWidth(1000);
  SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn1");
}

function btn2(){
  var Form = HtmlService.createTemplateFromFile("btn2");
  var ShowForm = Form.evaluate();

  ShowForm.setTitle("btn2").setHeight(400).setWidth(1000);
  SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn2");
}

function btn3(){
  var Form = HtmlService.createTemplateFromFile("btn3");
  var ShowForm = Form.evaluate();

  ShowForm.setTitle("btn3").setHeight(400).setWidth(1000);
  SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn3");
}

function btn4(){
  var Form = HtmlService.createTemplateFromFile("btn4");
  var ShowForm = Form.evaluate();

  ShowForm.setTitle("btn4").setHeight(400).setWidth(1000);
  SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn4");
}

[如果有人能给我一些建议,我将非常感谢..在此先感谢!

  • 我正在使用Materialize CSS。
  • 我的边栏由电子表格上的按钮召唤。
  • 一些印刷品:Sidebar// Buttons unfolded
javascript html google-apps-script google-sheets materialize
1个回答
0
投票

尝试google.script.run.AnyServerSideFunctionName()

Client to Server Communications

© www.soinside.com 2019 - 2024. All rights reserved.