Как вызвать модальное диалоговое окно (с файлом HTML) из боковой панели (также HTML) с помощью скриптов Google - PullRequest
Новая
       10

Как вызвать модальное диалоговое окно (с файлом HTML) из боковой панели (также HTML) с помощью скриптов Google

1 голос
/ 11 марта 2020

Мне нужно немного осветить, как заставить работать некоторые кнопки.

У меня есть боковая панель, созданная для файла HTML, который вызывается с помощью кнопки внутри электронной таблицы в приложениях Google. вот функция: 

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

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

А вот и моя боковая панель. html file: 

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

Если кто-нибудь может дать совет о том, как это сделать, я буду очень благодарен .. заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Этого можно добиться с помощью функции google.script.run.

В следующем примере вы можете увидеть, как она работает только для одной кнопки, но для всех одинаково. 

/* 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');
}

Вы хотите, чтобы функция btn1 вызывалась при нажатии значка btn1 на боковой панели. Чтобы сделать это и по-прежнему использовать значки материализации, вы можете изменить теги <input> на <button> и поместить значок внутри следующим образом: 

<!-- 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>

Обратите внимание на атрибут нажатия кнопки

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

Вы можете использовать google.script.run для вызова функций в ваших скриптах .gs со стороны клиента.

Примечание:

Вы также можете создать htmlOutput из файла. Измените код в функции 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');
}

Вот пример btn1.html

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

Смотрите его в действии:

enter image description here

Дополнительная информация:

0 голосов
/ 11 марта 2020

Попробуйте google.script.run.AnyServerSideFunctionName()

Связь между клиентом и сервером

...