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.
This guide will help you with the following:
- Create and Authenticate an Extension
- Create Custom Components
- Set up a Connected App
- Test your Application
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){
- console.log("Page Loaded with data");
- console.log(data);
- })
The code to initialize SDK is,
- ZOHO.embeddedApp.init()
The code to invoke an API is
- ZOHO.CRM.CONNECTOR.invokeAPI().then(function(data){
- console.log(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
- Log in to Zoho Developer Console and click Extensions for Zoho CRM.
- Create an extension and name it 'Google Drive'.
- Click Connectors in the left pane and go to All Connectors tab.
- 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:
5. Add the connector to your extension.
Create Custom Components
- 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
- Click Connected Apps in the left pane of the Extension details page.
- 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/
- Click Save.
- A Connected App is now created.
Test your Application
- Click Test Your Extension located in the top right corner of the Zoho Developer Console.
- Create a new lead record in the Sand Box with the mandatory input information.
- Click Save. You can view the DriveFolderID value getting auto-generated.
- Click the Google Drive related list in lead's detail page. No files have been uploaded to the list yet.
- Add however many files to the list that you want upload.
- Your Google Drive related list is now updated!
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Building a Zillow - Related List Widget
A Zillow widget embedded inside Zoho CRM allows users to obtain various pieces of information about properties in the US. With a Zillow widget, a CRM user can: Get complete property details by entering the property address as input information. View ...Building a Ring Central Telephony Widget
A RingCentral widget embedded inside Zoho CRM allows users to perform various activities. A CRM user can: Load the telephony dial pad as an iframe in the Zoho CRM interface by using the telephone icon at the bottom right corner of the screen. Make a ...Widget Support
This guide will help you with the following: Embed a Telephony Widget Create a Web Tab Create a Related List Create a Custom Button Create a Getting Started Widget Create a Business Card Widget Sometimes, you may want to include features in ...Widget Support
This guide helps you with the following: Embed a Telephony Widget Create a Web Tab Create a Related List Create a Custom Button Create a Settings Widget Create a Business Card Widget Sometimes, you may want to include features in your Zoho CRM ...Building a Twilio Extension
Twilio is a cloud communication platform that allows developers to integrate their application programmatically to make and receive voice calls and text messages using its Web service API. The following core topics will assist developers in ...
New to Zoho LandingPage?
Zoho LandingPage Resources