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
Kaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes areKaizen #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 achievedKaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI
Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the
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
Conditional Email Forwarding
How can I set conditional email forwarding of the users? For example: Mail should be forwarded to a address only if it comes from a particular sender. So, I want such email forwarding, which forwards mails based on particular conditions, like the incomingIncoming emails not appearing in Inbox
Hello, I have an issue with incoming emails sent from my website (domain: h2ostop.si). Emails are visible in the Sent folder, which means they are successfully sent through Zoho SMTP, but they never appear in my Inbox. Nothing arrives in Inbox, Spam,Automatic Matching from Bank Statements / Feeds
Is it possible to have transactions from a feed or bank statement automatically match when certain criteria are met? My use case, which is pretty broadly applicable, is e-commerce transactions for merchant services accounts (clearing accounts). In theseEmail Opt Out Question
Has the problem where if a customer is emailed opt out prevents you sending standard emails? For me this feature is simply to stop any email marketing and should not block people from receiving emails via Zoho mobile, which makes no sense.Can No Longer Access Zoho Email Accounts from iPhone or iPad Apple Mail Apps ,.
Keeps asking for password, Says ID or password incorrect. Tried creating a new app specific password. Same result. Is this possibly related to the server maintenance. Have verified all email settings, userid and password. This has worked for years untilLatest update caused issue in using marathi typingzoho
With latest update now marathi typing does Not work in zohonotebook. I preferred zoho over other because it was supporting marathi font without any distortion.. But after new update,keyborad simply does not workLogin verification emails never received.
I can't login to my account. You send a verification email, but it never arrives. This is a common problem, frequently caused by some relay point out there classifying the sender as a spammer. Is there anything I can do to bypass this? Maybe get a textGlobal lists for Multi select
It would be great if I could select a global list to use for a multi select dropdown filed.Yahoo is rejecting e-mails sent from a Zoho server
Diagnostic-Code: 4.7.0 [TSS04] Messages from 136.143.169.51 temporarily deferred due to unexpected volume or user complaints - 4.16.55.1; see https://postmaster.yahooinc.com/error-codes Remote-MTA: dns; mta5.am0.yahoodns.netYahoo blocks e-mail sent from Zoho servers
Getting this for a bunch of Yahoo addresses. Do you know if some of your servers got blacklisted? Diagnostic-Code: 4.7.0 [TSS04] Messages from 136.143.169.51 temporarily deferred due to unexpected volume or user complaints - 4.16.55.1; see https://postmaster.yahooinc.com/error-codesWorking with dates and Function Field
Hello friends! I'm trying to add days to a date, however the field function will always shows 00:00:00 after the resultant date. How can I display only the date, whithout the time? toDate(input.request_date.addDay(input.Prazo_acordado),"MM,d,yyyy") The code above will result something like "11-Feb-2020 00:00:00", but I want to display only "11-Feb-2020"What's New in Zoho Analytics - November 2025
We're thrilled to announce a significant update focused on expanding your data connectivity, enhancing visualization capabilities, and delivering a more powerful, intuitive, and performant analytics experience. Here’s a look at what’s new. Explore What'sUnable to send message;Reason:550 5.4.6 Unusual sending activity detected. Please try after sometime.
Please help my account got blocked automatically, can you help me how to avoid it? Thanks so muchUnusual activity detected from this IP. Please try again after some time
When i try to create new addresses on my account i am getting this error, it has been 24 hours now and i am still getting this error can anyone helptemporary system errorlouis
J'essaye d'envoyer des mails avec mes 2 adresses mail qe nous avons sur le compte arthur@lepunch.fr et louis@lepunch.fr mais j'ai toujours le message temporaire system error, je reçois les mails mais impossible d'en envoyer a qui que ce soitHow to Cancel/Delete Queued Mail Merge?
Hi. I just tried to do a mail merge before realizing there's a limit on number of sends. I accidentally sent one of my lists twice, and all of those emails are currently queued. Is there any way to cancel or delete a queued mail merge? Would love to beSOLVED: Stopping Multiple Invitations when sync with Google Calendar
I wanted to share this solution as I wasn't able to find it when searching through the Zoho community and via web search. The issue: When requestor books a meeting through Zoho Bookings, the requestor receives a confirmation email from both Bookings andNeed to add a new admin for my domain
Hello Zoho Support, I am the owner of the domain localeistanbul.com. The current super admin account (admin@localeistanbul.com) is not accessible. I do not want to reset or delete the existing account because I need to keep all existing emails. PleasePossible Fraud Site.
Hello. I received a text with the sender's name as zoho, claiming that my account was at risk and that I should sign in at https://verify.zohomails.ru/signin to verify my account. I signed in on the web address above, and a few days later someone hackedZoho mail to Teaminbox
Hello, We're searching for new mail program. Now I'm testing a bit with zoho mail and team inbox. My findings in the research: Pop mail throught zoho mail is almost instant. Any pop or imap via external provider takes a couple minutes to 15 minutes beforeCrear tarea CRM con recordatorio desde Zoho Flow
Hola, estoy intentando crear desde Zoho Flow una tarea en CRM. Lo he logrado hacer pero sin recordatorio, ya que no se como se debe escribir el string adecuado. He probado varias alternativas, pero ninguna me funcionó hasta ahora. - FREQ=NONE;ACTION=EMAIL;TRIGGER=DATE-TIME:${FechaVto}Inquiry Regarding Automated Assignment of Zoho TeamInbox Messages using Zoho Flow and Deluge
Hello, Our company is currently using Zoho TeamInbox, and we are interested in automating the assignment of responsible parties using tools such as ZOHO Flow and Deluge. Is it possible to achieve this? Allow me to provide more details. Currently, whenMultiple clients in one project
Hi team, What is the possibility to have more than one client to be linked for one project in the Zoho Books? Our business model is to have a project, and this project have expenses/bills, as well, we issue invoices for this same project to several customers.Upgrade Zoho Desk Agent-Side Answer Bot to GenAI
Hello Zoho Desk Team, We hope you're doing well. Following the recent announcements and rollout of the GenAI-based Answer Bot in Zoho SalesIQ (Nova '25), we’d like to formally request a similar upgrade for the Answer Bot used by agents inside Zoho Desk.Marketers' Space: The importance of warming up your sender domain
Hello Marketers, Welcome back to yet another post! Today, we'll talk about why warming up your sender domain matters. Imagine you've recently started a business and want to share the news with your customers. You've designed a great email campaign usingAn Exclusive Session for Zoho Desk Users: AI in Zoho Desk
A Zoho Community Learning Initiative Hello everyone! This is an announcement for Zoho Desk users and anyone exploring Zoho Desk. With every nook and corner buzzing, "AI's here, AI's there," it's the right time for us to take a closer look at how the AISearch Just Got Smarter in Notebook
Hello there! Introducing Our New & Improved Search Experience! We heard your feedback! Many of you shared that our previous search had some challenges like • Inconsistent results across different clients • Limited accuracy in finding the right contentZoho Desk app update - AI Integration for IM Chats
Hello everyone! We have now introduced AI integration for IM Chats within the Zoho Desk mobile app. To access the feature, please enable the 'Generative AI' settings on the desktop site(desk.zoho.com). Please refer to the help link attached below: ZohoOpen A.I assistant Connect with Zoho Desk instant Message Conversations
I would like to know how do I connect my instant messenger in Zoho desk with my Open A.I Gpt Assistant. this is very easy to setup using the Salesiq Zobot but when it comes to Zoho Desk i cannot figure how to make the connection. Ideal workflow CustomersCannot upgrade subscription plan due to payment error message
Hi Zoho team, This is to request support on an issue I am facing during an upgrade I am trying to make to our company's yearly Zoho subscription. I am trying to add 3 more license to my plan and during the payment phase I get the below error as in theEnhancing Zia's service with better contextual responses and article generation
Hello everyone, We are enhancing Zia's Generative AI service to make your support experience smarter. Here's how: Increased accuracy with Qwen One of the key challenges in AI is delivering responses that are both contextually accurate and empathetic whileZoho Desk app update: AI powered features
Hello everyone! We’ve introduced various AI-powered services on the Zoho Desk app. Let's take a look at what's new. Generate Content: Generate Content uses AI to formulate responses based on the your query and provides a ready-to-use reply which can beBulk update Archived Ticket
Dear All We would like to update the "Category" values to the new filed. We found the archived Ticket seems to be don't support the bulk action. Do we have any way to update it. Finally, we would to generate a report for our ticket system. Regards IChannel Configuration and Default Channels
There are some of the default fields that cannot be removed or changed. Examples are the social media ones, such as Facebook. It would be nice to be able to remove these fields as it would be confusing if someone selected this but it's not configureDelay function execute
I've got a workflow which uses a webhook to send information to Flow, which in return updates a record in Creator. Problem is, by the time this has executed, the rest of my script has run and can't find the (yet to be) updated info in the record. Is thereSupport www.camcard.com
Hi, Is it possible CRM Zoho have integrations with https://camcard.com/? Thanks Br, AndyOption to Customize Career Site URL Without “/jobs/Careers”
Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving toCan't make a document editable to anyone
Hey everyone, I am using Zoho Workdrive and trying to share a document so that it is editable by anyone with the link. I am trying to convince people to shift from Google to Zoho, but they don't have accounts yet. When I try to change the share settingsEdit Default Print
What I want to do is create / edit the "Default Print" template without changing the layout I'm using. Currently I can create "Email Templates" but I don't use them for emailing and getting to that selection takes multiple clicks. If an email template could be set to be the Default Print template that would be helpful. I'd also like to print these in bulk but don't see that option (there is a mail merge macro but that goes straight to emailing, not to print or PDF).Widget shows error
Hi， May I ask why below characters will be auto added into the widget link and how to solve this error? As my widget shows 404 error now. ?serviceOrigin=https%3A%2F%2Fcrm.zoho.com&frameorigin=https%3A%2F%2Fcrm.zoho.comNext Page