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
Top Menu Disappeared from Blog Page
Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.Managing Prepaid Hours for Consulting
We are a consulting firm that bills clients a flat upfront annual fee plus an hourly rate and offer a discount for pre-paying a block of hours. Hours that surpass the pre-paid block are billed monthly at the normal rate. If there are any pre-paid hours remaining at the end of the project they are banked for future use. I'm not seeing a method of doing this in Projects/Books/CRM... thoughts?ZOHO Widget SDK not loading in html
I have this code below, I have imported the widgetsdk however I get the error shown in the image, I have tried many different ways of importing and initiating the function ZOHO but nothing is working. can someone explain what I'm doing wrong, if I amEnhancements to Zoho Corp Help Center "Team Requests" View
Dear Zoho Team, I hope this message finds you well. The ability to view both my tickets and my team’s tickets in the Zoho Corp Help Center is a fantastic feature, especially as the focal point for Zoho in our organization. However, we’ve encountered aAllow Multiple Scheduled Appointments with Zoho Support
Dear Zoho Team, I hope you're doing well. First, thank you for introducing the option to schedule support calls via the Zoho CRM booking link. This has been a fantastic enhancement, eliminating the need for back-and-forth coordination when schedulingProjectwise budget ---
Can we have a Project wise subject in addition to the Monthly, and quarterly ACCOUNT LEVEL budget?WorkDrive API Documentation
WorkDrive provides users and developers an extensive set of APIs to help integrate functionalities of Zoho WorkDrive with other Zoho applications and third-party tools. We have published the official WorkDrive API Documentation page for all external users.Error 403: Forbidden When Updating Email Signature via API
Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 ForbiddenWho can see draft replies on tickets?
We have noticed that we are able to see draft replies made by other agents. Which settings can limit this visibility? It makes sense to me that admins and the agent who created the draft would be able to see the draft, but no one else. How can we makeSerious question: Are there actually "solo-preneurs"/small business owners who made Zoho-one work well for them?
L.S. After already many years of continued struggle with Zoho-One, I am seriously wondering if there are actually solo-preneurs (one person small business owners - without a large, dedicated IT dept.) who got it (Zoho-One) to work well for their businesses.Major iOS issues when accessing forms via the browser
Hi, We have been using forms for some time, while the office staff are accessing the forms via the app on Android mobiles, we have a fleet of sub contractors that we would not like them having access to the main app as some of the forms are confidentialAll notes disappeared
I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?
Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number ofHow to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?
Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number ofWork Orders / Bundle Requests
Zoho Inventory needs a work order / bundle request system. This record would be analogous to a purchase order in the purchasing workflow or a sales order in the sales cycle. It would be non-journaling, but it would reserve the appropriate inventory ofZoho Books API Limit Is RIDICULOUS!!!!!!!!!!!!!
The 2,500 API call limit in Zoho Books is about as useful as AOL dialup. Seriously Zoho, not only can I use up 2,500 API calls in no time with my own app but YOUR OWN STUPID IPAD APP blows through them super fast too, so if any one of my clients wantsQR codes in templates
I'm excited about the new QR code generator. I have included a QR code that contains the record ID setting "${ID}" as input data. In the report detail it works perfectly but when printing it in a template the code is not shown.Button Display Conditions
Hi Guys, Is it at all possible to have extra button conditions? Context: We have data in our deals module which has a custom button which converts the deal into contacts + set up relationships between them. At the end of the conversion we set a fieldKnowledge base: The nitty-gritty of SEO tags
A well-optimized knowledge base with great SEO can benefit your company by allowing customers to find help articles and support resources using search engines. This enables customers to quickly and efficiently find the information they need without directSocial Media Simplified with Zoho Social: Make the best out of the publishing calendar
Are you a marketer who likes visualizing your plan of action before you start social media posting? Are you part of a team that works on social media on a rotational basis, so the most important task is to collaborate to avoid overlap and confusion? OrCustom function daily limit and procedural programming
Dearest Zoho Today, support confirmed that if I call a custom function from another custom function then I will use up two, with regards to my daily limit. A few times, we have blown our daily limit and that means that ordinary business processes don't run for the rest of the day. I have to mop these up the following day and there is no guarantee that I will get it right. Therefore, I can't afford to waste any. Procedural programming has been around for over 50 years now and it greatly simplifiesUnified customer portal login
As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is thatWelcome Link Expired
Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>New enhancements: Changing portal users' email addresses and new customization options for templates
Dear All, Portals have enabled organizations to extend access to various CRM modules to their customers, vendors, partners, and end users, per their business requirements. When a portal is created, an invitation email is sent to portal users with a linkGranular Time Frame Settings for Message Deletion and Editing in Zoho Cliq
Dear Zoho Team, I hope you're doing well. Currently, the settings for message deletion and editing in Zoho Cliq are configured globally under: Admin Panel > Organisation > Configurations > Conversations Delete messages: Time frame to allow message deletionNew Built In QR/Barcode Generator Print Settings
I'm trying out the new QR/Barcode generator field in Creator. I would think most people will want to print these, like I do. I am not seeing any way to control the height or width of the barcode for printing (inside the print/pdf template builder). TheZoho One. Client Script
Hi, I would like to know if the Client Script feature is available in Zoho One. If it's, how can I enable it?Calendar View for Zoho Tickets
Is there a way to view your tickets with due dates on a calendar view? I can not find a way to merge my Zoho Calendar and Tickets. This would be extremely helpful to my team.Delete / Modify Default Career Site - Zoho Recruit
Hello, It would be very useful if we could delete a default career site or change which of our career site is the default. Our Career site was created when there were issues with Zoho Recruit creating English CTA buttons on French Career sites. The onlyWorkflows for Timesheet
Good day, Any way to have timesheet as triggers? I looked into Zoho Flow and into Zoho Project automation but no where can I have timesheet as a trigger. Basically, I would like to trigger something upon timesheet approval. Right now, the only way toIs it possible to hide Developer Space for all user in Zoho Projects
Hello! I am Zoho admin in a company and we want to use Zoho Project to manage projects, but after a few days of testing we are not able to "hide" the Developer Space from all kind of users except the admin. To sum up, I want to hide this for all users.Introducing automation and utility conversations in WhatsApp marketing
We’re excited to announce the addition of two new features to our WhatsApp integration: Automation and Utility conversations. These enhancements will allow you to streamline your marketing efforts and engage with your customers more effectively by automatingExtracting data from cells in zoho sheets for zoho books
I am currently uploading my bank statment in excel format to zoho workdrive. I would like flow to extract certain data and send it to zoho books. Would scripting in zoho flow be able to help me with this? By this I mean should I attempt this in zoho flowWithin the Basic KPI component in Analytics, it is impossible to set "next" day range as a filter
Hi there, I am currently setting up a deal dashboard for the Sales team. While it is possible to filter deal records to show records that were created LAST X days only, it looks like a NEXT X days Closing date filter is not available. Would it be possiblePulling Specific Products from Sales Orders in Books to a CRM Record
We currently process orders directly through our website (woocommerce) as well as through manual sales orders in zoho books. When an order comes through the website, all of the individual products from that order show up in the CRM record of that customer.Você já viu os cursos do Zoho Mind?
Pessoal, Tem uma plataforma da Zoho chamada Zoho Mind, muito interessante os cursos e vídeos tutoriais que lá possui. Para a turma do Zoho Creator, tem uma dica de Buscar dados em Formulário, segue o link e clique em Zoho Creator. https://www.zohomind.com.br/#/videostutoriaisComo gerar gatilhos para pagamento de impostos no Zoho Books?
Olá Pessoal, boa tarde! Gostaria de saber como vocês estão escriturando os impostos a pagar no Zoho Books. Vi que temos a opção de Bills, porém se eu escriturar nesta aba do Zoho Books para gerar lembretes de tempo de vencimento por exemplo vai refletirSubform Time field to string.
Good afternoon All. I have a Subform 'Delivery_Receiving_Hours' that captures Day (Dropdown), Time_Open (Time), and Time_Close (Time). I need to capture this data and send it to a multiline field in the CRM. The code, posted below, below will captureworkflow for bounced email gets triggered, but email is status = opened
Hello, I have a workflow that sends me an email if outgoing email are bounced. Now I got some kind of this emails, but the corrosponding contacts have status = open at the email. Why this bounce-workflow is triggered? Reports > Email Reports > BounceData export
I need to export our customer's data and projects' data for our purpose but am unable to export full data i only get around 3160 projects and around 2k customer can you please help me to get full data, pleaseNext Page