How to create an HTML template inside a called HTML Template

Question

So, i've been experimenting with de google apps script lately. So far so good, but i ran into a problem that's drivin me out: I have a button in a spreadsheet that calls a sidebar menu with a function in scripts

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

the html file I call with this function works just fine, but I'd like to call a second form, also trough an html file to manage the spreadsheet data. So i've added this function to the .gs file (and started a new html file):

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

but when I try to call it from a button in the first html file, nothing happens at clicking the button (checked the log and the function the button should call isn't being executed. Follow the code (the html is full of stuff, like the buttons and everything)("btn" is the ID for a button working on the html file):

<script>

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


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

</script>

I'm learning c in college but have very little experience in javascript ou google script, so I'm pretty sure I've done something really wrong. Thanks for any help in advance. :)

Does this answer your question? [Linking to another HTML page in Google Apps Script](https://stackoverflow.com/questions/15668119/linking-to-another-html-page-in-google-apps-script) — TheMaster, Mar 04 '20 at 22:44

Cooper · Answer 1 · 2020-03-05T15:51:10.550

1

You can try something like this:

Run showTSidebar to get things rolling and then click the button.

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>

ah6.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>

sbresrc.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>

animation:

edited Mar 05 '20 at 15:51

answered Mar 05 '20 at 05:47

Cooper

59,616
6
23
54

I'm getting this: "ReferenceError: include is not defined".. :\ (I'm using the materialize css) – Thales Souza Mar 05 '20 at 13:17
Oh yeh That’s a function that I forgot to add. I’ll get to when I get to my computer. – Cooper Mar 05 '20 at 14:46
I put include in there. – Cooper Mar 05 '20 at 15:51
so, "ah4.html" is the sidebar file, and the button calls to the "ah6.html" file? how do i change the html file that the botton calls? I'm gonna try to incorporate the function of yout button in the fixed action buttons i already have. – Thales Souza Mar 05 '20 at 16:41
Actually, I would say that ah4,ah6 and sbresr are the sidebar. So the button in the sidebar first calls a javascript function which sets up callback function and then calls loadForm on the server return then returns the html back to the callback function which then loads the form into the div. I think your action button is an image...Is that right? If so, it can't work because it can't call the sidebar unless the sidebar has setup a callback and that can't be done from outside of sidebar. – Cooper Mar 05 '20 at 17:12
Actually, my button it's just and element from the css i'm using, looks like this:
MSE
[...] (it's just and button that folds into 4 more, i think i can change it to work with your solution)
– Thales Souza Mar 05 '20 at 17:47
Okay. I didn't understand what the button was. If it's in the clientside then you can attach an event to it run any function you wish. – Cooper Mar 05 '20 at 17:59

How to create an HTML template inside a called HTML Template

1 Answers1