HOME‎ > ‎Announcements‎ > ‎

Awesome Table + Templates = more awesomeness

posted Oct 26, 2014, 2:34 AM by Romain Vialard   [ updated Apr 6, 2016, 4:42 AM by Stéphanie Chhay ]
Awesome Table lets you easily display data from a Google Sheet in many different ways. You can even put some HTML tags in your spreadsheet cells to create beautiful views of those data and display a nice People Directory, Job BoardTraining Offering or whatever list you need to display on a site.

UCPA, a non-profit French organization that makes outdoor sports holidays, is using Awesome Table to display its training offering.

Introducing Templates

Before today though, to display an HTML content for each row of your Sheet, you needed to write formulas or use some Google Apps Script code to populate columns of your Sheet with HTML.


People often use Arrayformula to create an HTML view of the data for each row in a Sheet

When I showed that to my new intern, Jean-Rémi Delteil, he was not impressed. Instead of simply keeping plain data in your Sheet (like a true database), you needed to fill some cells with lots of HTML, making it more complex to maintain (use of formulas or Script) and inefficient because all this HTML made the size of the Sheet bigger and slower to load through Awesome Table.

Jean-Rémi was totally right and thanks to his work, starting today, you can use Templates in Awesome Table. Templates are a better way to display beautiful content through Awesome Table, by keeping your data and your HTML template separated.

Example

On the home page of the Awesome Table documentation, I display a list of Apartments for Rent. Here's the Sheet behind this Awesome Table view. In this Sheet, I have 2 tabs. 

One with the plain data for each apartment listed (including URLs of images) - I could even use a Google Form to fill this tab:

And another with the HTML template to use for each row (note in  this HTML template the markers ${"Column Name"} that will be automatically replaced by the proper content from each row).

Then in the Awesome Table parameters, the new Templates Range setting let me indicate the location of my template (tab name + range).

And that's all! When a user open my page, Awesome Table fetches both plain data and Template, mixes them together and display a nice output!

Start taking advantage of this new way to create nice listings in Google Sites and don't hesitate to share with us the results! We will be happy to feature them in our examples page.