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.

linking the css & js files to the html, because when I look at the published page it shows with no stylings or action — TechWebTech

Alan Wells Alan Wells · Accepted Answer · 2014-11-22T15:48:21

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.

Google Apps Script with multiple stylesheet & js links

1 Answers

minigallery.html

Code.gs