How to include CSS and javascript file in Google Script App

Question

I am new about Google App Script . I have done coding in google script app. I have read the best practice for adding CSS and JavaScript. I have followed this documentation and created a JavaScript and CSS file. But when I have run this code, it's showing me wrong output.

Documentaion Link: https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript

My code is below:

code.gs

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

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

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .createMenu('Dialog')
    .addItem('Open', 'openSidebar')
    .addToUi();
}

function openSidebar() {
    var htmlOutput = HtmlService.createHtmlOutputFromFile('page').setTitle('Dashboard');

SpreadsheetApp.getUi().showSidebar(htmlOutput); }

page.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <?!= include('stylesheet'); ?>
</head>

<body>
  <h1>Welcome</h1>
  <p>Please enjoy this helpful script.</p>
  <?!= include('javascript'); ?>
</body>

</html>

stylesheet.html

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

javascript.html

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

When I click on run with the "opOpen" option it's run success full, but in the out there is nothing any effect. Its show include line.

Can anyone teel me where I have done mistake.

Answer 1

I'll write the answer here, since it will be better readable.

Your openDialog function should look like this

function openDialog() {
    var html = HtmlService.createTemplateFromFile('page').evaluate();
    SpreadsheetApp.getUi().showModalDialog(html, 'Dialog title');
}

you also don't need doGet for modal dialog or sidebar!

How to include CSS and javascript file in Google Script App

Question

1 answers

solution1
2 2022-11-30 11:56:04

How to include CSS and javascript file in Google Script App

Question

1 answers

solution1 2 2022-11-30 11:56:04

solution1
2 2022-11-30 11:56:04