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







    Access your files securely from anywhere



                          Zoho Developer Community




                                                • Desk Community Learning Series


                                                • Digest


                                                • Functions


                                                • Meetups


                                                • Kbase


                                                • Resources


                                                • Glossary


                                                • Desk Marketplace


                                                • MVP Corner


                                                • Word of the Day


                                                • Ask the Experts





                                                          Manage your brands on social media



                                                                Zoho TeamInbox Resources



                                                                    Zoho CRM Plus Resources

                                                                      Zoho Books Resources


                                                                        Zoho Subscriptions Resources

                                                                          Zoho Projects Resources


                                                                            Zoho Sprints Resources


                                                                              Qntrl Resources


                                                                                Zoho Creator 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


                                                                                          Zoho Show Resources


                                                                                            Zoho Writer Writer

                                                                                            Get Started. Write Away!

                                                                                            Writer is a powerful online word processor, designed for collaborative work.

                                                                                              Zoho CRM コンテンツ










                                                                                                Nederlandse Hulpbronnen


                                                                                                    ご検討中の方




                                                                                                          • Recent Topics

                                                                                                          • Images in Zoho chat

                                                                                                            When I add an image to my chat, it just doesn't work, for the other participants it shows a blank image, like it's missing.
                                                                                                          • Add Desk Account comments using Flow

                                                                                                            The triggers and actions for Zoho Desk available in Flow are quite extensive, but I don't see anything related to Account-level Comments. There are actions to add comments to Tickets, Contacts, Tasks, and Topics, but nothing for Accounts. Am I missing
                                                                                                          • Installing EMAIL Setup in New Domain

                                                                                                            Respected Support team, I'm facing an issue with cloudflare in Pakistan, I want to setup Zoho Mail Setup but I Don't know how to enable Zoho mail setup without cloudflare. My Website https://stumbleguymod.com/ is using CF, and I want a different Zoho
                                                                                                          • Free webinar alert! Empower Customer Experience in a Changing World with Zoho Desk and Zoho Workplace

                                                                                                            Hello Zoho Workplace Community! We’re back with another exciting webinar—and this time, it’s all about delivering exceptional customer experiences. Join us for "Empower Customer Experience in a Changing World with Zoho Desk and Zoho Workplace," where
                                                                                                          • Custom Function to Format Phone / Mobile numbers in Australian Standard format

                                                                                                            So I got sick of phone numbers being formatted incorrectly and Zoho not doing anything to standardise phone numbers to meet E.164 formats. So I went and coded my own function to fix this. And figured I'd share with the community This is specifically for
                                                                                                          • Download pricebook products & details - not just pricebook creation date & name

                                                                                                            We're looking to download a copy of a pricebook and its associated products & book prices (as we have several offices in different countries selling the same products), however, when using the export feature under Data administration it only gives me
                                                                                                          • Learning how to customize templates via code and best practices

                                                                                                            Hi! Our developers team want to learn how to edit our template files safely. The last time we messed with these files our site went down for a day and we had to reconfigure it from scratch. What are the best practices to do this? How can we get a template
                                                                                                          • Output product SKU in ecommerce

                                                                                                            Hi how do I display the product SKU on the page can I place the SKU variable on the layout to output the SKU value.
                                                                                                          • Automate Note Creation for Service Appointments

                                                                                                            Hi Latha, I hope you're doing great. Thank you for your continued support in helping resolve previous issues — it's truly appreciated. I'm currently working on automating another workflow using Deluge in the Service_Appointment module. Specifically, I
                                                                                                          • Unable to create a Zoho Desk ticket from a call in Zoho CRM

                                                                                                            I want to create a Zoho Desk ticket when a new record is created in the Calls module in Zoho CRM. However, I get the following error message when trying to test & debug: We are unable to setup Zoho CRM. Please try again or contact us for further help
                                                                                                          • [Live Webinar] New in Zoho WorkDrive: AI enhancements, Data Loss Prevention, Version Controls, and more

                                                                                                            Hello everyone, We're excited to bring you another round of powerful updates in Zoho WorkDrive! Join us on May 15 for an exclusive live webinar where we’ll unveil the latest features designed to enhance your team’s productivity, collaboration, and data
                                                                                                          • Support for Digital Goods/Products and password protection

                                                                                                            Hi! Some companies sell product licenses or digital products directly, these licenses are unique for each sale that later allow you to download a ZIP file with a passwod-key that can uses the same license code (for example, a market report) or, failing that, is used in the product such as an authentication in the software or a request. It would also be interesting those who sell in subscription mode and can be integrated with Zoho Subscription. Thank you
                                                                                                          • Share forms with your team to collaborate better

                                                                                                            Collaborating and communicating as a team gets things done faster and increases productivity. That's why we're excited to announce our form collaboration feature, where you can share your forms privately with select users and co-edit them together.  What's
                                                                                                          • Ticket layout based on field or contact

                                                                                                            Hi! I want to support the following use-case: we are delivering custom IT solutions to different accounts we have, thus our ticket layouts, fields and languages (priority, status field values should be Hungarian) will be different. How should I setup
                                                                                                          • Integrate QuickBooks with Bigin and streamline your sales and accounting!

                                                                                                            If your business relies on Bigin for customer management and QuickBooks for accounting and invoicing, this new integration is here to make your operations more efficient. By connecting these two platforms, you can now manage your CRM and financial processes
                                                                                                          • Add Lookup Field in Tasks Module

                                                                                                            Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (https://help.zoho.com/portal/en/community/topic/custom-fields-on-task-module).
                                                                                                          • What's New in Zoho Inventory | January - March 2025

                                                                                                            Hello users, We are back with exciting new enhancements in Zoho Inventory to make managing your inventory smoother than ever! Check out the latest features for the first quarter of 2025. Watch out for this space for even more updates. Email Insights for
                                                                                                          • Streamlining customer inquiries with Email-In approvals

                                                                                                            Greetings! Email-In has transformed the way Bigin users manage customer inquiries by seamlessly converting emails into pipeline records. By creating email aliases for your Bigin pipelines, any email sent to these aliases is automatically turned into a
                                                                                                          • How to validate Rich Text in Zoho Creator! Urgent!

                                                                                                            Hi members, Recently I just started to use Rich Text field. Now I have a requirement where I need to validate to ensure this Rich Text field must contain a value. Meaning must contain something. I use the below script if(input.Rich_Text == null) { alert
                                                                                                          • Zoho People API - all active employees' emails

                                                                                                            Hello, how can i get all active employees' emails in Zoho People using api?
                                                                                                          • Default Lookup Field Value based on Picklist

                                                                                                            How do I change a lookup field value based on another field's value, while creating/editing a record using form? I have a picklist of different types of Loans. For example: PPP, EDIL, Term, etc. When I create a record using the form, if I choose PPP from
                                                                                                          • Notice: Revise OpenAI model permissions to continue Using Zia Writing Assistant

                                                                                                            Dear Users, We’re upgrading the Zia Writing Assistant to use the GPT-4o-mini model for improved performance and accuracy. To continue using the Writing Assistant, please revise your OpenAI model settings by May 27, 2025. After this date, older models
                                                                                                          • Bulk upload image option in Zoho Commerce

                                                                                                            I dont know if I am not looking into it properly but is there no option to bulk upload images along with the products? Like after you upload the products, I will have to upload images one by one again? Can someone help me out here? And what should I enter in Category URL in the excel sheet that I use for upload? I entered my sub-category directly and it is still undefined. Can someone help me here please? I need to get my store live asap.
                                                                                                          • Managing manual users

                                                                                                            Why are there two seemingly-identical lines in the manual user management? How can someone in the space be both Disabled and Admin? What is the difference between the two groups?
                                                                                                          • Sum Total of various fields in child module and add value to parent module field

                                                                                                            Hi! Having trouble with a custom function, im trying to calculate the total of all the rent and sqm fields of our offices in Products module and have them transfer to the parent module Location. The API names are as below: Child module Products = "Products"
                                                                                                          • Work Order Creation Issue

                                                                                                            Dear Team, I would like to inquire about the daily limit for Work Order creation in Zoho FSM. Yesterday (02/05/2025) at around 6:30 PM GST, I attempted to create a Work Order, but I have been unable to do so since then. Please find the attached image
                                                                                                          • The 3.1 biggest problems with Kiosk right now

                                                                                                            I can see a lot of promise in Kiosk, but it currently has limited functionality that makes it a bit of an ugly duckling. It's great at some things, but woeful at others, meaning people must rely on multiple tools within CRM for their business processes.
                                                                                                          • We need customizable sub-form layouts

                                                                                                            Currently, we can arrange sub-form fields only in a single row. The single row layout means salespeople must horizontally scroll to uncover information. As a result, salespeople cannot see all of the relevant information simultaneously.  The administrator
                                                                                                          • How can i connect the zoho people to n8n.io

                                                                                                            Hello, I hope you are doing well Iam working on an automation in which I will be fetching the data from Zoho People of my employees to arrange, modify, and upload on Google Sheets to maintain their attendance data. I tried through the Zoho Developer Console
                                                                                                          • Staff Tracking in

                                                                                                            Hi , I would like to see what activity my staff does over Zoho CRM and over Zoho Mail . I need to know which deals in CRM haven't been touched or had an activity on by a particular staff member . Basically need to establish what work.gets done by WFH
                                                                                                          • How do you make sure the same person doesn't answer the survey twice?

                                                                                                            Preventing multiple responses to a survey is really important because letting people answer more than once can seriously ruin the data. It skews results, making it seem like certain opinions are more popular than they are. This can lead to misleading
                                                                                                          • In line code commenting in Deluge

                                                                                                            A request to enhance readability: currently you can add 'in line' comments for Deluge code, but after you save and reopen, the comments are moved down to the new line. i.e. info "test response"; //this is a info statement for a test response gets changed
                                                                                                          • GCLID arrives not in CRM with iframe integrated ZOHO Form

                                                                                                            Hello amazing community, I enabled Adwords integration in ZOHO CRM. I have a ZOHO Form integrated in a wordpress. I tested iframe and Javascript. I enabled the "handover" GCLID in the ZOHO Form. When I add a GLID with http://www.example.com/?gclid=TeSter-123.
                                                                                                          • Sending Recruit SMS's to Zoho Cliq - Or tracking in the Messages module in Recruit?

                                                                                                            Is there any way to send SMS Gateway messages in Recruit to ZOho Cliq? We use 2-way SMS massages a lot in Zoho Recruit to speed up communication with Candidates. However the only way to keep track of received SMS's is by keeping a look out for the Email
                                                                                                          • Feature Request - Insert URL Links in Folders

                                                                                                            I would love to see the ability to create simple URL links with titles in WorkDrive. or perhaps a WorkDrive extension to allow it. Example use case: A team is working on a project and there is project folder in WordDrive. The team uses LucidChart to create
                                                                                                          • Allowing workflows to execute as an admin

                                                                                                            Workflows currently seem to execute with the permissions of the logged in user. This is a problem for most of the forms we have where we have hidden fields that perform business logic. If we restrict the permissions of these fields so users can't view
                                                                                                          • Group Emails

                                                                                                            I have synced Zoho CRM to Campaigns but there are certain email not synced. showing it is Group Emails, but this email ids belongs to different individuals. please provide a solution as i nedd to sync the same.
                                                                                                          • How to modify query from a DataBridge Connection

                                                                                                            Hello, I just installed the new DataBridge tool to import data to our Zoho Analytycs account from our local database. It works well so far, and data gets sync every day. The only issue that I found is that we do not know how to modify the query that imports
                                                                                                          • Is there a way to force a page refresh after changing a Subform via Workflow / Function?

                                                                                                            I have a workflow which triggers a function, and in this function i am changing the values of a certain subform. The changed are only visibile when i manually refresh the page and this is a no-no for my use-case. When other workflows, that change certain
                                                                                                          • Unable to invite contacts

                                                                                                            Hi! I'm unable to invite contacts as end-users from my trial account. The green pop-up displays "Invited succesfully" but the email never arrives, nor the re-invitation - even though it's "sucessfully" as well. Tried with several e-mail accounts, even
                                                                                                          • Next Page