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
Request Token URL | |
Access Token URL |
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 |
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
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
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
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
Rene21 De Ridder
Praveen Sankar
Developer
Sticky Posts
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
New to Zoho TeamInbox?
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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
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 missingInstalling 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 ZohoFree 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," whereCustom 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 forDownload 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 meLearning 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 templateOutput 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, IUnable 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 dataSupport 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 youShare 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'sTicket 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 setupIntegrate 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 processesAdd 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 forStreamlining 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 aHow 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) { alertZoho 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 fromNotice: 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 modelsBulk 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 imageThe 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 administratorHow 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 ConsoleStaff 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 WFHHow 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 misleadingIn 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 changedGCLID 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 EmailFeature 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 createAllowing 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 viewGroup 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 importsIs 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 certainUnable 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, evenNext Page