Tips for adjusting HTML files prior to HTMLOutput in Google Apps Script

Question

Tips for adjusting HTML files prior to HTMLOutput in Google Apps Script

I'm looking to make some changes to an HTML file within the doGet() function before it's output in HTMLOut. However, I'm running into an issue with the

<?!=include('css').getContent();?>

code snippet, as it can't be executed and just becomes a part of the HTML text. Any assistance would be greatly appreciated. Here is the code:

function doGet(e) {
  var landingPage;
  landingPage=e.parameter.page ||'index';
  var html=HtmlService.createHtmlOutputFromFile(landingPage);

  var content=html.getContent();
  content=content.replace("%%ToBeChanged%%","New Value");
  var html2=HtmlService.createTemplate(content);
  return html2.evaluate()
    .setTitle('testing Website')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

Below is the index.html file within the project:

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />

   <title>TITLE</title>

   <?!=HtmlService.createHtmlOutputFromFile('styleSheet').getContent(); ?>
    <?!=HtmlService.createHtmlOutputFromFile('script').getContent(); ?>

</head>
<body>
  <form>
    <input type='text' value='##ToBeChanged##'>
  </form>
</body>
</html>

javascript css google-apps-script

Answer 1

Answer №1

If you're looking to load the page with CSS and JavaScript without calling HTMLService in your HTML document, try the following approach:

Code.gs—

function doGet() {
  var template = HtmlService.createTemplateFromFile('LandingPage'); 
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

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

index.html-

<head>
<?!= include("StyleSheet"); ?>
</head>

Note that the doGet function uses .createTemplateFromFile() instead of .createHtmlOutputFromFile. OutputFromFile simply fetches data from the file without processing it, meaning it doesn't render or incorporate the StyleSheet or JavaScript files.

You can find more information on setting this up in the Google Apps Script Documentation under Best Practices.

I trust this explanation helps you out.

Answer 2

If you're looking to load the page with CSS and JavaScript without calling HTMLService in your HTML document, try the following approach:

Code.gs—

function doGet() {
  var template = HtmlService.createTemplateFromFile('LandingPage'); 
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

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

index.html-

<head>
<?!= include("StyleSheet"); ?>
</head>

Note that the doGet function uses .createTemplateFromFile() instead of .createHtmlOutputFromFile. OutputFromFile simply fetches data from the file without processing it, meaning it doesn't render or incorporate the StyleSheet or JavaScript files.

You can find more information on setting this up in the Google Apps Script Documentation under Best Practices.

I trust this explanation helps you out.

Tips for adjusting HTML files prior to HTMLOutput in Google Apps Script

Answer №1

Similar questions

Implementing a PHP button update functionality sans utilizing an HTML form

Creating a stunning image reveal animation using GSAP and clip-path within a React environment

The React Component is caught in a loop of continuous re-rendering and reloading

Showing navigation items in Vuejs based on authentication status

Removing unnecessary keys from intricate JSON data (with the use of pure JavaScript)

Stylish border radius for Bootstrap progress bars

Tips for accessing the initial value within JSON curly braces

Creating a Duplicate of the Higher Lower Challenge Game

What is the best way to ensure my checkboxes are positioned on individual lines?

Strangely compressed HTML image

Reload the text content of a locally hosted webpage within an iframe at regular intervals

Enabling real-time notifications through Express 4 middleware with socket.io integration

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Troubleshooting Yeoman and Angular: Routing troubles persist

Enhancing the functionality of angular-messages is impacting the overall design of

Associate the callback function with a directive that does not have an isolated scope

What is the optimal approach to organizing components' props?

interaction with leaflet popup information

Creating a counter for a list using CSS

Tips for displaying or concealing data in table cells in Google Charts