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
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 DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho Campaigns Resources
Zoho CRM Resources
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
Blueprint - 'On hold' state with an automatic transition?
I think I'm missing something here so I'm hoping if I explain what I'm trying to achieve someone might be able to give me a way around it. We sometimes get request far in advance but we don't want to action them unless it is 7 days from when they areHOW TO VIEW INDIVIDUAL COST OF NEWLY PURCHASED GOODS AFTER ALLOCATING LANDED COSTS
Hello, I have been able to allocate landed costs to the purchase cost of the new products. however, what i need to see now is the actual cost price (original cost plus landed cost), of only my newly purchased products to enable me set a selling priceClient Script: $Client.refresh({ triggerOnLoad: true }); not triggering onLoad Client Scripts
Hey friends! I'm trying to store a temporary var, refresh the page for the user, then check that temporary var and do some actions. Theoretically using the title's code: $Client.refresh({ triggerOnLoad: true }); should refresh the page and trigger onCalculate months and years between 2 dates on subform
I am looking for a function syntax for an employment candidate to calculate the number of years and months (decimal format. eg 1.2 years) they are employed. I have their start date entered, but if the end date is blank, that tells me they are still employedCombine related grouping values into categories in CRM analytical components
Hello everyone, Analyzing large datasets can be challenging when dealing with numerous individual data points. It's often difficult to extract meaningful insights when information is scattered and ungrouped. To address this, we're adding options to createHow Kiosk Studio can simplify sales for bank employees | Kiosk Studio Session #4
Hello everyone, Banks can boost revenue by cross-selling to their current customers. For example, they can sell credit cards, personal loans, and more to existing account holders. To do this, bank employees move all around the CRM, open and close records,Tip #19 - Create checkbox tracker in your spreadsheet
Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sampleIntegrate Oracle with ZOHO CRM
Please let me know if its possible to Integrate Oracle with ZOHO CRM. If yes then help me in doing it.UUIDs
Has anyone coded a Universal Unique Identifier (UUID) generator in Deluge?Introducing signer groups: Streamline signature collection and make it even faster
Hello everyone, We're excited to introduce signer groups, a feature designed to make your signing process quicker, more efficient, and collaborative. With signer groups, you can send an envelope to a group of people, and any member of the group can openCalendar - Recurring Event - End of Month and Last Weekday of Month
How do I set a calendar event to recur on the last day of every month? How do I set a calendar event to recur on the last weekday of the month?Duplicate Zoho Invoices and Sales Receipts
We have been running into an issue where upon saving an invoice or a sales receipt, we get a duplicate: same information saved twice but with a different invoice id/number and sales receipt id/number. I have logged a ticket but so far no response. ItIntroducing revamped Zoho Creator Developer Console—a powerful platform for developing and distributing apps
Hello everyone! We're thrilled to announce the launch of the revamped Zoho Creator Developer Console—a dedicated platform designed specifically for Creator developers and Partners to build, test, and distribute apps to your clients. Developer ConsolePhone App of CRM doesn't find contacts
I open the crm to and do a contact search but nothing comes up. If I do a full zia search it will find an old note that is attached to a contact and I can open the contact. BUT I still can't enter notes of calls, set appointments, etc. It requests I go[Product Update] Deprecation of 'Inbound Transport Details' module in Zoho Analytics - Amazon Seller Central integration
Dear Customers, Please be informed that the Amazon Seller Central will be deprecating the 'Inbound Transport Details' module APIs effective December 20, 2024. As a result, this module will no longer be supported in the Amazon Seller Central - Zoho AnalyticsIs there any support for Drivers license and other forms of ID scanning capabilities?
When scanning a drivers license barcode for data input to a Form, the scanning tool receives all the raw data but there doesnt seem to be a function to limit or remove the unnecessary fragmrnts, like a prefix. Is there any support or info in the helpExciting Update: Multi WhatsApp Business Account (WABA) Support Now Available in SalesIQ!
We’re pleased to share an important update that will enhance the way you manage your WhatsApp Business accounts (WABAs) within SalesIQ. With the launch of Multi WABA support, you can now connect and manage multiple brands more effectively, each underGravity Forms plugin not passing some fields
I use the gravity form zoho plugin to push data from my lead form into my lead page in Zoho CRM. Everything was working file for about 6 months. Suddenly on Oct 1st, some of the fields are no longer getting passed to Zoho. The fields with the problemCan't delete bank transactions (i changed from 14 days trail to free just now)
Hi, I manually added one bank transaction When i try to delete it, it say below: What should I do?Feature Request: Search in the PC client. Some thoughts about the search.
Hi all. I'm really excited to start using Zoho Notebook, but I'm missing some of the search capabilities on my desktop. There are also some thoughts on improving search in general. Search is very important to me, without it it is difficult for me to useLeave Policy for Brazil
Hi, Brazil asked us to configure Zoho People to apply the following policy: · To block starting vacations 2 business days before holidays or weekends; Employees cannot start their vacations 2 days before holidays or weekends. Example: If December 25thAdding date field to each individual Items when creating Invoices?
When adding items into an invoice I need to be able to have a date for each item. Example below: Date Item Description Qty Rate Discount(%) Tax Amount 31/07/13 Brown Sugar Performance 1.00 3,000.00 0.00 10% $3300 Is this possible or will it be in theAuto-Create OneDrive Folder Structure Upon Lead Creation
Hello, New to Zoho and looking for help on a critical process automation I'm looking to implement. My company currently utilizes OneDrive for file management and the folder structure is Proposals -> Client Name -> Address (where I need to initially createProfile Page View Customization
I need to change the fields, sections from the profile view of an emplyoyee.What do the Image Sizes mean in Zoho CRM Email Templates?
Below you can see the image options in email templates: Banner, Fit, Small, Medium, Original, Custom. Can someone from Zoho please share with me: What each is/means? How each will look on desktop AND mobile? How to edit "custom"? If I choose "Custom"Translate any published presentation to the language of your choice
As part of our constant effort to enrich your presentation experience, Zoho Show has rolled out a new feature for translating published presentations. Consider the following scenario: Zylker IT services, a multinational corporation, has announced productBlueprint: multi-select lookup field not available in the criteria option
I read this old forum post which stated that multi-select lookup fields are now selectable as an option in a Blueprint transition configuration: https://help.zoho.com/portal/en/community/topic/blueprint-multi-select-lookup-field-not-available-within-blueprint-transitionApply Credit Note Automatically
We need the ability to apply open Credit Notes toward invoices generated by recurring invoice as the first, priority payment. This should be an option that we can enable/disable in the recurring profile and/or the Credit Note. Other invoicing systems can do this. I'm not sure why Zoho Invoice doesn't have it. Here's an example for a Recurring Invoice... If a customer has open Credit Notes, and a saved credit card set for auto-pay, once an invoice goes out, the credit balance gets automatically appliedWorkflow for "Expenses" module?
Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflowsRecord Template - Conditionally printing sections
Is there a way to conditionally print a section of a Record Template? More specifically I am printing records from a Form "Invoice". That Form has 3 SubForms. I'd like to print the content of those SubForms using a Record Template but only if they have at least one line item. If they have no line items, I'd like to hide the headers for that section on the printout.User can choose the PDF report
Hi. I would like to find out if a user (Creator or customer portal) to choose from the different PDF customised reports that have been built?Query table pull last 12 months
I am tying to pull the following criteria and the date is always what causes me the issue. I want to pull people (pco_id) who have entries of "event_id" being these 2 events and whos "kind" is Regular or Guest and where the event_starts_at (date column)PLEASE FIX Search options and consider a Global seach option
A recent update has removed the ability to search for addresses and phone numbers under contacts. We cannot find where this moved to (If it is still available). Please put these options back as we cannot locate specific projects anymore. Also please consider allowing for a Global search. This would really improve the search engine. For example: If I search for "Sally Jones" then all invoices , estimates, vendors etc.. would populate.. Please let me know if you need any more information. Thank You....Customize your calendar based on personal preferences
Greetings, We're happy to introduce a few new capabilities to the Activities module's Calendar View! Now you can tailor your calendar's appearance and notification settings to suit your needs. In the past, the Calendar View lacked customization optionsBUG ALERT: Client Script + Commands -> $Page contextual data is not updated
When using the new Client Script Commands feature, there is an issue with the Client Script $Page contextual data not accurately being updated each time a Command is run. Assuming a Client Script Command called "Client Script Command Bug" with the followingShow iFrame of related List inside of Blueprint Transition
Hey, is it possible to show an iFrame of a related list like this inside of a Blueprint transition?Lookup Fields not Converting
I manage holiday properties. I have a lookup to the Accounts (Properties) in the Leads module. The lookup is connected to the property address field. When I convert it the lookup field does not update in Deals, although the property address does. There2024: A Year of Transformation with Zoho Forms
As we close the curtain on another exciting year, it’s time to reflect on the strides Zoho Forms has taken in 2024. From empowering businesses with advanced tools to simplifying workflows and enhancing user experiences, our updates this year were allStop selling out of stock Items.
Hi I have been using Zohobooks for a around 8 month now. I am not involved in selling process but my staff cant stop selling product which they do not hold in stock, this is a big headache for me as physical count never matches what is shown on the books.Bigin API Token Request ("invalid_client")
Hi people, I tried to connect to the API without success, I've read all of the documentation multiple time and tried just about everything. I tried to do it with Python Request module and with Postman, passing the information through both the URL parameterNext Page