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 #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 theKaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
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
How do I fully delete a user account
Hi, I have two old accounts on my CRM which are inactive and show as 'Closed' in the list of users. BUT they are basically still there. How do I fully delete these accounts? They appear in some parts of CRM still such as the on the contact record emailsIntroducing swipe actions in the Zoho CRM Android app
Hello everyone, How much time do you spend each day on your list view? Probably quite a lot. Since it's such an important part of your work, wouldn't it be easier if you could take action directly from your list view instead of opening each record oneAutomatically Add Recurring Zoho Meeting Events to Zoho Calendar / Zoho Meeting Calendar
Hello Zoho Meeting Team, Hope you are doing well. We would like to request an enhancement regarding recurring meetings created inside Zoho Meeting. At the moment, when we schedule a recurring meeting in Zoho Meeting, it does not appear in Zoho CalendarCredit Management: #6 Tackling Common Mistakes in Credit Based Billing
Businesses extend credit to build relationships, make buying easy, and drive more sales. But somewhere between extending and collecting, things begin to slip. A few late payments here and there, an overlooked invoice, and a backlog make cash flow feelInsert Cookie Policy in Zoho Sites
Hello, i need to insert a banner on my site because i'm in Italy so i have to respect EU laws for Cookie Policy and Privacy Policy. I see that i need to insert a code in <head> section of my site to show a banner/popup with cookie info. How i can do this? Thank you LucaSend Whatsapp message from Whatsapp template with custom variables
Hi, I'm trying to do some basic integration for sending WhatsApp messages from Zoho CRM using Zoho Desk whatsapp templates. When creating new whatsapp template in Zoho Desk we can choose ticket related fields as variables but it's not clear how to useTasks Statuses
Hi, The task status "Completed" is a final status which closes the task. We need to have a status "Cancelled". However, when the status is set to "Cancelled", the task prompt still has a blue button to Close Task. When the customer clicks that and closesUpdating Blueprint stage from my Deluge function
Hi all, I need to update the blueprint stage. Its almost working, but ONLY if the current Deal stage is 'Closed Lost'. On any of my custom stages that Ive specified in the pipeline it doesnt work! My code: dealmap = Map(); deal_stage = deal.get("Stage");Good news! Calendar in Zoho CRM gets a face lift
Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activitiesMarketing Tip #5: Improve store speed with optimized images
Slow-loading websites can turn visitors away. One of the biggest culprits? Large, uncompressed images. By optimizing your images, your store loads faster and creates a smoother shopping experience leading to higher sales. It also indirectly improves SEO.Canvas: is it possible to have a fixed header?
Hello. Does Canvas provide the option to have a fixed header, similar to the standard view? It would also be interesting for other parts of the interface, like the header or sidebar of the tab section. Thanks!Meeting impossible to use when sharing screen
he Meeting tool in Brazil is practically unusable when sharing anything, whether it’s a presentation or simple navigation. When accessed via Cliq, the situation gets even worse: even basic calls fail to work properly, constantly freezing. And as you areReplacing email ID,
In zoho sheets If I am sending it as an email attachments can I replace sender email ID from notifications to my email ID.Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM
Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individualsLimited layout rules in a module
There is a limit of 10 layout rules per module. Is there a way to get that functionality through different customization or workflow + custom function (easily accessible), etc. Having just 10 is limiting especially if module contains a lot of data. AreRetainer invoice in Zoho Finance modlue
Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.Introducing Lead Capture: Empower exhibitors to capture leads effortlessly
Events provide a great opportunity for exhibitors to generate awareness and engage with potential customers. Efficiently distributing attendee information to exhibitors through a seamless and secure way is of paramount importance. Introducing Lead CaptureCadences
I have just started using Cadences for follow-up up email pipeline. Is it just me or do you find the functionality very basic? For example, it will tell me (if I go looking for it) if someone has replied to a follow-up and been unenrolled; but it won'tdealing with post dated cheques
Hi, can you help me please the best way to deal with this We sell an item of three months duration that is paid for with post dated cheques in monthly stages example - item is sold £3000 Cheque 1 is for £1000 due at time of sale (say Sept) cheque 2 is dated 25th of next month (Oct) cheque 3 is dated 25th of next month +1 (Nov) Now, with invoice number one it's simple - i send a standard invoice as usual But with the other two here's what i want zoho to do next month i want it to send an invoice onUsing Contains as a filter
We are using Zoho Reports, ServiceDesk Plus analytics. I do not see how to create a report filter using Contains comparison of a string values, is one string contained in another. For example, Task Title contains the word Monitor. Is this possible in Zoho Reports? This reporting feature is available in SDP reporting. Thanks in advance, Craig RiceMass import of documents into Zoho Writer
I'm using Google's word processor at the moment but feel that Zoho does a better job (on the online apps market). Iwant to move my documents (about 50-70) to Zoho but it seems to me that I have to import them seperately. Is it already possible to upload several documents at a time or is this a forthcoming feature? Cheers Rolli :?:Set off Unearned Revenue
Hi, I would like to get a clarification on the below. I have an opening balance of BD.725/- in my Unearned Revenue A/c which includes the overpayments of 6 clients. No One of my clients settled his invoices by paying the value of the invoice less theHow Zoho Desk contributes to the art of savings
Remember the first time your grandmother gave you cash for a birthday or New Year's gift, Christmas gift, or any special day? You probably tucked that money safely into a piggy bank, waiting for the day you could buy something precious or something youZoho Connect Module in Zoho Trident
Hi I really like where Zoho Trident is going. Having Mail and Cliq in one place is especially powerful. However, Zoho Connect really needs to be included to make this a true communication and collaboration hub. I would like to request that Zoho ConnectAdd Custom Reports To Dashboard or Home Tab
Hi there, I think it would be great to be able to add our custom reports to the Home Tab or Dashboards. Thanks! ChadAdd Webhook Response Module to Zoho Flow
Hi Zoho Flow Team, We’d like to request a Webhook Response capability for Zoho Flow that can return a dynamic, computed reply to the original webhook caller after / during the flow runs. What exists today Zoho Flow’s webhook trigger can send custom acknowledgementsZoho Inventory - Managing Items With Multiple Suppliers
Hi community, I'm working on a project at the moment for a car parts wholesale business. Each Item (part) has its own original manufacturer part number (sometimes more than one part number for the same item). When purchasing parts from 3rd party suppliers,Finding missing records
I have a challenge and I am not really sure where to start with it. I can't find any similar threads on here, can anyone help: I have two forms, FormA and FormB. Both forms have records that contain a field called Job_Number. What I am trying to achieveAll new Address Field in Zoho CRM: maintain structured and accurate address inputs
The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Managing addressesis it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?
so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assignCustomer Portal on Zoho Desk
Hi, I'd like to know more about the items below I found when setting up the Customer Portal on Zoho Desk. Could someone help me explaining these in details? Especially the 2nd and 3rd point. Thanking you in advance! Permissions Customers can sign up for Customer Portal Customers can view tickets of their organization (contacts) Customers must register to access Customer Portal Display Community in Customer Self Service portalCliq iOS can't see shared screen
Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? RegardsCreate custom rollup summary fields in Zoho CRM
Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions wereCan I add Conditional merge tags on my Templates?
Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letterFile Field Validation
Hello all, We are tracking our customer NDA agreements in our CRM and have created 2 fields to do so, an execution date field and a file upload field. I want to create a validation rule to ensure that when the execution date field is populated that theFill Colors
Hello, Just curious, is it possible to manage the Used and standard colors in the fill drop down menu ? I would like to change/edit them is possible to colors I frequently use. Thanks for you reply, BruceIntegrating Zoho CRM EmbeddedApp SDK with Next.js — Initialization and Data Fetching Issues
You can get an idea from my code I have given in end: First, I worked on a React project and tried the same thing — it worked. My goal was to import the Zoho script and then load contacts using the Zoho Widget SDK, which was successful in React. Now,ListObjects is recognized by VBA
Sub addNewRow() Dim ws As Worksheet ' Set your worksheet name Set ws = ThisWorkbook.Sheets("Invoice") ' Set your table name (change "Table1" to your actual table name) ws.ListObjects("InvItems").ListRows.Add End Sub I am getting Unknown function: LiWhen moments in customer support get "spooky"
It’s Halloween again! Halloween is celebrated with spooky symbols and meanings based on history and traditions, with each region adding its own special touch. While we were kids, we would dress up in costumes along with friends, attend parties, and enjoyHow can I delete duplicate transactions?
I want to delete the duplicates not simply exclude them. I have duplicates, because I had automatic bank feeds turned on (had to make sure this critical functionality was working before migrating to Zoho). Now when I import my csv's exported from Wave,Next Page