Google Docs Listing in Google Sites

// Version 0.02. Fixed duplicate collection bug
function doGet(e) {
  // Create the various UI Panels
  var app   = UiApp.createApplication();
  var spnl  = app.createScrollPanel();
  var vpnl  = app.createVerticalPanel();
  var hpnl  = app.createHorizontalPanel();
  var bcpnl = app.createHorizontalPanel();
  var gd    = app.createGrid();
  var bc    = app.createLabel('root');
 
  // Apply styles to the breadcrumb
  bc.setStyleAttribute("font-weight","bold");
  bc.setStyleAttribute("margin","5px");
 
  // Set IDs so we can reference items in Button Clicks
  gd.setId('colGrid');
  bc.setId('breadcrumb');
 
  // Use the full gadget width
  spnl.setSize('100%','200px');
  vpnl.setWidth('100%');
 
  // Get Folder
  var root= DocsList.getFolder(e.parameter['col']);
  var rootId = root.getId();
 
  // Create the buttons
  var btnHandler = app.createServerClickHandler('doClick');
  var topBtn = app.createButton("Top",btnHandler);
  topBtn.setId("top|" + e.parameter['col'] + "|" + rootId);
  hpnl.add(topBtn);
 
  var upBtn = app.createButton("Up One",btnHandler);
  upBtn.setId("up");
  upBtn.setEnabled(false);
  hpnl.add(upBtn);
 
  // Build the UI components together
  bcpnl.add(bc);
  app.add(bcpnl);
  app.add(hpnl);
  vpnl.add(gd);  
  spnl.add(vpnl);
  app.add(spnl);
 
  // initiialise the breadcrumb
  ScriptProperties.setProperty('parent',"root");
  ScriptProperties.setProperty('current',rootId);
  showBreadcrumb(bc);
 
  // Populate the grid
  gridDocs(rootId,app,gd);
 
  return app;
}
 
// Click Handler Function
function doClick(e){
  // Connect to the app
  var app = UiApp.getActiveApplication();
 
  // Work out which button has been clicked
  var loc = e.parameter['source'].split("|");
 
  // Work out the folder location from the button & enable/disable buttons as required
  if (loc[0] == "up") {
    var folder = bcPop();
    if (ScriptProperties.getProperty('parent') == "root")
      app.getElementById('up').setEnabled(false);
  }
  else {
    var folder = loc[2];
    if (loc[0] == 'top') {
      ScriptProperties.setProperty('parent','root');
      app.getElementById('up').setEnabled(false);}
    else {
      bcPush(loc[1]);
      app.getElementById('up').setEnabled(true);}
  }
 
  ScriptProperties.setProperty('current', folder);
 
  // Build the folder list and breadcrumb
  gridDocs(folder, app, app.getElementById("colGrid"));
  showBreadcrumb(app.getElementById('breadcrumb'));
  return app;
}
 
// Push an item to the end of the breadcrumb
function bcPush(item) {
  ScriptProperties.setProperty('parent',ScriptProperties.getProperty('parent') + "|" + item);
}
 
// Pop an item off the end of the breadcrumb
function bcPop() {
  var bcArr = ScriptProperties.getProperty('parent').split("|");
  var item = bcArr.pop("|");
  ScriptProperties.setProperty('parent', bcArr.join("|"));
  return item;
}
 
// Function to display the breadcrumb (path to current location)
function showBreadcrumb(bc) {
  // Construct the breadcrumb string
  var s="";
  var bcArr = ScriptProperties.getProperty('parent').split("|");
  for (var i in bcArr) {
    if (bcArr[i] == 'root') s = "Start";
    else s = s + " > " + DocsList.getFolderById(bcArr[i]).getName();
  }
 
  s = s + " > " + DocsList.getFolderById(ScriptProperties.getProperty('current')).getName();
 
  // display the breadcrumb string
  bc.setText(s);
}
 
// Function to populate the file grid
function gridDocs (f, app,gd)
{
  // Grab the top level collection plus lists of all collections and docs in it
  var root= DocsList.getFolderById(f);
  var colList = root.getFolders();
  var docs = root.getFiles();
 
  var ch = app.createServerClickHandler('doClick');
 
  // Size the grid to contain the data
  gd.resize(colList.length + docs.length, 3);
  gd.setWidth('100%');
 
  var row=0;
 
  // Build collection List
  for (i in colList) {
    addLine (colList[i].getName(),colList[i].getId(), "collection",
             colList[i].getUrl(), row, gd, app, f, ch);
    row++;
  }
 
  // build file list
  for (i in docs) {
    addLine (docs[i].getName(), docs[i].getId(), docs[i].getType(),
             docs[i].getUrl(), row, gd, app, f, ch);
    row++;
    }
}
 
// Function to add & style a line in the file grid
function addLine (fName, fId, fType, fURL, row, gd, app, folder, ch) {
  // Create labels for file and type
  var lbl = app.createLabel(fName);
  var typ = app.createLabel(fType);
 
  // Build the open/view links
  if (fType=="collection") {
    var url = app.createLabel("Open");
 
    // Style the link
    url.addClickHandler(ch);
    url.setStyleAttribute("font-weight","bold");
    url.setStyleAttribute("text-decoration","underline");
    // Can't currently set the cursor to change on hover on the link!?
    //url.setStyleAttribute("cursor","pointer");
    url.setId("open|" + folder + "|" + fId);
  }
  else var url = app.createAnchor("View",fURL);
 
  // Move the labels & links into the grid
  gd.setWidget(row,0,lbl);
  gd.setWidget(row,1,typ);
  gd.setWidget(row,2,url);
 
  // Stlye alternate rows
  if (row%2==0) {
    lbl.setStyleAttribute("background-color", "#eeeeff");
    url.setStyleAttribute("background-color", "#eeeeff");
    typ.setStyleAttribute("background-color", "#eeeeff");}
}