Now that know how to create a basic template, you will now learn how to create a cleaner and more complex template using style, script and how to put a header on your Awesome Table view.
* Example only, bad practice in Awesome Table *
<div style='float:left;padding-right:7px' onclick="myFunction()">
<p> Hi </p>
/* Do some stuff */
To bypass the inline-coding restriction, we've added the capability to use the prescribed template structure using 3 distinct headers - allowing complete separation between your data and the HTML layout that displays the data - a solution both logical and practical (using a template will look much cleaner and your data will be easy to manage)! It also greatly reduces the loading time of the Awesome Table, by separately loading the data and the layout.
In the template sheet, you can now use three static headers: <style>, <script> and an empty one.
1 - <style>
The content of this template is pure CSS. It is inserted in the Awesome Table <Head> element, inside the <style> element.
Insert here the 'static' CSS rules related to your data display.
This way, you can use this to test your CSS quickly without uploading any files in Google Sites. It's not recommended to put all your CSS in the <style> template for the simple reason that it is not loaded before the spreadsheet answers the query (as this will take some time).
Recommended practice: Cut your CSS in 2 parts:
- Filters and global Awesome Table styling goes in the CustomCSS file, then upload it to Google Site
- Data-related static CSS goes in the <style> template
This will allow you to make two separate CSS: one CSS file specifically for the Awesome Table theme (color for the background, slider, filters, ...) and another CSS for HTML and data-specific modifications.
2 - <script>
3 - empty header
The content of this template is HTML. It is inserted as the first child of the Awesome Table Body element (above the filters). Insert whatever elements you want to appear in this section (e.g. header, logo, title, ...). You can also reference or link external CSS file(s) in this cell.
warning CSS files must not be hosted in Google Drive as it will not be loaded inside the Awesome Table view. Google Drive is not meant to store content for web pages (including text files for CSS).
You can upload your CSS file to free hosting sites (e.g. weebly