Google Apps Script Fails to Load Tempate html Files

Question

I have created a sidebar with custom functionality for my spreadsheet. It used to work as expected, but when I opened the file recently it fails to load correctly.

I have an html file called Page that contains the html code. I have another file Stylesheet to store the css and have added it to Page like this:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    My Content
  </body>
</html>

This used to correctly load the stylesheet when I opened the file. However, now I see this instead:

From what I can tell, I am following the proper methods and process from here: https://developers.google.com/apps-script/guides/html/best-practices

I fear that I am missing something obvious, but I would appreciate any help you can provide to get this to work.

UPDATE

Here is my Stylesheet code:

<style>
    .width-100 {
      width: 98%;
      height: 100%
    }
    .red{ color:red; }
    i.material-icons,input[type='Submit']{
      cursor:pointer;
    }
    i.material-icons.active{
      border-bottom: 2px solid red;
      padding-bottom: 3px;
    }
    .sidebar.branding-below {
      top: 0;
    }
    .sidebar.bottom {
      border-top: 1px solid #ddd;
    }
    img.logo{
      position: relative;
      vertical-align: middle;
    }
    #topBar {
      border-bottom: 1px solid #bbb;
      margin-bottom: 10px;
      padding-bottom: 5px;
    }
    #settingForm {
      position: absolute;
      background: white;
      margin: 10px;
      width: 260px;
      top: 36px;
      box-shadow: 2px 2px 1px #bbb;
      border: 1px solid grey;
      padding: 10px;
      position: relative;
    }
    #settingForm hr {
      margin-top: 0;
    }
    #proserWorkSecurity{
    }
    #proserWorkSettings h3 {
      margin: 0 0 10px 0;
      line-height: 20px;
    }
    i#settingsClose {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
    }
    #processingWindow {
      position: absolute;
      padding: 200px 30px 30px 30px;
      width: 78%;
      height: 69%;
      background-color: rgba(256,256,256,0.9);
    }
    .formButton{
      cursor: pointer !important;
    }
    .formButton:hover{
      background: -webkit-linear-gradient(top, #4d90fe, #4787ed) !important;
      color: white !important;
      border: 1px transparent !important;
    }
    .Loader {
      text-align: center;
      padding: 80px 0;
    }
    .Loader_label {
      color: #363636;
      font-size: 13px;
      font-weight: 700;
      margin: 15px 0;
    }
    .CircleSpinner {
      -webkit-animation: spin 0.6s infinite linear;
      animation: spin 0.6s infinite linear;
      fill: #2196f3;
      height: 30px;
      width: 30px;
    }
    svg {
      overflow: hidden;
    }
  </style>

Here is my include:

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

UPDATE 2

I have created a test instance to make it easier to see what is happening. I have added a custom menu Campaign Manager with one menu item to open the sidebar.

https://docs.google.com/spreadsheets/d/10gsWSkaSvf7oi45SBluJm3Y-GsIteMrOP7uzP-26ewU/edit?usp=sharing

There is nothing wrong with the HTML file or the scriplet. There is either a problem with your include function or something wrong with the Stylesheet. Or, there could be some kind of bug in HtmlService. We need to see the code that evaluates the template, and maybe the Stylesheet. — Alan Wells
@SandyGood I added the code. As far as I know, no changes were made to this part of the code between when it was working and when it broke. Did Google update how this works? — davids
The include code is wrong. It should be: HtmlService.createTemplateFromFile(File).evaluate().getContent(); There is no way that createHtmlOutputFromFile would have evaluated that scriptlet before. Something got changed somehow. There was no change that would have created your problem. — Alan Wells
I tried you change and got the exact same results as before. Something else is happening. — davids
You will need to go through a process of elimination. Remove the other links and reload the HTML. As the answer states, what version is this happening in? The "exec" or the "dev" version? — Alan Wells

egg egg · Accepted Answer · 2017-03-29T01:16:07

1

votes

Redeploy it with a new project version.

Google Apps Script Fails to Load Tempate html Files

1 Answers