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
Zoho Workflow issue
Dear Zoho Users, I have Zoho Books premium subscription, I have created a email alerts workflow for Invoices and following are the configurations for the same: 1. Workflow for Invoice module 2. Choose when to tigger - created or edited 3. Filter the triggersAccounting on the Go Series-53: Swift Transactions at Your Fingertips-Zoho Books in Your Control Center
Hello again, We’ve all had those moments where you need to get something done quickly, but the process of unlocking your phone, finding the app, and navigating through menus slows you down. Now, with Zoho Books integrated into the iOS 18 Control Center,Update on PDF Download Issues Caused by Antivirus Software
Hello users, Antivirus software is designed to protect your computer from malicious software and threats. However, they may mistakenly identify legitimate files and software as threats at times. This is known as a false positive. We have received reportsAccounting on the Go Series-54: Effortlessly Find Your Zoho Books Customers in Your Phone’s Contact List
Hello Zoho Books users! How are you all ? We’re happy to share a handy new feature in Zoho Books mobile app. Now, you can access your Zoho Books customers right from your phone's contact list, making it easier to stay connected on the go. How this canIntegration of Phase 2 -e-invoicing- KSA
Zoho Team, I want to get a training of integration of phase 2 invoicing KSA in zoho step by step.I can not save new invoice
Hello Now I am trying to save a new invoice but I can not save it because showing unpaid invoice warning which are not overdue. Please let me know how to skip unpaid invoice warning letter and save new invoice. Thank youADD CONDITIONS FOR FIELD IN ZOHO BOOKS TEMPLATE CUSTOMAZATION
HELLO I WANT TO ADD CONDITIONS FOR FIELD IN ZOHO BOOKS TEMPLATE CUSTOMAZATION FOR SALES ORDER . I HAVE SET %StatusStamp% IF APPROVAL I WANT THAT TEXT TO BE DISPLAYED WITH GREEN COLOR OTHERWISE OF OTHERR STATUS RED COLOR AS SHOWN IN CODE BELOW . BUT ITAccounting on the Go Series-55: Seamlessly Add New Vendors While Creating Transactions from Scanned Documents
Hi there! We’ve made handling documents and vendors in Zoho Books even simpler. Now, when you upload a document and scan it, if the app detects a vendor that isn’t already in your organization, you don’t have to leave the page to add them manually. WithAccounting on the Go Series-57: Effortlessly Add and Manage Bank Accounts from the Zoho Books Mobile App
Hi all, Great news for our users in the US and Canada! Managing your finances just got a whole lot easier. Zoho Books has always made it seamless to integrate bank accounts and fetch feeds automatically. Now, we’re taking it up a notch—directly from theAccounting on the Go Series:58-Effortless Compliance: Download XML for Invoices & Credit Notes on Mobile
Hi there! In Mexico, XML files are crucial for electronic invoicing and fulfilling SAT (Tax Administration Service) requirements. These files ensure your transactions are accurately recorded and tax-compliant. Now, you don’t need to rely on the web appAuto Generated Invoice number YEAR
Auto Generated Invoice number shows transaction year as 25 even though it's 24 still.Books generiert keine valide XRechnung
Hallo zusammen, ich möchte hier ein Problem ansprechen, das mir aktuell bei der Nutzung von Books erhebliche Schwierigkeiten bereitet, und hoffe auf Austausch oder Lösungsansätze von anderen Nutzern. Bei der Erstellung von XRechnungen mit Books tretenWHEN UPDATE ORGANIZATION INFO OLD INVOICES ALSO CHANGE INVOICING DATA
Hi We have updated our tax information because we have become a company, up until now we were an individual. The problem is that when updating the data in the zoho books profile all the old invoices change their tax information as well. Is there a wayInvoice import error - duplicate customer name column - there are no duplicates
It is not allowing the importing of any rows because of a duplicate customer name problem, but there are no duplicates in the custoemr name row. Has anyone dealt with this issue before?[WEBINAR][Feb 2025] Automate your entire financial operations from receipts to reconciliation with Zoho Books & Zoho Expense integration
Hello there, We are hosting a free, live webinar on the importance of travel and expense management solutions for businesses, and how Zoho Expense automatically syncs with Zoho Books to simplify your accounting even further. The webinar is on FebruaryCustomize Layout
I am using "Customize Layot" for customize Quotation template but I try to add logo into the header by "%ScaledLogoImage%" code but dont add logo into header. what is problem?Problem - cant add Users (i.e. Zoho one / CRM Users) to BCC or CC in email, i.e. Sales orders or Retainers
I can go to zoho books email templates, and select any email template, and automatically include any Zoho One user, i.e. member of staff. However in the context of sending an email, it will not let us add a member of staff from the user list, insteadUK MTD ITSA
UK Making Tax Digital for Income Tax I have had notice this is to apply from April 2026. What is Zoho doing about this? I will need to start planning to implement this in the next months so need an update as to what I will and will not be able to do inPartial refunds
I am trying to process refund for a one item invoice, however the refund is partial: i am getting this error while creating credit note, can anyone share some wisdom about thisZoho Books Roadshows are back in the UAE!
Hello there, Business owners and accounting professionals of the UAE, we’re coming to your cities! FTA accredited Zoho Books is now officially one of the Digital Tax Integrators in the UAE. With the newly launched direct VAT filing capabilities, we'reNew user After moving over from QBO
New user observations/suggestions. QBO took away a lot of features I was used to with the desktop version. Chaos ensued. Zoho Books has a lot of what I was used to and a bit more. Good deal Some things I have run into and suggest some upgrades. 1: TheSole Trader - Financial Advisor (Appointed Representative) - Paid via Capital Account but no Invoicing...
Hi. I'm about to venture into a new business after 12 months of intensive learning/exams. A little chuffed if I may say so especially at 52! I really like the look of ZoHo Books for my modest enterprise but I'm in need of some guidance, please. My servicesMulti-Unit Inventory with Flexible Unit Selection (Purchase in One Unit, Sell in Another)
We need multi-unit inventory management in Zoho Books with the flexibility to choose units (e.g., Box or Piece) at the time of purchase or sale. For example, if 1 Box = 10 Pieces, we should be able to record purchases in Boxes but sell either in BoxesDisputed Purchase Invoices
We have recently moved to Zoho Books from Sage. In Sage we were able to post a purchase/vendor invoice but mark it as on dispute. This would usually be a pricing query or if something was damaged. It would show in their ledger, so we could agree theirNo TDS Deduction
In some of our case, where we are reselling items at the same rate we purchased. In this scenario, Indian IT Law has a provision to request customer not to deduct TDS if the transaction value is same. TDS is paid by us (intermediary reseller) before weCBSA - GST CHARGES on imports
Hi there, We have a questions about landed cost categorization. We received a shipment from overseas. CBSA invoiced us for the GST on the items. Now we entered the CBSA-GST as a separate bill and attached it as landed cost to the main invoice based onZoho Books
How do I manually insert opening balance?Sales order & purchase order item links for item details
This is fantastic for checking lots of things, I use it a lot. It would be great to see it extended to invoices & bills On another note, may as well throw in my favourite whinge ..... Wish you guys would get the PO receive differences sorted urgently,Bank charges are applied. Please select a bank account.
Hello, I'm trying to add bank charges to a customer payment, but I get the error message "Bank charges are applied. Please select a bank account." I found this old thread, where it says that I need to "select a Bank account for the 'Deposit To' dropdownHow to add receipts
How to add receiptsSupport for auto-upgrade in TrueSync (for Windows)
WorkDrive TrueSync app now supports auto-upgrading to the latest version for Windows OS. You must manually download and install the TrueSync app version 3.4.0 to avail this feature. Download the latest TrueSync app for Windows (version 3.4.0) SupportedWorkDrive 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.March 15, 2023: Zoho Docs is discontinued
As of today (March 15, 2023) Zoho Docs is discontinued for all users. We would like to thank our customers for trusting us for so many years! Going forward, we're confident you'll enjoy using Zoho WorkDrive for all your advanced file management and collaborationIntroducing WorkDrive 4.0: Enhanced productivity. Advanced data administration. (Phase 1)
Hello All, We're excited to share the release of WorkDrive 4.0, which includes important new features and enhancements focused primarily on productivity, secure collaboration, data administration, integrations, and user experience. Read the official announcementAsk the Experts: Five-hour live Q&A session with Zoho WorkDrive product experts
Have questions about WorkDrive 5.0? Let’s talk! We recently launched Zoho WorkDrive 5.0, packed with powerful updates to help your team work smarter, stay secure, and get more value from your business content. From content-centric workflows and AI-poweredExternal download link limit
Can You please help us to understand this For Zoho WorkDrive external users, the download limit is a maximum of 5 GB total download size and a maximum of 50 first-level files and folders What is the meaning of first level? We are using these files inDynamically catching new file creations
I have a team folder with many subfolders, and in those folders we add new documents all the time. I'd like to have a workflow or script to notify me (and then take other actions) when a file is added anywhere in that structure that ends in "summary.txt".Rotate an Image in Workdrive Image Editor
I don't know if I'm just missing something, but my team needs a way to rotate images in Workdrive and save them at that new orientation. For example one of our ground crew members will take photos of job sites vertically (9:16) on his phone and uploadWorkflow workdrive rollout
Hi! When will workflow be rolled out to all users? Thanks.Creating and managing a Team Folder using WorkDrive TrueSync
Hello everyone, Are you tired of constantly switching between your Desktop TrueSync app and the WorkDrive web app to create and manage Team Folders? We’ve made things easier for you. You can now create and manage Team Folders directly within the TrueSyncNext Page