Awesome Table: Style, Script & Global template allow a better use of Templates

Post date: May 26, 2015 9:53:38 PM

Since I introduced template to Awesome Table, its use has become more and more frequent, and the number of applications has increased considerably ! But we have quickly found limitations in the use of templates and to counter this, an extension of template was necessary : Dedicated <script>, <style> and global template headers. I will start by a reminder on how to use template, with some clarifications, then we will see the said <script>, <style> and global template header features.

Refresher on Template

Template allows complete separation between your data and the HTML layout that displays the data - a solution both logical and practical !

On one sheet you have the data :

And on the other the template :

The template consists of a group of two cells (for example A1:A2), that define together the Target column (first row) and the template to use (second row). Multiple groups can be used as in the example above. You must also tell Awesome Table on which sheet is stored your templates. The template range becomes then (for this example) : Template!A1:B2

Inside the template, you can specify which data to write by using tags in the form : {{NameOfYourColumn}} or ${"NameOfYourColumn"}

When Awesome Table loads, it will fetch the data, then the template, and combines the two to display your data and the chosen layout !

Note : Templates are parsed from right to left, which means that a parsed column can be reused in tags, and will contain the data previously built.

Introducing dedicated template

The use of templates as described above will not pose any problems. However when you want to achieve a more ambitious 'tweaking' level of Awesome Table, issues will arise.

First, Templates are duplicated in each row, which makes it very inefficient for CSS use : each rule exists for every row you have. The same problem stand for JavaScript code, you don't want your functions to be repeated 150 times per page.

For JavaScript, another limitation arises : functions can't be executed when inserted in the page, you have to call them with event handler inside the HTML :

* Example only, bad practice in Awesome Table *

To bypass these limitations, I've added the possibility to use the following special templates :

In the template sheet, you can now use 3 static headers :

• • <style>

• The content of this template is pure CSS. It is inserted in the Awesome Table Head element, inside a <style> element.

• Insert here the 'static' CSS rules related to your data display

  • <script>

• The content of this template is pure JavaScript. It is inserted in the Awesome Table Head element, inside a <script> element.

• Insert it here your JavaScript functions.

  • "empty header"

• The content of this template is HTML. It is inserted as the first child of the Awesome Table Body element.

• Insert here whatever you want ! This might not be really useful, but it's here anyway...

Note : As these special templates does not depend on the data, they will be inserted only once at the beginning of the Awesome Table code. Direct consequence of this is that tags can not be used inside these template (So this isn't "technically" even a templates !)

One use of this new feature is to test your CSS quickly, without uploading any files in Google Site. I also recommend to not put all your CSS in the <style> special template for the simple reason that it is not loaded before the spreadsheet answers the query (and that is not quick !).

Recommended practice : cut your CSS in 2 parts :

• • Filters and global Awesome Table styling : goes in the CustomCSS file, then upload it in Google Site

  • Data related static CSS : goes in special <style> template

This will allow you to make one CSS file to theme all your Awesome Tables for one web site color theme and to make specific adjustments for data on each spreadsheet !

"Ambitious tweaking level" ? Master

Some nice uses of template by users and us :

• • by +Baptiste Quin :

• • by +Camille Lapeyronie

If you liked this functionality and/or made another Awesome view I will be happy to add items to this list ! Come and share your use on Awesome Table Google+ Community !