I'm trying to add a CSS file inside an HTML form on the Apps script. However, I don't to deploy the project as a Web App. I'm trying to use the function include to apply the CSS style, but I have always the piece of script above my form. Maybe it's because of the include which is not at the right spot but I don't know where to use it. My HTML page is Formulaire.html, the CSS is css.html and the Gs code file is onOpen.gs
Here the onOpen.gs code :
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('Formulaire')
.addItem('Compléter', 'openForm')
.addToUi();
}
function openForm() {
var html = HtmlService.createHtmlOutputFromFile('Formulaire')
.setWidth(1500)
.setHeight(1000);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Saisissez les informations nécessaires');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
body {
font-family: Arial, sans-serif;
background-color: #1a237e;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<base />
<?!= include('css'); ?>
</head>
<body>
<!-- MEANS -->
<div class="category">
<label for="inputMeans" class="ds-formcontrol-label">Means</label>
<div style="width:100%;">
<ul class="display-list" id="displayMeans"></ul>
<input type="text" class="ds-input" id="inputMeans" list="datalistMeans" placeholder="Select here">
<datalist id="datalistMeans"></datalist>
</div>
</div>
</body>
</html>
How can I solve these? Thanks!
try this:
function openForm() {
var html = HtmlService.createTemplateFromFile('Formulaire').evaluate()
.setWidth(1500)
.setHeight(1000);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Saisissez les informations nécessaires');
}