How to use Script allows HTMLOutput in Google Apps Script
I am loading a modal dialog:
var html = HtmlService.createHtmlOutputFromFile('File')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(1000)
.setHeight(700);
SpreadsheetApp.getUi()
.showModalDialog(html, 'My Page');
Now, in File.HTML, I want to load another HTML file with CSS settings, how do I do this?
I tried to include it as in HtmlTemplate
using scripts, but it doesn't work:
<?!= include('File'); ?>
EDIT:
I have defined the include function in the .gs code:
function include (file) {
return HtmlService.createTemplateFromFile(file).evaluate().getContent();
}
source to share
This is what you see:
The script does not run, but is interpreted as text.
This is what you want to see:
I got it working. This is how you need to change the code:
Code.gs
// Use this code for Google Docs, Forms, or new Sheets.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Dialog')
.addItem('Open', 'openDialog')
.addToUi();
}
function openDialog() {
var html = HtmlService.createTemplateFromFile('index')
.evaluate() // evaluate MUST come before setting the NATIVE mode
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
function include(File) {
return HtmlService.createHtmlOutputFromFile(File).getContent();
};
index.html
<?!= include('File'); ?>
Hello, world!
<input type="button" value="Close"
onclick="google.script.host.close()" />
file.html
<div>
This is a test. it worked!
</div>
Basically, you need to change:
var html = HtmlService.createHtmlOutputFromFile('index')
in
var html = HtmlService.createTemplateFromFile('index')
Create TEMPLATE from file.
And I also changed the code to this:
function openDialog() {
var html = HtmlService.createTemplateFromFile('index')
.evaluate() // evaluate MUST come before setting the NATIVE mode
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
Original answer:
include
is not something like keyword
or a built-in function. You need to create a function in a .gs
script file named include
.
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
Also, you cannot mix HTML service and UI service. I don't know what you are trying to do, but I thought I mentioned this.
What you want to accomplish is described in the documentation here:
source to share