Saturday, March 22, 2014

Creating a Google Form Powered File Sharing Site in Two Ways: Nose to Tail


This blog post has been sticking in my head over the last day and I decided to rewrite sections. The whole system that was used to create the Scarsdale Teacher Share is complex, and while it works for us, it isn’t for everyone. There is a lot to be said for simplicity and I’d like to include a less complex alternative that accomplishes a lot of the same stuff.  In the revised post below, I’ll explain the easier method first and then continue to the more complex version. The whole thing is pretty long - but I hope it's useful.

A couple of weeks ago I had the honor of presenting at the NY/NJ Google Summit.  Lisa Thuman does an amazing job putting the event together and I’m always impressed at the caliber of presenters and participants.  This year I presented on the Google script powered teacher sharing site that I’ve blogged about before. I promised the good folks in my session (thank you all for coming!) that I would write something to outline the system; this is that post. I meant to get it out sooner, but in the immortal words of John Lennon, “Life is what happens to you while you're busy making other plans.”

        This process allows a district to create a Google Form powered Google Site. A teacher can submit a file to share, organize it with self selected or generated tags. The simpler method uses a special gadget to interface with the form submissions and the shared resources.  The more complex example creates Google Site pages created automatically using the information given by the form.  For the complex example, I created a set of simple demo files that you can use here. The files that run the Scarsdale site are more complicated, but all of the basic functionality can be found in these demo files.

      With either method you must create a spreadsheet using the old sheets and build a form. Decide whether the system will work with a domain or be public.  For our district sharing site, the form is limited to the domain. Your spreadsheet needs to collect at least six things:

  1. Name of the contributor (Text question or automatic in a domain-only form)
  2. Email of the contributor (Text question or automatic in a domain-only form)
  3. Name of the resource (Text question)
  4. A description of the resource being shared (Paragraph text question)
  5. A field for tags (Text question with an “other” option)
  6. The URL of the drive resource that is being shared (Paragraph text question)

Once your form is in place, return to your spreadsheet and install the New Visions Form Folio Script. You will have to determine whether you are collecting usernames at this stage. You will also need to determine whether shared resources are copied and how they will be organized by formFolio.  The demo example uses the “Keyword” column to organize resources. A folder is then created for each keyword.  Scarsdale collects usernames in our domain-only share.  These usernames become our method for organization. We also copy the shared resources so that resources are stable despite faculty changes.

After you install formFolio, add the following sheets to the document:
  • formRanger List
  • csv horz array
  • HTML
  • buildPages (not needed in the simple method)
  • createPages (not needed in the simple method)
  • Awesome Tables (optional in the complex method, but you’d be crazy not to)

The “formRanger List” and “csv horz array” use the dynamic tagging system I described in a previous post.

The Simple Method: formFolio & Awesome Tables

The basic components for a teacher share are in place once you have your form and have installed formFolio.  Next, let’s create the interface for the shared resources using the Awesome Tables gadget.  Create a query on A3 of the Awesome Tables sheet. Use the query to grab the form submission data that you want to use in your interface. In the example below, I query the “createPages” sheet because the example showcases the complex method.

=QUERY (createPages!B2:J, "SELECT D, E, F, G, H, J", 0)

Then, use the first row to title the columns. These titles will be used in the interface. The second row corresponds to how the columns can be filtered by the end user.  Use the “Awesome Table” documentation to set this up. The spreadsheet has to be public in order for Awesome Tables to work.  If you don’t want to make your whole spreadsheet public, use two additional Google sheets, along with the New Visions script pushData to move the Awesome Tables page to a public sheet.
The final step in the simple version is to add the awesome table gadget to a Google Site page.  This is also explained in the “Awesome Table” documentation.  You can get creative with how the filters behave in the awesome tables sheet and a lot an depend on the data you’ve collected in the submission form.

The Complex  Method: formFolio & Google Site Page Creation

Let’s return to the complex method if you’re up for it. We need to look first at the “csv horz array” page. In the sharing site example, you’ll notice two differences from the dynamic tagging system I described in a previous post. Column A on the “csv horz array” page is named “Key.” This column combines the submission date and username to create a unique value to use on other sheets for vertical lookup formulas. Column B is named “HTML” and uses an if/then array formula to check whether tags have been assigned to a new resource.  If a tag cell is blank (column F and beyond) the formula uses canned HTML from the “HTML” page. If the tag cell contains a keyword, it is made into an HTML link that searches the site for that keyword, also using the “HTML” page as a reference form the code.

= ARRAYFORMULA ( IF ( F2:F2 = "" , HTML!A10 ,HTML!A7 & F2:F & HTML!A8 & F2:F  & HTML!A10 & (IF ( G2:G = "" , "" , HTML!B7 & G2:G & HTML!A8 & G2:G  & HTML!A10 ) & ( IF ( H2:H = "" , "" , HTML!B7 & H2:H & HTML!A8 & H2:H  & HTML!A10) & ( IF ( I2:I = "" , "" , HTML!B7 & I2:I & HTML!A8 & I2:I  & HTML!A10) & ( IF ( J2:J = "" , "" , HTML!B7 & J2:J & HTML!A8 & J2:J  & HTML!A10 ) ) ) ) ) ) )

This if/then strategy, combined with the HTML page, can be used creatively to build variety into your google site page based on user submissions.  Remember to install formRanger in order to connect the script as described earlier to make your form dynamic.

Next we turn to the “buildPages” sheet. The first column is another "Key" column. Just as on the “csv horz array” page, the “Key” column combines the timestamp and username field.

In cell B2 we use a simple arrayformula to copy over the form responses and formFolio columns without including the headers.  

=ARRAYFORMULA ( 'Form Responses 1'!A2:K )

The column headers are manually named in the first row to keep them friendly for the createPage script that we will discuss in a bit - form response headers have a habit of being a bit long. In column M we will add use a "LEN" function to count the Drive ID column that is created by the formFOlio script.  This returns a number when a resource is added to our share folder.

Column N uses an arrayFormula with a VLOOKUP that references the “Key” column. For a simpler method, you can install the copyDown script and forgo the arrayformula altogether.

=ArrayFormula ( IFERROR ( VLOOKUP( A2:A ;'csv horz array'!A$2:B  ; {2} * SIGN ( ROW ( B2:B ) ) ; FALSE ) ) )

Now lets move to the createPages sheet. The first two columns on the "createPages" sheet need to be "ID" and "Product Page." These will be used by the createPages script later on. Cell C1 will use a Query formula to pull the data from the buildPages sheet. Using this query we can reorder the columns and specify a query condition. We will use the LEN column that we added to the buildPages sheet to validate the query.

=QUERY (buildPages!A1:N, "SELECT A, B, C, H, E, J, N where M > 1", 1)

Now you can create the HTML for your Google Site page template. Take a look at the HMTL sheet. You will notice that I divided the HTML with yellow cells.  These cells correspond to the variables that are fed from the Google form.

Finally, we need to add the createPages script.  This essentially uses a script from the book “Google Script: Enterprise Application Essentials” The book is dated now, but you can still pull good ideas from the text.  If you investigate the Script Editor on the demo sheet, you will see that the script builds HTML pages on the Google Site using my code. Whenever a variable is called, the script references the columns of the createPages sheet.

This completes the more complex custom Google Site file repository, powered by a Google form.  To round out your site, you could create an interface with Romain Vialard’s aptly named “Awesome Tables” gadget, or simply set your navigation to auto generate.  A big thanks to New Visions for Public Schools for their amazing script library.