Search code examples
htmlcssgoogle-apps-script

Connect CSS with HTML in Apps Script with include


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!


Solution

  • try this:

    function openForm() {
    
      var html = HtmlService.createTemplateFromFile('Formulaire').evaluate()
        .setWidth(1500)
        .setHeight(1000);
        SpreadsheetApp.getUi()
        .showModalDialog(html, 'Saisissez les informations nécessaires');
    }