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.

try including them both after </body> and add .setSandboxMode(HtmlService.SandboxMode.IFRAME) to your include function — Ricardas
– Ricardas, Commented Nov 30, 2022 at 11:44
Now they are displaying like this: Welcome Please enjoy this helpful script. <?!= include('stylesheet'); ?> <?!= include('javascript'); ?> — Shiv Yadav
– Shiv Yadav, Commented Nov 30, 2022 at 11:46
function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent() } I have added this function, but still the css not applied — Shiv Yadav
– Shiv Yadav, Commented Nov 30, 2022 at 11:49
I have added the code whatever you have provided but still it not applied css. — Shiv Yadav
– Shiv Yadav, Commented Nov 30, 2022 at 11:53

Ricardas · Accepted Answer · 2022-11-30 11:56:04Z

2

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!

answered Nov 30, 2022 at 11:56

Ricardas

2161 silver badge5 bronze badges

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

3 Comments

Shiv Yadav Over a year ago

Thanks a lot sit, it's working fine with dialog.

Shiv Yadav Over a year ago

Can you please tell me how to apply CSS for sidebar? For your reference I have modified my question. I have changed the name of openDoalog to openSidebar and its content also.

Ricardas Over a year ago

It's exactly the same you use showSidebar method instead of showModalDialog

Collectives™ on Stack Overflow

How to include CSS and javascript file in Google Script App

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related