Extension pointers: Working with widgets to power up extension capabilities (Part-3)

Widgets are useful for exchanging data between the third-party applications and Zoho CRM, as well as for displaying the data on a customized basis within Zoho CRM. They let you create customized UI interfaces that allow the data to be showcased through your own perspective. Embedding the widget in Zoho CRM helps to seamlessly synchronise the third-party application data into native CRM components and thereby perform certain functions using that data.

In our previous posts (Part-1 and Part-2), we covered the detailed steps involved in installing ZET CLI, creating a widget, associating it with a connected app, embedding it inside Zoho CRM, and hosting it. In this post, let's see a full-fledged example that demonstrates how widgets help you build powerful extensions.

We'll look at how you can use widgets to easily upload a document present on your desktop to a folder in Dropbox from within Zoho CRM. You can utilize the key benefit of widgets to personalize the UI according to your needs and implement this process. Design a UI interface using a widget that can be easily embedded into Zoho CRM, and let that UI enable you to choose a file from Desktop and upload it to Dropbox.

The steps involved to achieve the above mentioned functionality using widgets are as follows:

1. Create a connector to establish a connection between Zoho CRM and Dropbox in your extension

2. Create a widget that performs the file upload functionality (ZET CLI should have been installed—refer to Part-1)

3. Associate the widget with a Connected app and host it

4. Embed the widget inside Zoho CRM

5. Test your widget's functionality

Create a connector for Zoho CRM and the Dropbox integration

1. Go to the Extension's detail page in the Zoho Developer console.

2. Create a connector called "Dropbox Connector". Please refer to the post on connectors to view the detailed steps to create, publish, and associate a connector with an extension.

In our example, the connector details are as follows:

DropBox Token URLs required for creating a Connector

Request Token URL	https://www.dropbox.com/oauth2/authorize
Access Token URL	https://api.dropboxapi.com/oauth2/token

3. Create an API with necessary parameters to upload files from Zoho CRM to Dropbox.

In our example:

File upload Connector API details

Method Type	POST
URL	https://content.dropboxapi.com/2/files/upload
Headers	Refer DropBox API documentation

After creating the connector and adding the API, publish and associate it with the extension.

Build a widget to upload a file from Zoho CRM to Dropbox

Using ZET CLI, create a new project called "DropboxProject".

Add the necessary files:

HTML, CSS file—UI that will enable you to choose a file from your desktop
JS file—Includes the business logic to upload the chosen file and invoke the DropBox connector using API helpers provided by Zoho CRM's JS SDK

It's important to add the ZohoEmbeddedAppSDK.min.js file (available here) to use the JS SDK's that are needed for your project. Please refer to JS SDK to get information on the different Zoho CRM APIs supported by the SDK. These APIs are significant in helping the Javascript code interact with Zoho CRM.

dropbox.js code snippet

var entity;

var id

var entityName;

var record;

Util={};

// PageLoad listener that returns the entity details of the active page

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

id = data.EntityId[0];

entity = data.Entity;

// Get the record details of the entity using the value returned by PageLoad listener

ZOHO.CRM.API.getRecord({

Entity: entity,

RecordID: id

}).then(function(data) {

// Fetch the required details from the response obtained through getRecord API

var dataa = data.data[0];

record=dataa.Full_Name;

})

// The File Upload function fetches the file and uploads it to Dropbox

Util.uploadFile = function(){

var file = $("#fileupload");

//Fetch the file details

var file = document.getElementById("fileupload").files[0];

var fileType;

if (file.type === "application/pdf"){

fileType = file.type;

}

else if((file.type === "image/jpeg") || (file.type === "image/png")){

fileType = file.type;

}

else if(file.type === "text/plain"){

fileType = "application/msword";

}

else if(file.type === ""){

fileType = "application/text";

}

var name = file.name;

name = encodeURIComponent(name);

//Construct the params required by the Dropbox upload API using the fetched details

var data = {

"VARIABLES":{

"module" : "Zoho CRM/"+entity,

"record" : record,

"file_name": name

"CONTENT_TYPE":"multipart",

"FORWARD_TYPE":"data-binary",

"FILE":{

"fileParam":"content",

"file":file

}

//Invoke DropBox Connector using invokeAPI

ZOHO.CRM.CONNECTOR.invokeAPI("testextension97.dropboxconnector.uploadfileapi", data)

}

The code snippet mentioned above invokes the "Dropbox Connector" to perform the file upload functionality. There are a few Zoho CRM APIs that are used in the above dropbox.js code snippet to perform the specified functionality. Let's have a look at it.

ZOHO.embeddedApp.on("PageLoad",function(data)) - An event listener that is triggered whenever an entity Page (Details Page) is loaded.

ZOHO.CRM.API.getRecord(config) - API that gets all details of a record when provided with the entity and record ID information.

ZOHO.CRM.CONNECTOR.invokeAPI(nameSpace, data) - API to invoke the connector API based on the namespace and data provided.

In our example, PageLoad listener is used to fetch the entity and ID of the record in active page.
By passing the retrieved entity and ID to the getRecordAPI, the complete record information is gathered.
Finally, the information (module, record, name, content type, etc) to be passed as data parameter to DropBox Upload API is extracted and passed to Connector.invokeAPI CRM API in order to invoke the connector. Along with this, the namespace is also passed as a parameter. (In our example, "testextension97.dropboxconnector.uploadfileapi" is the namespace for "Dropbox Connector.")
invokeAPI will invoke the Dropbox Connector and performs the File Upload functionality.

On adding the necessary files, validate and run the widget project to check if it is running fine locally.

The localhost output on testing the widget using ZET CLI:

Finally, pack the project to obtain the packed and zipped file.

Associate the widget with a connected app and host it

Now that the widget is created, the next step is to associate the widget with a connected app and host it.

1. Go to the Extension's detail page in the Zoho Developer console.

2. Click on Connected Apps from the left panel under Utilities.

3. Choose Internal Hosting. Zoho's servers are used to host an application internally.

4. Upload the "DropboxProject" zipped file from the dist folder of your project and click Save.

Embed the widget inside Zoho CRM

After successfully associating the widget with the connected app, the next step is to embed it inside Zoho CRM in the location you want to use it. Let's embed the widget into a custom button in our example.

1. Choose Components from the left panel of the Zoho Developer console under Build. Click Create New Button.

2. Choose Invoke a Widget as the action you'd like the "Upload File" button to perform. Add the location of the widget's HTML file along with the base sandbox URL and click Save.

Test the functionality of your widget locally in an isolated sandbox environment. It's important to keep the localhost server running while testing the sandbox. Run localhost by using the command "zet run" in the ZET CLI.

i. In the sandbox environment, choose the Contacts module and select a contact

ii. Click the Upload File custom button

iii. The Upload file widget will open

iv. Choose a file and click the Upload button

The file will be uploaded to Dropbox according to the path specified in the File Upload APIs Header.

As you see, using widgets, we could easily create a customized UI interface and exchange data across applications. You can customize and enhance your widget's functionality according to your requirements. For more information, keep following this space.

Working with widgets to power up extension capabilities (Part-2)

<<Previous

Next>>

France ZUGs

Sticky Posts
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select
Extension pointers - Simple yet significant pointers #11: Testing an extension in sandbox
After developing an extension using the Zoho developer platform, developers will want to test it before publishing it and making it available to end-users/customers. The Zoho developer platform includes a sandbox testing environment, which is a simulated
Extension pointers - Simple yet significant pointers #10: Publishing
Publishing an extension An extension can be created for an internal organizational purpose or to meet a common business need. In either case, an extension can only be made available to users after it has been published. Types of extension publishing Private:
Extension pointers: Working with widgets to power up extension capabilities (Part-3)
Widgets are useful for exchanging data between the third-party applications and Zoho CRM, as well as for displaying the data on a customized basis within Zoho CRM. They let you create customized UI interfaces that allow the data to be showcased through
Extension Pointers - Simple yet significant pointers #9: Module visibility
Controlling the visibility of custom modules in an extension The Zoho Developer Console allows you to create custom modules via an extension that will be integrated into the user's Zoho CRM account. Along with this support, the platform allows the developer