Google Apps Script with multiple stylesheet & js links

Question

I'm new to Google Apps Scripts and am trying to implement a spacegallery into my google site.

I have separated my css stylesheets & .js files into .html in the script editor and written my html page(minigallery.html), and now I'm trying to link them all in the Code.gs section. Here's what I have so far having used examples from here: https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript

Here's what I currently have in my Code.gs, but when I run the published version the css & js files appear not to be linked (granted I haven't put pics yet). You can find the published link here:

//script.google.com/macros/s/AKfycbybCtW9y-iCT81WvBoCmfGnXWhSwQ5dpa7xyHU_H1ot/dev

`
 // Script-as-app template.
function doGet() {
  var app = UiApp.createApplication().setTitle('Business Card Mini Gallery | MAvC Graphics.').setHeight(50).setWidth(100)
  return HtmlService.createTemplateFromFile('minigallery')
      .evaluate();
}function include(customcss) {
  return HtmlService.createHtmlOutputFromFile('customcss')
      .getContent();
}function include(layoutcss) {
  return HtmlService.createHtmlOutputFromFile('layoutcss')
      .getContent();
}function include(minigallerycss) {
  return HtmlService.createHtmlOutputFromFile('minigallerycss')
      .getContent();
}function include(eyesjs) {
  return HtmlService.createHtmlOutputFromFile('eyejs')
      .getContent();
}function include(jqueryjs) {
  return HtmlService.createHtmlOutputFromFile('jqueryjs')
      .getContent();
}function include(layoutjs) {
  return HtmlService.createHtmlOutputFromFile('layoutjs')
      .getContent();
}function include(utilsjs) {
  return HtmlService.createHtmlOutputFromFile('utilsjs')
      .getContent();
}function include(minigalleryjs) {
  return HtmlService.createHtmlOutputFromFile('minigalleryjs')
      .getContent();
}

` And here is my ill-written minigallery.html code to link the css & js (the first & last lines being the most important):

    <?!= include('customcss'), ('layoutcss'), ('minigallerycss'); ?>

...//lengthy inner page code

<?!= include('eyejs'), ('jqueryjs'), ('layoutjs'), ('minigalleryjs'), ('utilsjs'); ?>

To complicate things I renamed the whole thing from spacegallery to minigallery, but I've already changed all of the files appropriately.

Answer 1

You only need one function named include . Right now you have lots of functions all named "Include".

The name of the file to look up is passed to the include function:

<?!= include('Stylesheet'); ?>

In the above line, Stylesheet is the name of the file to get the contents from. Instead of having multiple functions, you need multiple scriptets.

minigallery.html

<?!= include('customcss'); ?>
<?!= include('layoutcss'); ?>
<?!= include('minigallerycss'); ?>
<?!= include('eyesjs'); ?>
<?!= include('jqueryjs'); ?>
etc.

In your .gs file, just have one include statement:

Code.gs

function doGet() {

  return HtmlService.createTemplateFromFile('minigallery')
   .evaluate() // evaluate MUST come before setting the NATIVE mode
   .setTitle('Business Card Mini Gallery | MAvC Graphics.')
   .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

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

That code is taken directly from the documentation. filename is a variable, it can take on any value that is passed to it.

You can use HTML with UI Service. See below link:

Google Documentation - Use HTML with UI Service

But, I don't think you can use both HTML and UI Service together. I can't find anything that states that, but I know I've tried it in the past. So, I'm quite sure that you need to decide on one or the other. But if someone knows of a way, I'd sure like to know how.