How my #googlesite just got more awesome: Awesome Tables tutorial

A few months ago, I discovered Awesome Tables, an add-on/gadget for Google Sites and I was immediately obsessed. However, after initially trying to tinker with it, I realized I needed some guidance on how to customize it.

Last week, I helped organize GooCamp, an event our our GEG CENTX members. And, +Christopher Evans showed up, prepared to teach Awesome Tables. After 45 minutes and multiple questions and idea swaps later, I was ready to start! This time, I started immediately that night and finished a 110 app/extension directory by the next day. I say this only to show that it is not a time-consuming process. And, it's important - like anything - to "tinker" with it right after you learn about it. If not, you will lose it.

So, are you ready for the tutorial yet?!

Awesome Tables Tutorial (cards view) with text & video:

Before I begin, you need to review the Awesome Tables Website. Figure out which view/style you want. This tutorial is for the Cards View Awesome Tables. Once you know your style, you need to figure out your purpose. I settled on using the Cards View to display the over 100 apps and extensions I have in my current Let's Get Chromified presentation. This layout allows me to assign categories & focus. And, it allows for text searching as well. This is its best asset in my opinion. After you have found a style and a purpose you can begin.

• Go to the Awesome Tables Website. Click on Demos to see the various formats/styles available with this add-on. 
• Search through the various formats/styles and click on the one you want (remember: this tutorial is for the Cards View only). For this tutorial, click on Cards View.

• On the Cards View page, you will find four links: Live Demo, View Spreadsheet, View Awesome Table Settings, CEVA Apps Store. The Live Demo just shows you what it will look like on your Site. The only two links I used were the View Spreadsheet and the View Awesome Table Settings. 

• Click on the View Spreadsheet link. It will open up the Spreadsheet. Choose File --> Make a Copy. Then, give it a name that will indicate this is the data for your Awesome Tables. I called mine: Chrome Apps & Extensions Awesome Table. You can also close the original spreadsheet now.

• Now, it's time to look at your spreadsheet. You will see columns for:
• Title: This is where I entered the title of the App/Extension.
• Description: This is where I entered the information about the app/extension and/or my own review.
• IMG: I went to the Chrome Web Store and opened up the product. Then, I right-clicked on the product image and choose: copy URL. I pasted that URL here.
• Link: I went to the Chrome Web Store and opened up the product. I copied the URL in the address bar and pasted that URL here.
• Domain: I changed this heading name to Category. This is where I chose a category for the app/extension like screenshot, note-taking, Chrome management, etc.
• Vendor: I changed this heading name to App/Ext. I simply wrote App or Extension depending on its classification.
• Compatible Device: I changed this to Classroom Focus. For classroom specific apps/extensions, I wrote the subject it best fit. For others, I wrote: all subjects.
• View: I left this empty and alone.
• Text Search: I left this empty and alone.

Original view:

My view:

• If you look across the bottom of your spreadsheet, you will see that you have two tabs. You have been working on the Apps tab. You will also see that there is a Template tab. Click on it. 
• I left this part completely alone. However, this is what makes everything work. Note that if you tamper with this, be sure you take a screenshot of it before so, if anything does not work, you can put it back together again.
• Now, open up your Google Site. Go to the page where you want this to appear. 
• When you are on that page, click on your edit pencil button in the top right. 

• Then, go to the Toolbar and choose Insert -->More Gadgets.

• Do a search for "Awesome Table" and then, click on it to select it when it appears.

• Then, when the app view appears, click on the blue select box.

• Now, it's time to enter in your settings. If you recall the Awesome Tables Website, there was the blue link that said "View Awesome Table Settings." Return to that page to get the settings to duplicate into your Google Site. You will simply follow what they say. 
• You should have both your Google Site (the gadget preferences screen) and the Awesome Table Settings tabs open right now. The first screen to set up your gadget is on the "sheet" link. Again, follow their settings and paste them into the boxes. For the spreadsheet URL, you will need to return to your Google Sheet you made (make sure it is shared how you want it), copy the URL, and paste it in the box. Then, click on the check box next to public spreadsheet. The other items you can duplicate exactly as they have it. On your set up, you will notice the display area. You can leave the width at 100% and the height at 600. I changed my width to 80%. Whatever you do - do NOT use pixels for width. ONLY use PERCENTAGE! Here's a screenshot of my settings:

• From Sheet in your settings, click on View. Also, click on View on their Awesome Table Settings so you can duplicate their settings. Duplicate exactly as they have done. I changed the minimum pixel width to 100px because I am only working with 80% of my width. Here is a screenshot of my settings:

• From View in your settings, click on Format. Again, duplicate exactly as they have done. For this particular setting, I did not have to do anything. Just leave it alone unless you feel the need to get technical.
• From Format in your settings, click on Advanced Parameters. Again, duplicate exactly as they have done. The only thing you should have to do is enter the templates range. Be sure you copy & paste this from their settings. I did not and I kept getting errors because I had typed it wrong. Learn from me. Here is a screenshot of my settings:

• You are on the homestretch now. MAKE SURE YOU CLICK ON THE GREEN SAVE BUTTON IN THE TOP RIGHT. IF YOU DON'T, YOUR AWESOME TABLE WILL NOT BE SO AWESOME!!!!
• Just click the OK button. Then, click on the Save button on your Google Site. 
• You should now see your items appear in your Website. 

Some extra tips:

• I chose to finish entering all of my data in my spreadsheet before I set up the gadget on my Site.
• This was done on a personal site - not an Apps EDU domain site. It should work the same, but there is always the chance it won't. 
• Don't choose large images. 
• Don't enter a long description.
• Have fun! 

Video tutorial:

Here is a brief tutorial of how I complete this (only showing it for one App/Ext.