Kaizen #136 - Zoho CRM Widgets using ReactJS
Hey there! Welcome back to yet another insightful post in our Kaizen series!
In this post, let's explore how to use ReactJS for Zoho CRM widgets. We will utilize the sample widget from one of our previous posts - Geocoding Leads' Addresses in ZOHO CRM for the demo.
Prerequisites
- Ensure that you have installed all the necessary components required to use Zoho's CLI.
- You can use any IDE to code your widget. A few popular suggestions include Visual Studio Code, WebStorm and Atom. Download and install an IDE of your choice to get started.
Working with ReactJS
Step 1: Run the following Zoho CLI command to start a new project.
zet init |
This will display a list of services for creating a project template. Choose Zoho CRM from the list and provide your project name.
All the files that are necessary for the widget will then be available in the project directory.
Step 2: To configure this project for ReactJS, install the required dependencies by copying and pasting the following command into your terminal.
npm install react react-dom react-scripts |
These dependencies will be installed only for this project. If you want to develop another ReactJS widget, you should run this command again for that project.
Step 3: Navigate to the package.json file in the directory and add the following scripts to it.
"scripts": { "start": "react-scripts start", "build": "GENERATE_SOURCEMAP=false react-scripts build && rm -rf app && mv build app" } |
The start script mentioned here is useful during the development stage. On executing the "npm run start" command, it enables you to start the development server for ReactJS and make real-time changes to it.
Once you have completed the development, all the files that are required for rendering the widget should reside within the /app folder in the project directory. However, in any ReactJS project, when you execute the build command after development, the build files are created under a new folder named build. The build script in package.json file helps in replacing the existing /app folder contents with the files from the /build folder.
Now, add the below key-value pair as we have multiple build static files under the /app folder.
"homepage": "./" |
During production, this property will dictate the system to search for the other static files within the same (/app) folder rather than looking for them in parallel directories.
Step 4: Establish the /src folder with the required JavaScript and CSS files of your React components.
To keep this demo simple, we have used the widget code from our previous post "Geocoding Leads' Addresses in ZOHO CRM", which has been modified to React components in the App.js, index.css and index.js files.
Step 5: Create a /public folder containing static files like homepage (index.html), images and JavaScript library files that are required for the ReactJS project.
For our use case, we have created only the index.html file.
Step 6: After completing development, execute the following command to create the production build of your application:
npm run build |
Since we modified the scripts in the package.json during our earlier steps, the production build will be available in the /app folder instead of the /build folder.
Step 7: To run the project locally, use the following command:
| zet run |
Step 8: Validate your ReactJS widget project with the following command:
zet validate |
This command checks if the project adheres to file and size limitations.
Use the following command to pack your project for uploading it to Zoho CRM.
zet pack |
The ZIP file can be found under the /dist folder of your project.
Step 9: When uploading the ZIP file to Zoho CRM, remember that for a typical widget, the index page is usually named /widget.html. However, for ReactJS projects, it must be named /index.html.
Now, let us go check this widget from the Leads detail page for the results.
Zoho CRM widgets can be built using any of the client-side frameworks and this sample configuration is almost common to most of them.
We hope you found this post useful and engaging!
If you have any queries, feel free to drop them in the comments section below or reach out to us directly at support@zohocrm.com. We eagerly await your thoughts and feedback on this!
Keep an eye out for future posts packed with similar content!
Cheers!
----------------------------------------------------------------------------------------------------------------------------------------
Recommended Reads
- Zoho CRM Widgets -Overview, CLI Installation, Creating a Widget, Kaizen #23
- Widgets in Blueprint - Kaizen #95 How is a Widget used in a Blueprint?
- Related List Widget - Kaizen #114 Geocoding Leads' Addresses in ZOHO CRM
----------------------------------------------------------------------------------------------------------------------------------------
Join us for our upcoming Zoho CRM Developer Series: Zoho CRM APIs, where you can explore more about Zoho CRM APIs. Register Now!
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
Kiruthiga G
Vigneshwaran K
Marco Mogliani
Maxime Bory
Sriram U
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
YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.
YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.Is or will be possible to associate meeting transcription and summary, made by Zia, to meeting/contact/account record in CRM?
Would be useful to keep context and track jobs, better if it will be autoDesk Field Not Showing in Analytics
Hi there, I recently added a field to our Zoho Desk Ticket Information. I went and added the data retrospectively to the tickets. It is also marked as required, so all new tickets cannot be closed off without it being filled in. When I try to run a reportExport data using advanced export options and customizable settings
Hello everyone, The user interface for exporting data has been revamped with updates to make data exports more flexible and efficient for users. These updates not only enhance usability but also bring advanced capabilities to help users extract preciseMoving data from one pipeline to another
Hey all, I've got some complex pipelines to build and I'd like to seperate them into seperate pipelines rather than have one mammoth one. If I create 2 pipelines, is there any easy way to use the output of Pipeline1 to be the input into Pipeline2? OrHow to export/find all deluge code.
Hi, I have a large app wich contains several forms, reports, html views, I need to find thow my application if any contains specific word, I could find it manually by editing app and see on every section(field code, on succes, on load, etc) but I would like to do it faster. Is there a way to at least export it to a file the whole deluge code on my application?Have Some Bugs in Zoho CRM Ask Zia Assistant
Hi Support Team, I have found some bugs in Zoho CRM Ask Zia Feature Please Check below screenshot, insight option is showing twice i think its in early access that's why its have some bugs .COD with Partial payment
Two reasons why we need COD with partial payment option. 1) Since we deal heavy weight products our shipping costs are too high. If shipment is rejected by customer we incur huge loss. 2) Some competitors place fake orders with different names and returnSlicers are now available in Zoho Sheet—filter your data interactively
At Zoho Sheet, we diligently track user requests and feedback. In line with this, based on extensive user requests, we've integrated Slicers to pivot tables and are delighted to announce its release. Slicers are interactive visual filters that have add,Resizing a Record Template Background Inage
Hi everyone, I have an issue which I can't seem to resolve: Basically, I'm designing a record template in certificate form. I've specified A5 landscape. I've set my background image the same dimensions with total pixels at 443,520. Whatever I try, whenUpdated font library: New font styles and custom font options in Zoho Sheet
Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you canIntroducing Data Bars: Graphically represent changes in data within the cells
Conditional formatting has helped millions of spreadsheet users analyze and highlight their data more efficiently. In addition to the classic rules, color scales, and icon sets available in Zoho Sheet, you can now apply Data Bars, a convenient methodDefault Font Size in Desk
How do I set my default font size in Desk? It takes me about 45 minutes to find the place to set it, then, when I sign out of Zoho and log back in, it's back to font 10 again. Seems like this would be simple, but like everything with Zoho, it's buriedTip #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 sampleTip #20 - Three things you probably didn't know you can do with picklists
Hello Zoho Sheet users! We’re back with another quick tip to help you make your spreadsheets smarter. Picklists are a great tool to maintain consistency in your spreadsheet. Manually entering data is time-consuming and often leaves typos and irregularPer Level Approval for admins
We need Process admins like Zoho CRM in Zoho Books for per stage approval Currently in books, admins only have the option for Final Approval But for example, in cases like when an employee is on leave, we can't just approval one level we only have optionCUSTOM FUNCTION GIVE ERROR #EVAL!
CUSTEM FUNCTION CREATE KYA ZOHOSHEET ME US FUNCTION KO USE KIYA LEKIN DATA TO SAHI HAI LAKIN DATA SHEET ME NAHI LAG LAHA HAI KRUPYA SOLVE KARE MY CODE IS float ADDTWO_TWO(float NO1, float NO2) { ADD = NO1 + NO2; return ADD; }Need to set workflow or journey wait time (time delay) in minutes, not hours
Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integerIntegrate Projects for Desk KB article release tasks
Could you please look into the possibility of integrating project tasks for Zoho Desk article release processes? We are looking for an internal integration between Zoho Projects and Zoho Desk's KB article drafting, reviewing and releasing tasks. We couldFeature enhancement: Highlight rows based on a cell value
Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to drawShortcut to fill a range of cells
Good evening: I'm writing because I haven't been able to find a feature that allows you to select a range of cells, type in one of them, and then use a key combination to type in all of them. In Excel, the keyboard shortcut is Ctrl+Enter. I haven't foundDetect and ignore bots in visitors
The SalesIQ visitor numbers are basically useless to us because there is no bot detection. We get the same bots coming in from the same countries looking at the same pages every day. It can't be that difficult to tell the difference between an actualUpdating custom fields in Zoho Projects
Hi I am wondering if anyone has experience with custom fields in Zoho Projects. I am struggling to update the field using either deluge or the api endpoint. My code is: //custom_Map = map(); custom_Map = {"UDF_DOUBLE_1":"0.27"}; update_Map = map(); update_Map.put("custom_fields",custom_Map.toList());Markdown for Desk?
Hi, my company wants to use markdown for formatting text in Desk (in all modules there, especially Tickets and Helpcenter). Zoho already offers use of markdown in several products (see https://help.zoho.com/portal/en/kb/backstage/microsite-guide/formatting-with-markdown/articles/formatting-with-markdo)Change Currency symbol
I would like to change the way our currency displays when printed on quotes, invoices and purchase orders. Currently, we have Australian Dollars AUD as our Home Currency. The only two symbol choices available for this currency are "AU $" or "AUD". I wouldCalendar not working
Are we the only ones. On any browser we cannot click on any of our calendar appointments and get them to open. They just make the browser loop. WE have reached out and have been told they are working on it. The office staff are really stuck. The pointTip of the week #16 - Search and filter threads based on criteria
Zoho TeamInbox lets you search and filter threads with any information that you have about the thread. You just have to input the criteria and Zoho TeamInbox will list all the threads that match the condition. Firstly, there is a global search you canWhatsApp Message Template Quick Reply Buttons
Hello, I created my first Message Template to overcome the 24-hr messaging window and it was approved by WhatsApp/Meta. When I go to Meta, I also see that template brought from Zoho Desk, and used it via Zoho Desk IM. However, I notice that when in Meta'sAccount in Quick View Filter
I have a report that I often run against a specific Account. Every time, I have to go into the edit menu and change the Advanced Filter. I would prefer to use the Quick View Filter, but it does not allow me to use the one and only field that makes anyAll 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. Latest updateCollapsible Sections & Section Navigation Needed
The flexibility of Zoho CRM has expanded greatly in the last few years, to the point that a leads module is now permissible to contain up to 350 fields. We don't use that many, but we are using 168 fields which are broken apart into 18 different sections.Set Display for Numbers/Currency/etc with Client Script/Customization in Canvas List Page
Is it possible to set a display mask for a number/currency field using Client Script or customization? I have custom fields that I would like to keep the decimal places for calculation purposes, but do not need them displayed to the user. So 101.3568136.143.188.51 blocked by spamcop
Zoho mailserver seems to be blocked by spamcop. Cant send mail to my customer. Not sure what to do.🚀 WorkDrive 5.0: Evolving from a file sharing app to an intelligent content management platform: Phase 2
Hello everyone, WorkDrive's primary focus has always been to provide an intelligent and secure content management platform, simplify collaboration, and be the central repository of files for all Zoho apps. In our previous announcement, we unveiled theSync desktop folders instantly with WorkDrive TrueSync (Beta)
Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:i keep see there is a connetion issue connecting 3rd party api on zoho when using zia
hi there , i have set up open ai api to zoho zia (copied and pasted to zoho zia) but I keep getting notificaiton "there is a connetion issue connecting 3rd party api on zoho" when using zia on top when click zia and try to type in word thereTime Entries in Analytics
I am trying to import a zoho sheet into zoho analytics. In my sheets one of the columns has "time Entries" in this "format HH:MM am/pm" example 11:00 PM. After import, i noticed that analytics converted the time to "00 Jan 1900 23:00:00".. how do i maintainDeleting Fields in CRM Deletes Views in Analytics
Hey friends! I'm having some issues when we modify some fields within ZohoCRM. There are times where we need to sunset a field and eventually completely remove it. In these instances, it seems like a lot of views are removed in Analytics. This rangesBooking outside of scheduled availability
Is there a way for staff (such as the secretary) to book appointments outside of the scheduled availability? Right now to do this special hours must be set each time. There should be a quicker way. Am I missing something?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 theseNext Page