Building a Google Drive - Related List Widget

Embedding a Google Drive widget inside Zoho CRM as a Related list allows a user to accomplish three tasks,

  • Fetch files from Google Drive and show them as a related list in the record's detail page in CRM.
  • Upload any document from Zoho CRM to a Google Drive folder.
  • Retrieve file information from the Google Drive.

How can I ...

Import the Zoho JS SDK

To import the Zoho JS SDK,visit https://github.com/ZohoDevelopers/GoogleDriveWidget, download and extract it to your path.

Register the Event Listeners

Registering an event means defining a function that will be executed when certain event is triggered by your application.

The code for event listener for this application is,

ZOHO.embeddedApp.on("PageLoad",function(data){
        
        
})

The code to initialize SDK is,

ZOHO.embeddedApp.init()

The code to invoke an API is

ZOHO.CRM.CONNECTOR.invokeAPI().then(function(data){

});

Authentication using OAuth2

This extension is authenticated using OAuth2.0 protocol. The Google Drive connector is created with the necessary APIs associated with this extension and published.

Create and Authenticate an Extension

  1. Log in to Zoho Developer Console and click Extensions for Zoho CRM.
  2. Create an extension and name it 'Google Drive'.
  3. Click Connectors in the left pane and go to All Connectors tab.
  4. Click the Create Connector button, and provide the details to create the connector. Add the necessary API's to the connectors. Refer this page for details of how to create a Connector.

    Refer below table for details of the APIs:

    NameAPI URL
    getFileshttps://www.googleapis.com/drive/v2/files/${folderId}/children
    uploadFilehttps://www.googleapis.com/upload/drive/v2/files?uploadType=multipart
    getFileInfohttps://www.googleapis.com/drive/v2/files/${fileID}
  5. Add the connector to your extension.

Create Custom Components

  1. Create a custom field named DriveFolderID in the Leads Module to store an auto-generated folder ID whenever a lead record is created.

  2. Create a Related List titled Google Drive in the Leads module to fetch the files from Google Drive.

Set up a Connected App

  1. Click Connected Apps in the left pane of the Extension details page.
  2. Enter the following information:
    • Connected App Name : Google Drive
    • Description : A short description about the connected app.
    • Choose Hosting : select the Server side application.
    • Specify Base URL : https://live.zwidgets.com/GoogleDriveRL/v1/html/
  3. Click Save.
  4. A Connected App is now created.

Test your Application

  1. Click Test Your Extension located in the top right corner of the Zoho Developer Console.
  2. Create a new lead record in the Sand Box with the mandatory input information.
  3. Click Save. You can view the DriveFolderID value getting auto-generated.

  4. Click the Google Drive related list in lead's detail page. No files have been uploaded to the list yet.

  5. Add however many files to the list that you want upload.
  6. Your Google Drive related list is now updated!