You are on page 1of 10

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 URL 1.2.1 Fill the document with the data that will be displayed in the Awesome table 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 table 2.2.1 Fill first row with columns names that will be shown in the Awesome Table

2 The spreadsheet should like like this one 3 .3 Connect a Google Form to the gadget 6 .1 Display a list of Drive files 6.2 A list of flat for rent 6.Examples 6.Create a Google Spreadsheet with the source data 1.Create a new spreadsheet (Where the tracking information will be storage) 1.google.2 Paste SpreadSheet Key in the corresponding Box 4.3.5 Configure the Data Range 5 .3.3 People Directory Follow the instructions to use this gadget in your google Google Site: 1 .2 Open the Google Site Page where you want to add the awesome table 3.1 Fill the second row with the filters you want on the Awesome Table 2.Copy the following URL 3.2 Create a new Spreadsheet .1 Go to your Google Drive page https://drive.3 Click in Add gadget by URL 4 .Configure the Gadget 4.com/ 1.Configure the filters 2.Advance tips 5.3 .Add the gadget into your Google Site 3.1 HTML on Cells 5.1 .2.2 Querying specific rows of the spreadsheet 5.1 .1.4 Paste the Spreadsheet Name In the second box 4.1.

Give a proper name to the Spreadsheet and copy the complete URL 1.1.2.2.2 .1 Fill the document with the data that will be displayed in the Awesome table 1.2 Give a proper name to the Document and the Sheet .

2 .1 Fill first row with columns names that will be shown in the Awesome Table 2.2.3 .Add two empty rows at the beginning of the document: 2.1 Fill the second row with the filters you want on the Awesome Table The possible values are:    StringFilter NumberRangeFilter CategoryFilter .Configure the spreadsheet data source 2.3.Configure the filters 2.Configure the Titles for the table 2.2 .1 .

Add the gadget into your Google Site 3.gl/ZmMP7 .2 The spreadsheet should like like this one 3 .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.1 .Copy the following URL http://goo.

3 Click in Add gadget by URL .3.2 Open the Google Site Page where you want to add the awesome table 3.

How to configure the Gadget! 4.1 Go to the SpreadSheet Created in the Step 1 and copy the SpreadSheet Key .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.3.

Advance tips .5 Configure the Data Range Take a look to your Spreadsheet and see on which column ends the data.4 Paste the Spreadsheet Name In the second box 4.2 Paste SpreadSheet Key in the corresponding Box 4.3 Copy the Spreadsheet Name 4. 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 gadget 5 .TIP: You can find the SpreadSheet ID in the URL between the characters = and # 4.

Create your form.5. It means people won’t be able to see some information from the table even if the information is stored in your spreadsheet. 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.com/watch?v=7_YzhVn1Sy0 6.1 HTML on Cells One Important remark is that you can use HTML in the Cells to display more advance data like hyperlinks. https://sites.Examples 6. 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). it will display an image: <img src="http://trinityhotelsrlimbe. Bold fonts. in which you can enter your query: This lets you filter by text.google. For example.2 Querying specific rows of the spreadsheet It is possible to use the Google Visualization API Query Language to show only a specific subset of your data in the table.youtube. sum some information.2 A list of flat for rent .com/trinity/images/stories/appartments/appartment2.3 Connect a Google Form to the gadget You can easily use this gadget with a Google Form.. numbers. dates. or even images! For example.1 Display a list of Drive files http://www. if I have a column in my spreadsheet filled with document types. 5...jpg" width="300px"/> 5. if you put this HTML tag in a cell of your spreadsheet.com/site/scriptsexamples/available-web-apps/awesome-tables/using-aform 6 . there’s a specific field in the configuration area of the gadget.

3 People Directory .6.