How to make a list of your G-Drive Files (w/links) using HTML/JS & G.A.S.

by +Cesar Anton 

@reicek

Google Apps Script (GAS) JSONP servlets are really handy to pass text data from Google Services to your new, super cool HTML5/CSS3/Javascript Web App, they are relatively easy to program (here you can read an article about how to make them) and it's a much faster to call one (or a few) servlets than getting a big package and parsing it all with Javascript (except maybe, if you know how to code using V8 Javascript Engine) but even then, Google Apps Script's APIs are much more complete and easier to implement.

Well, you have a few GAS JSONP servlets like the one described here, but they're no good without some Javascript/HTML to call them and do something useful with the information. This article focuses on parsing a JSONP from a GAS servlet (that has all of the users Google Drive files names & URLs) and make a list with all the names, and make each name a link to the page to edit them. This makes integrating Google Drive with your HTML Web Apps much easier.

First, you need a script tag whose "src" attribute is the public URL of your GAS JSONP servlet with (at least) one additional parameter called "padding" (hence the name JSONP) also knows as "prefix", it's possible to use either one but we'll be using "prefix" to be consistent with Google's Content Service Documentation. The prefix value it's the name of the Javascript function that we want to pass the received JSON, let's call our function getDriveFileList, the script tag would look like this:

<script type="text/javascript" src="https://<PublicURLofYourGASservlet>/exec?prefix=">
</script>getDriveFileList

Now we need a function called getDriveFileList and declare a variable to store the JSON, let's call it documentsList, another very important thing we need to parse most JSONs its to know how many objects it has, for this we use .lenght, our example servlet packs the files property's inside an object called list. For this, our function would look like this:


function getDriveFileList(documentsList){
   var number = documentsList.files.length;
}

Before we can parse a JSON object into HTML readable code, we need to analyse the output we want to create and break it in parts, fill them with the pieces of information inside the JSON and built it back to HTML readable code. This example creates a pure HTML output, but its possible to adapt it to your CSS3 for better presentation and functionality. 
Let's see the output we want for our list:

<div id="driveFileList" ><p><a href=<url[i]>> <name[i]></a></p></div>

Let's see the input we have from the JSON:

[{"files":[{"name":"<name[i]>","url":"<url[i]"}]}]

After observing it, we get the following elements:
The attribute name wich has the value namein the position [i] of the object files:

var name = documentsList.files[i].name;

The attribute url wich has the value url in the position [i] of the object files:
var url = documentsList.files[i].url;

The text with the name of the attribute name:
var nombre = document.createTextNode(name);


The HTML element a wich has the  url[i]  and the name[i] .
var link = document.createElement('a');

link.href = url;
link.appendChild(nombre);



The element p wich holds the list:
var list = document.createElement('p');
list.appendChild(link);

And finally, we need to put it all inside a global id attribute, let's call it driveFileList:
document.getElementById('driveFileList').appendChild(list);

And finally we have all we need for our function! Piece of cake... right? (Don't worry if you got kinda lost somewere, once you try it, you'll get the hang of it pretty fast!). Now, let's see how our new function looks:

<script type="text/javascript"> 

function getDriveFileList(documentsList){
   var number = documentsList.files.length;
   for (i=0; i<number; i++) {
      var name = documentsList.files[i].name;
      var url = documentsList.files[i].url;
      var nombre = document.createTextNode(name);
      var link = document.createElement('a');
      var list = document.createElement('p');
      link.href = url;
      link.appendChild(nombre);
      list.appendChild(link);
      document.getElementById('driveFileList').appendChild(list);
   }
}
</script>

To put the list in your page, just add:
<div id="driveFileList"></div>

You can try it using this example hosted on Google Drive to check out how it looks working. Remember that for it to work, first you need to authorize this JSONP GAS servlet.

Feel free to use this code or part of if for your Web Apps, and please comment when you get the chance about how it worked for you.

Happy coding.