I'm facing a challenge in adding a CSS file to an HTML form within an Apps Script without deploying the project as a Web App. I have been trying to use the include function to apply the CSS style, but I always end up with the script appearing above my form. It seems like the include might not be placed correctly, but I am unsure of where it should go. My HTML page is named Formulaire.html, the CSS file is css.html, and the Google Apps Script file is onOpen.gs.
Below is the code snippet from onOpen.gs:
function onOpen() {
SpreadsheetApp.getUi()
.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>If you have any suggestions on how to resolve these issues, I would greatly appreciate it. Thank you!