如何使用谷歌脚本从侧边栏（也是 HTML）调用模式对话框（带有 HTML 文件）

Question

I need a little light on how to make some buttons work.我需要了解如何使某些按钮工作。

I have a sidebar created on a HTML file that called from a button inside a spreadsheet on google apps.我在 HTML 文件上创建了一个侧边栏，该文件从谷歌应用程序电子表格内的按钮调用。 here's the function:这是功能：

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

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

And here's my Sidebar.html file:这是我的 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>

I have all the buttons created (it's a fixed action button that reveals 4 more actual button) and visually working, but i don't know how to make each one of them call a new html.file for a modal dialog.. I have written the functions for each button on my .gs file but can't make the actual buttons call those functions.我已经创建了所有按钮（它是一个固定操作按钮，显示了另外 4 个实际按钮）并且在视觉上工作，但我不知道如何让它们中的每一个都为模式对话框调用一个新的 html.file ..我有为我的 .gs 文件中的每个按钮编写了函数，但无法使实际按钮调用这些函数。 That's my whole .gs file:这是我的整个 .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");
}

If anyone could give some tip about how to do that, I'll be really thankfull.. thanks in advance!如果有人可以提供一些有关如何做到这一点的提示，我将非常感激..提前致谢！

I'm using the Materialize CSS.我正在使用 Materialize CSS。
My sidebar is summoned by a button on a spreadsheet.我的侧边栏是由电子表格上的一个按钮调用的。
Some prints: Sidebar // Buttons unfolded一些打印：侧边栏//按钮展开

Answer 1

Try google.script.run.AnyServerSideFunctionName()试试google.script.run.AnyServerSideFunctionName()

Client to Server Communications 客户端到服务器通信

Answer 2

You can achieve this by using `google.script.run` function.您可以使用`google.script.run`函数来实现这一点。

In the following example you can see it working for just one button, but it goes the same for all of them.在下面的例子中，你可以看到它只对一个按钮起作用，但对所有按钮都是一样的。

/* Code.gs */

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

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

function btn1(){
  // Display a modal dialog box with custom HtmlService content.
  var htmlOutput = HtmlService
  .createHtmlOutput('<p>My modal content here...</p>')
  .setWidth(250)
  .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Btn 1 modal title');
}

You want the function btn1 to be called when the icon of btn1 is clicked in the sidebar.您希望在侧栏中单击btn1图标时调用函数btn1 。 To do this and still use the materialize icons, you can change the <input> tags for <button> and place the icon inside as follows:要做到这一点并仍然使用实体化图标，您可以更改<button>的<input>标签并将图标放置在里面，如下所示：

<!-- 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">
    <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>
                <button id="btn1" data-position="left" data-tooltip="Button 1" class="btn-floating waves-effect waves-light teal darken-3 tooltipped" value="format_list_numbered" onclick="google.script.run.withUserObject(this).btn1()"><i class="material-icons">format_list_numbered</i></button>
            </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>

Notice the button's onclick attribute注意按钮的 onclick 属性

onclick="google.script.run.withUserObject(this).btn1()"

You can use google.script.run to call functions in your .gs scripts from the client-side.您可以使用google.script.run从客户端调用 .gs 脚本中的函数。

Note:笔记：

You can create the htmlOutput from file too.您也可以从文件创建 htmlOutput。 Change the code in the btn1 function accordingly.相应地更改btn1函数中的代码。

function btn1(){
  // Display a modal dialog box with custom HtmlService content.
  var htmlOutput = HtmlService
  .createHtmlOutputFromFile('btn1')
  .setWidth(250)
  .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Btn 1 modal title');
}

Here is an example of btn1.html这是btn1.html的示例

<p>This is HTML generated from file...</p>

See it in action:看看它在行动：

如何使用谷歌脚本从侧边栏（也是 HTML）调用模式对话框（带有 HTML 文件）

问题描述

2 个解决方案

解决方案1
0 2020-03-11 19:56:54

解决方案2
0 已采纳 2020-03-12 10:31:44

You can achieve this by using `google.script.run` function.您可以使用`google.script.run`函数来实现这一点。

Note:笔记：

Further reading:进一步阅读：

如何使用谷歌脚本从侧边栏（也是 HTML）调用模式对话框（带有 HTML 文件）

问题描述

2 个解决方案

解决方案1 0 2020-03-11 19:56:54

解决方案2 0 已采纳 2020-03-12 10:31:44

You can achieve this by using google.script.run function.您可以使用google.script.run函数来实现这一点。

Note:笔记：

Further reading:进一步阅读：

解决方案1
0 2020-03-11 19:56:54

解决方案2
0 已采纳 2020-03-12 10:31:44

You can achieve this by using `google.script.run` function.您可以使用`google.script.run`函数来实现这一点。