google apps script - Stylesheet for .html document not imported -

i have form created in html (called form.html) written in google apps script , have stylesheet (css) go that. working when have css in same html-file form. if want put stylesheet in separate html-file (called stylesheet.html) , include in form.html using scriplet

<?!= htmlservice.createhtmloutputfromfile('stylesheet').getcontent(); ?> 

or creating 'include' function:

function include(filename) {    return htmlservice.createhtmloutputfromfile(filename)   .setsandboxmode(htmlservice.sandboxmode.iframe)   .getcontent();   } 

and in form.html

<?!= include(stylesheet) ?> 

..it doesn't seem work. what's worse scriplet shows on form. maybe there basic overlooking, can't wrap head around this. ideas ?

here code far...

function doget() {    return htmlservice.createhtmloutputfromfile('formulier')        .setsandboxmode(htmlservice.sandboxmode.iframe);  }    function include(filename) {    return htmlservice.createhtmloutputfromfile(filename)        .setsandboxmode(htmlservice.sandboxmode.iframe)        .getcontent();  }    function materiaallijst(afdnum) {   return spreadsheetapp.openbyid('1l6mkg61ghmfszrog04w4kchpb7ozbu9vkp42fpxmldc')          .getsheetbyname('reservatie')          .getdatarange()          .getvalues()          .map(function (v) {              return v[number(afdnum) - 1]          })          .splice(1);   }      //work in progress  function processform(form) {      logger (form); //array containing form elements  }

<style>    form {      /* center form on page */      margin: 0 auto;      width: 400px;      /* see outline of form */      padding: 1em;      border: 1px solid #ccc;      border-radius: 1em;  }      form div + div {      margin-top: 1em;  }  label {      /* make sure labels have same size , aligned */      display: inline-block;      width: 90px;      text-align: right;  }    input, textarea {      /* make sure text fields have same font settings         default, textareas have monospace font */      font: 1em sans-serif;        /* give same size text field */      width: 300px;      -moz-box-sizing: border-box;      box-sizing: border-box;        /* harmonize & feel of text field border */      border: 1px solid #999;  }    input:focus, textarea:focus {      /* give little highlight on active elements */      border-color: #000;  }    textarea {      /* align multiline text fields labels */      vertical-align: top;        /* give enough room type text */      height: 5em;        /* allow users resize textarea vertically         not work on every browsers */      resize: vertical;  }    </style>

<?!= htmlservice.createhtmloutputfromfile('stylesheet').getcontent(); ?>      <form id="myform">      <!-- text input field -->      <div>          <label for="name">naam:</label>          <input type="text" id="name" placeholder="voornaam + naam" required>      </div>      <div>          <label for="mail">e-mail:</label>          <input type="email" id="mail" required>      </div>      <div>          <label for="afdeling">afdeling:</label>          <input type="radio" id="1" name="afd" value="oostende">oostende          <input type="radio" id="2" name="afd" value="brugge">brugge          <input type="radio" id="3" name="afd" value="westhoek">westhoek      </div>      <div>          <label for="datepicker">datum:</label>          <input type="date" id="resdatum" required>      </div>      <div>          <label for="timepicker">uur:</label>          <input type="time" id="restijd" required>      </div>      <div>          <label for="frequentie">frequentie:</label>          <input type="radio" name="freq" value="éénmalig" required>éénmalig          <input type="radio" name="freq" value="meermaals">voor meerdere weken      </div>      <div>          <label for="materiaal">materiaal:</label>          <select id="materiaal" name="materiaalselectie" required>              <option value="notsel">kies..</option>          </select>      </div>      <div>          <!-- submit button. calls server side function uploadfiles() on click -->          <input type="submit" id="verzenden" name="verzenden" class="verzenden" value="reservatie verzenden" >      </div>            <div id="output"></div>    </form>     <div id="output"></div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    <script>              $("input:radio[name=afd]").click(function() {          go(this.id);      });        function go(idafd) {          google.script.run.withsuccesshandler(showlist).materiaallijst(idafd);      }        function showlist(things) {          var list = $('#materiaal');          list.empty();          (var = 0; < things.length; i++) {              list.append('<option value="' + things[i] + '">' + things[i] + '</option>');          }      }     //below work in progress...        $('#myform').submit(function(e) {      e.preventdefault();      var arr =[];            //var fields = $( ":input" ).serializearray();      $.each( $( ":input" ).serializearray(), function( i, field ) {        arr.push( field.value);      });      var json = json.stringify($('#myform').serializearray());      google.script.run.processform(arr);      alert(arr);      })          </script>

the result css in form.html

and here css in separate .html file , included in form.html

<?!= htmlservice.createhtmloutputfromfile('stylesheet').getcontent(); ?> 

you're doing right:

your css file must html file, type supported htmlservice. if @ starter scripts, you'll find have stylesheet.html, content:

<!-- css package applies google styling; should included. --> <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> <style> ... </style> 

you know google css working if sidebar or dialog looks pretty google stuff - same font, same text size. have action button blue, need add appropriate class it, class="action".

why isn't yours working? ^{_{get ready face-palm moment...}}

you're using scriptlets, part of html service templated html. require interpretation, not done htmlservice.createhtmloutputfromfile(). (that's why see scriptlet line literally.)

instead, need read file containing scriptlets template, , .evaluate() it.

function doget() {   return htmlservice.createtemplatefromfile('form')       .evaluate()       .setsandboxmode(htmlservice.sandboxmode.iframe); } 

to display google-themed action button, include apps script css , add "action" class:

<input type="submit" id="verzenden" name="verzenden" class="action verzenden" value="reservatie verzenden" >