Google Apps Script

Embedding Google DocList in a Google Site

Romain Vialard, Google Apps Script Top Contributor
Dan Lazin, Google Apps Script team
Originally published June 2011, updated December 2012

Goal

This tutorial shows how to embed a Google Drive folder in a Google Site using file cabinets or list pages. This tutorial also shows how to use the DocsList and Sites Services.

Time to Complete

Approximately 20 minutes

Prerequisites

Before you begin this tutorial, you should already have a Google Docs folder with some files in it and a Google Site with a file cabinet and a list page.

Overview

In this tutorial, we develop our script using the Script Editor in Sites. Further, we use a time-driven trigger to automatically trigger this script.

Section 1: Embedding folders in a File Cabinet

Linking Google Drive Folders with Sites File Cabinet

  1. From any page on your site, open the script editor: click More > Manage site, then click Apps Scripts in the left-hand sidebar, then click the Add new script button.
  2. Copy and paste the following code into the editor.
    function showFolderInSite() {
      var files = DocsList.getFolderById('PASTE_FOLDER_ID_HERE').getFiles();
      var page = SitesApp.getPageByUrl('PASTE_PAGE_URL_HERE');
      var attachments = page.getAttachments();
    
      for (i in attachments) {
        attachments[i].deleteAttachment();
      }
    
      for (i in files) {
         page.addWebAttachment(files[i].getName(), '', files[i].getUrl());
      }
    }
      
  3. In Google Drive, open the folder you want to display on your site and copy the folder ID from the browser's address field. The folder ID is everything after the #folders/ portion of the URL.
    For example, given the example URL
    https://drive.google.com/#folders/0B3xR7WfXrj7aOGY4Y2M3OWItZjAyYy00ZTM5LTg3MTgtNjNkYWZhZTZmYmU3 the folder ID is this section: 0B3xR7WfXrj7aOGY4Y2M3OWItZjAyYy00ZTM5LTg3MTgtNjNkYWZhZTZmYmU3. The following graphic shows the folder ID:


  4. In the script editor, paste the folder ID into the PASTE_FOLDER_ID_HERE section of the code you copied from above.

    Note: You might prefer to use a path instead of the folder ID to open your folder with Google Apps Script. If using the path, use the getFolder() method instead of getFolderByID(). This method takes a path that you construct from the folder hierarchy as seen in your Document List.
    To construct the path from your Document List hierarchy, add forward slashes between the folder names. For example, the path to folder "2013", a sub-folder of "Accounts", would look like this:
    var files = DocsList.getFolder("Accounts/2013").getFiles();

    Note: The method getFiles() from class Folder returns an array containing all files in the folder. We can read this array with a loop, one file at a time. The JavaScript "for" loop is useful when an Apps Script method return an array of results. In this loop, we can use several methods from the class getFiles() from class File to access the information we need, such as the name and URL of each file.

  5. In the script editor, paste the URL for your site's file cabinet into the PASTE_PAGE_URL_HERE section of the code you copied from above.

    Note: Method addWebAttachment() needs 3 parameters: title, description and URL. In our case, we leave the description field blank.

  6. In the script editor, click File > Save.
  7. Give the script a name and click Save.
  8. Click Run > showFolderInSite. A pop-up will open, asking for authorization to access the Google Docs list and Google Sites services.
  9. Click the Authorize button.
  10. Click Run > showFolderInSite again.

If you reload your site's file cabinet, you will now see links to your Google Drive files!

Using Triggers to get an Up-to-date List

The content of your Google Drive folder will change over time. You will certainly add, rename, and remove files in this folder. A time-driven trigger can help to keep the file cabinet's view of the folder up-to-date. The function showFolderInSite can be automatically triggered every day, or even every hour.

To install a trigger:

  1. In the script editor, click Resources > Current project's triggers.
  2. Click the link that says No triggers set up. Click here to add one now.
  3. Ensure that the function showFolderInSite and the event Time-driven are selected.
  4. Select an appropriate time interval, like every hour or every day.
  5. Click Save.

Section 2: Using a List Page to Show the Folder

For various reasons, you might prefer to use a list page instead of a file cabinet to embed your folder, especially if you have many files in your folder and want to sort them in your page or if you want to show more information on each file, like the owner, type, size and last time it has been edited.

  1. To create a list page, go to any page in your site and click the New page button. For the type of page, select List.
  2. Your site will now offer a choice between several list templates. Select the Create your own option/
  3. Name the first column "Title" and select the type URL.
  4. Click Add a column. Name the new column "Type" and select the type Text.
  5. Repeat the last step to add columns called "Size" and "Owner".
  6. Add one more column called "Last Updated", using the Date type.


  7. In the script editor, replace the existing showFolderInSite() function with the following.
  8. function showFolderInSite() {
      var done = false;
    
      // 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).
      while (!done) {
        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 = '<a href=\'' + files[i].getUrl() + '\'>' + files[i].getName() + '</a>';
    
            /*** Type field ***/
            var type = files[i].getType();
    
            // condition: if the type is "blob_item" replace it with 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 Drive 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){
        }
      }
    }
    
  9. Replace PASTE_FOLDER_ID_HERE and PASTE_PAGE_URL_HERE with the ID of your folder and the URL of your list page, respectively. Refer to section 1 if you need a reminder on where to find the folder ID.
  10. Click File > Save and then Run > showFolderInSite.

Here's the result.

Note: The method addListItem() from class Page needs an array [] as parameter. The first value in the array shows up in the first column of the list (here, a link to the file appears in the column "Title"). Then the second value becomes the second column ("Type"), and so on.

Note: In order to use the "URL" type in a list page, we need to recreate an HTML anchor:
var title = "<a href=\""+files[i].getUrl()+"\">"+ files[i].getName() +"</a>";

Summary

Congratulations, you have learned how to embed a Google Drive folder in a Google Site. If you want to link several folders to several list pages, search for the script "Embed Google Docs Folders in a Google Site" in the Script Gallery. (To find the Script Gallery, open a spreadsheet and select Tools > Script gallery.)

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.