Google Sites‎ > ‎Sample Scripts‎ > ‎

Embed a Google Drive folder

Until very recently, there was no built-in mechanism to embed a Google Drive folder into a Google Site. It had to be done by using scripts. Recently, without any official announcement, the Google Sites team quietly slipped this functionality into the Sites editor. So now there are two ways to do it!

Using Sites Editor

Just open the Sites editor, Insert>Folder and select the checkbox next to the folder you want to appear. Modify the gadget properties box to meet your requirements, click Save and then Save your page and you're done.

E.g.

Shared Folder


Simple!

Using Scripts

How to do this is described here

with enhancements here

See also this great blog post by Steve Dito

function showFolderInSite() {
 var done = false;
 while(!done){
 // The while loop and try - catch statement are used to automatically retry if there's an issue during the execution (common issue: SitesApp: Internal error).
  try{
    var files = DocsList.getFolderById("PASTE_FOLDER_ID_HERE").getFiles();
     var page = SitesApp.getPageByUrl("PASTE_PAGE_URL_HERE");
     var listItems = page.getListItems();
     for(i in listItems){
       listItems[i].deleteListItem();
     }
     for(i in files){
     /*** Title field ***/
       var title = ""+ files[i].getName() +"";
     /*** Type field ***/
       var type = files[i].getType();
     // condition: if the type is "blob_item" replace it by the filename extension
       if(type == "blob_item"){
         type = files[i].getName().substring(files[i].getName().lastIndexOf('.'));
       }
     /*** Size field ***/
     // To indicate the size properly, we need multiple conditions:
     // - If size > 0, we show the size, else (if size = 0) it's a Google Docs file and we can hide this zero.
     // - Calculate the length of the number (28099 is five digits, 2158080 is seven digits):
     // If length < 7 digits then size is < 1mb. Indicate "kb" and remove the last digits (the bytes).
     // Else, indicate "mb" and remove the last digits (kilobytes and bytes).
       var size = files[i].getSize();
       if(size > 0){
         var length = size.toString().length;
         if(length < 7){
           size = size.toString().substring(0,length - 3) + "kb";
         }
         else{
           size = size.toString().substring(0,length - 6) + "mb";
       }
     }
     else{
        size = '';
     }
     /*** Owner field ***/
    // Take the email address and remove everything after the @.
      var owner = files[i].getOwner().toString().substring(0,files[i].getOwner().toString().indexOf('@'));
     /*** Last Updated field ***/
     // .formatDate() is a method from the Utilities Services
            var lastUpdated = Utilities.formatDate(files[i].getLastUpdated(), "GMT", "yyyy-MM-dd");
     /******/
      // Add data according to the order of columns in your list
      page.addListItem([title, type, size, owner, lastUpdated]);
     }
    done = true;
    }
     catch(e){
     }
 }
}

Addition:
If doing the pageList on above mentioned URL

the line:
var title = ""+ files[i].getName() +"";
Must be replaced with:
var title = "<a href=\""+files[i].getUrl()+"\">"+ files[i].getName() +"</a>";

It's in the source-code but the presenting makes the code to a link


and


If you want to add sub-folders I just added:
....getFiles();
var folders = DocsList.getFolderById("SAME_FOLDER_ID").getFolders();
var page = SitesApp.getP....

... AND....

...page.addListItem([title, type, size, owner, lastUpdated]);
     }
       /*** FOLDERS ***/
       for(j in folders){
     /*** Title field ***/
        var title2 = "<a href=\""+folders[j].getUrl()+"\">"+ folders[j].getName() +"</a>";

      // Add data according to the order of columns in your list
      page.addListItem([title2, "Folder", "", "", ""]);
     }
    done = true;
    }
     catch(e){...

This can be done prettier but it does the job :)
Comments