Как создать шаблон HTML внутри шаблона HTML - PullRequest
Новая
       0

Как создать шаблон HTML внутри шаблона HTML

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

Итак, в последнее время я экспериментировал со скриптом de google apps. Пока все хорошо, но я столкнулся с проблемой, которая меня преследует: у меня есть кнопка в электронной таблице, которая вызывает боковое меню с функцией в скриптах

macros.gs 

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

   ShowForm.setTitle("ASS-CAD - Cases manager system").setHeight(400).setWidth(1000);
   SpreadsheetApp.getUi().showSidebar(ShowForm);

html файл, который я вызываю с помощью этой функции, прекрасно работает, но я хотел бы вызвать вторую форму, также через файл html, для управления данными электронной таблицы. Поэтому я добавил эту функцию в файл .gs (и запустил новый файл html): 

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

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

, но когда я пытаюсь вызвать его с кнопки в первом файле html, при нажатии кнопки ничего не происходит (проверил журнал и функция, которую должна вызвать кнопка, не выполняется. Следуйте коду (html полон вещей, таких как кнопки и все) ("btn" - это идентификатор для кнопка, работающая над файлом html): 

<script>

document.getElementById("btn").addEventListener("click", NewCase);


function NewCase(){
   google.script.run.NewCase()
}

</script>

Я учусь c в колледже, но у меня очень мало опыта в javascript сценарии Google, поэтому я уверен, что Мы сделали что-то действительно не так. Заранее спасибо за любую помощь.:)

1 Ответ

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

Вы можете попробовать что-то вроде этого:

Запустите showTSidebar, чтобы начать, а затем нажмите кнопку.

ag1.gs: 

function loadForm() {
  var html='<form><input type="text" name="name1"/><input type="button" value="Click" onClick="process(this.parentNode);" /></form>';
  return html;
}

function showTSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createTemplateFromFile('ah4').evaluate());
}

function processForm(obj) {
  SpreadsheetApp.getUi().alert('name1: ' + obj.name1);
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

ah4. html: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('sbresrc') ?>
  </head>
  <body>
   <div id="form"></div>
   <input type="button" value="Load Form" onClick="loadForm();" />
    <?!= include('ah6') ?>
  </body>
</html>

ах6. html: 

<script>
  function loadForm() {
    google.script.run
    .withSuccessHandler(function(html){
      $('#form').html(html);
      $('#form').css('display','block');
    })
    .loadForm();
  }
  function process(obj) {
    google.script.run.processForm(obj);
  }
</script>

sbresr c. html: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

анимация:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...