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

Extension pointers #6: 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
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
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.


SEE ALSO



Next>>




    Access your files securely from anywhere

        Zoho Developer Community

            Bootcamp
            Community
            Pricing
            Webinars
            What's New
            Integrations
            Contact Support
            Contact Sales

              Zoho Survey Resources
                Features
                Survey Templates
                Integrations
                Community
                iOS Mobile Surveys
                Pricing
                Android Mobile Surveys
                Insurvey Blogs
                Insight Blogs
                Tips & Tricks





                              Latest Feature Updates


                                  Zoho Desk Resources

                                  • Desk Community Learning Series


                                  • Digest


                                  • Functions


                                  • Meetups


                                  • Kbase


                                  • Resources


                                  • Glossary


                                  • Desk Marketplace


                                  • MVP Corner


                                  • Word of the Day




                                      Zoho Marketing Automation
                                        Zoho SalesIQ Resources


                                              Manage your brands on social media
                                              Access Zoho Social

                                                Zoho Pagesense Resources


                                                    Zoho TeamInbox Resources

                                                      Zoho DataPrep Resources



                                                        Zoho CRM Plus Resources

                                                          Zoho Books Resources


                                                            Zoho Subscriptions Resources

                                                              Zoho Projects Resources


                                                                Zoho Sprints Resources


                                                                  Qntrl Resources


                                                                    Zoho Creator Resources



                                                                        Zoho Campaigns Resources


                                                                          Zoho CRM Resources

                                                                          • CRM Community Learning Series

                                                                            CRM Community Learning Series


                                                                          • Kaizen

                                                                            Kaizen

                                                                          • Functions

                                                                            Functions

                                                                          • Meetups

                                                                            Meetups

                                                                          • Kbase

                                                                            Kbase

                                                                          • Resources

                                                                            Resources

                                                                          • Digest

                                                                            Digest

                                                                          • CRM Marketplace

                                                                            CRM Marketplace

                                                                          • MVP Corner

                                                                            MVP Corner





                                                                              Design. Discuss. Deliver.

                                                                              Create visually engaging stories with Zoho Show.

                                                                              Get Started Now