Separating CSS and JS from HTML using .html files - Google Docs Add-On

Question

Google Apps Script recommends that you separate your CSS and JS from the HTML, using .html files. I have read and followed this documentation, but it's not working for me. Are the scriplets not working correctly? Here is what I have:

Html:

<!DOCTYPE html>
<html>
<head>
<?!= include('Stylesheet'); ?>
<?!= include('Javascript'); ?>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

Javascript.html

 <script>
/* stuff */
 </script>

Stylesheet.html

<style>
/*stuff*/
</style>

.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page').evaluate();
}

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

When you retry your changes, are you using the "exec" or "dev" version of the code? The "exec" version is the published version that has "exec" on the end of the URL. If you are not using the development version, then you need to publish a new update every time that you want to test the published version. — Alan Wells
– Alan Wells, Commented Nov 6, 2017 at 21:29
You can see what HTML content has been served to your browser by using the browser development tools. Right click the page, and choose "inspect" The development tools will open, with the HTML shown. Check if the CSS and JavaScript is present. That's the best way to know for sure what is actually included. If there is malformed HTML, (Bad CSS or JavaScript code) there might be an error serving the page. Sometimes you can save the file, but there is an uncaught error in your code or CSS, that won't show up when you save the file. Hit the f12 key and look for error messages in the console. — Alan Wells
– Alan Wells, Commented Nov 6, 2017 at 21:35
It's not being included. The <?!= include('Stylesheet'); ?> and <?!= include('Javascript'); ?> lines are being displayed as text on the sidebar for some reason — Collin Hurst
– Collin Hurst, Commented Nov 6, 2017 at 22:02
Run the doGet() function from the code editor, and see if you get a prompt to authorize the code. There is nothing wrong with the code. Something else is wrong. — Alan Wells
– Alan Wells, Commented Nov 7, 2017 at 0:36

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

There is a problem with the example

The only problem with the example is that the filenames here in the documentation are all capitalized as follows:

CODE.GS PAGE.HTML STYLESHEET.HTML JAVASCRIPT.HTML

Which is unfortunate because the names as they are used in the code is different.

To Code.gs file:

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();//not all caps but it has to match the name of the file and it doesn't - Change to PAGE
}

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

The PAGE.HTML file:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?><!-- Change to STYLESHEET -->
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?><!-- Change to JAVASCRIPT -->
  </body>
</html>

Again Stylesheet and Javascript is not all capitalized and again both parameters of the include function should match the file names exactly and they don't.

STYLESHEET.HTML:

<style>
p {
  color: green;
}
</style>

JAVASCRIPT.HTML file:

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

Once you get all of the page names the same as they are used in the code the outputs is:

Welcome

Please enjoy this helpful script.

And I think it would be a lot more helpful if the names of the files were not capitalized in the first place because it's pretty easy for a newbie to get this mixed up because they're trying desperately just to get everything copied exactly hoping that it will work.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 7, 2017 at 2:50

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Collin Hurst Over a year ago

Good observation, I logged an issue concerning that. However my names for my files are correct.

Cooper Over a year ago

Well I copied the tutorials and only changed the filenames and it worked for me.

Collin Hurst Over a year ago

I'm using Gapps scripts to make a sidebar add-on to google docs.

Cooper Over a year ago

Here's a link to a simple Google Docs envelope printer that I did and it has a sidebar in it. Link

DannyV · Accepted Answer · 2017-11-06 21:22:21Z

0

There is no stylesheet.html or javascript.html. They are all in one file, the script and style tags. If you want to put them in separate files you would put your javascript in a .js file and your css in a .css file.

edited Nov 6, 2017 at 21:22

answered Nov 6, 2017 at 21:14

DannyV

2301 silver badge6 bronze badges

3 Comments

Alan Wells Over a year ago

There is no CSS file type inside an Apps Script project, but CSS is nothing but HTML. You don't need a special file type of CSS in Apps Script in order to separate out CSS, HTML and JavaScript. There is no .js file type inside of an Apps Script project. It's either a script or HTML. But a script tag is just another type of HTML.

Collin Hurst Over a year ago

According to google documentation, this link is how they want you to do it, but its not working

Alan Wells Over a year ago

The separation of CSS and JavaScript into different files is a recommendation. It's for your benefit. It helps to organize your code and make sense of it. It's easier to maintain and work with.

Collectives™ on Stack Overflow

Separating CSS and JS from HTML using .html files - Google Docs Add-On

2 Answers 2

There is a problem with the example

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

There is a problem with the example

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related