Awesome Table - Documentation

The "Awesome Tables" gadget can be used to create a table from a spreadsheet and add interactive controls to manipulate the data it displays.

Example: Using the Awesome Table gadget to display a list of files

1 - Create a Google Spreadsheet with the source data

1.1 - Create a new spreadsheet (Where the tracking information will be storage)1.1.1 Go to your Google Drive page https://drive.google.com/1.1.2 Create a new Spreadsheet

1.2 - Give a proper name to the Spreadsheet and copy the complete URL1.2.1 Fill the document with the data that will be displayed in the Awesome table

2 - Configure the spreadsheet data source2.1 - Add two empty rows at the beginning of the document:2.2 - Configure the Titles for the table

2.2.1 Fill first row with columns names that will be shown in the Awesome Table

2.3 - Configure the filters2.3.1 Fill the second row with the filters you want on the Awesome Table2.3.2 The spreadsheet should like like this one

3 - Add the gadget into your Google Site3.1 - Copy the following URL3.2 Open the Google Site Page where you want to add the awesome table3.3 Click in Add gadget by URL

4 - Configure the Gadget4.2 Paste SpreadSheet Key in the corresponding Box4.4 Paste the Spreadsheet Name In the second box4.5 Configure the Data Range

5 - Advance tips5.1 HTML on Cells5.2 Querying specific rows of the spreadsheet5.3 Connect a Google Form to the gadget

6 - Examples6.1 Display a list of Drive files6.2 A list of flat for rent6.3 People Directory

Follow the instructions to use this gadget in your google Google Site:

1 - Create a Google Spreadsheet with the source data1.1 - Create a new spreadsheet (Where the tracking information will be storage)1.1.1 Go to your Google Drive page https://drive.google.com/1.1.2 Create a new Spreadsheet

1.2 - Give a proper name to the Spreadsheet and copy the complete URL1.2.1 Fill the document with the data that will be displayed in the Awesome table

1.2.2 Give a proper name to the Document and the Sheet

2 - Configure the spreadsheet data source

2.1 - Add two empty rows at the beginning of the document:

2.2 - Configure the Titles for the table2.2.1 Fill first row with columns names that will be shown in the Awesome Table

2.3 - Configure the filters2.3.1 Fill the second row with the filters you want on the Awesome Table

The possible values are:

StringFilter NumberRangeFilter CategoryFilter

StringFilter can be used  to filter columns that contains free text

NumberRangeFilter can be used  to filter columns that contains numbers

CategoryFilter can be used  to filter columns that contains a list of values

2.3.2 The spreadsheet should like like this one

3 - Add the gadget into your Google Site3.1 - Copy the following URLhttp://goo.gl/ZmMP7

3.2 Open the Google Site Page where you want to add the awesome table

3.3 Click in Add gadget by URL

3.4 Past the url in the box and click in Add

Congratulations! Now you have the Awesome Table gadget on your Google Site Page

4 - Configure the Gadget

Now it remains the Last step, How to configure the Gadget!

4.1 Go to the SpreadSheet Created in the Step 1 and copy the SpreadSheet Key

TIP: You can find the SpreadSheet ID in the URL between the characters = and #

4.2 Paste SpreadSheet Key in the corresponding Box

4.3 Copy the Spreadsheet Name

4.4 Paste the Spreadsheet Name In the second box

4.5 Configure the Data Range

Take a look to your Spreadsheet and see on which column ends the data. In case last column is D you should use A1:D in case that last column with data is F use A1:F

4.6 Configure the Width Height and save the gadget5 - Advance tips

5.1 HTML on Cells

One Important remark is that you can use HTML in the Cells to display more advance data like hyperlinks, Bold fonts, or even images!

For example, if you put this HTML tag in a cell of your spreadsheet, it will display an image:<img src="http://trinityhotelsrlimbe.com/trinity/images/stories/appartments/appartment2.jpg" width="300px"/>

5.2 Querying specific rows of the spreadsheetIt is possible to use the Google Visualization API Query Language to show only a specific subset of your data in the table. It means people won’t be able to see some information from the table even if the information is stored in your spreadsheet.

For example, if I have a column in my spreadsheet filled with document types, I can filter on a specific type (like pdf) and thus only pdf files will be visible through the Awesome Table gadget:select * where D = 'pdf'

To do that, there’s a specific field in the configuration area of the gadget, in which you can enter your query:

This lets you filter by text, dates, numbers, sum some information,...

5.3 Connect a Google Form to the gadgetYou can easily use this gadget with a Google Form. Create your form, post some responses and add a new row in the spreadsheet between the headers and the first response (to indicate which filters you want to use).https://sites.google.com/site/scriptsexamples/available-web-apps/awesome-tables/using-a-form

6 - Examples6.1 Display a list of Drive files

http://www.youtube.com/watch?v=7_YzhVn1Sy0

6.2 A list of flat for rent

6.3 People Directory