Flyouts in Client Script
Hello everyone!
Welcome back to another exciting edition of our Kaizen series, where we explore fresh insights and innovative ideas to help you discover more and expand your knowledge!In this post, we'll walk through how to display Flyouts in Client Script and break down the key differences between Flyouts and pop-ups in Client Script, including when to use each one.
In this Kaizen post,
1. What are Flyouts in Client Script?2. Flyout- ZDKs and functions in Client Script3. Use Case4. Solution4.a. Create a Widget for EMI Calculator.4.b. Create a Client Script to render the Widget as Flyout.5. Difference between flyout and popup in Client Script6. Summary7. Related links
1. What are Flyouts in Client Script?
Flyouts are floating User Interface that can be moved around and controlled using Client Script. Widgets can be used to render a flyout. The flyout can run independently, and any Client Script can communicate with it.
2. Flyout- ZDKs and functions in Client Script :
- createFlyout(name, config) - Creates a flyout. You can specify the heading, dimensions, and animation type using the config parameter.
- getFlyout(name) - To Fetch the details of a flyout.
- open(config, data) - Opens the created flyout.
- notify(data, options) - Notifies and waits for data in a flyout. The options can be wait: true (Client Script execution will wait for a response from the widget) or wait: false - (Client Script execution will not wait for a response from the widget)
- close() - Closes the active flyout.
Click here for more details about the ZDKs and functions related to flyouts.
3. Use Case :
Sales Advisors in a Finance Consulting Company regularly rely on an EMI calculator to help customers with loan queries. To improve their efficiency and eliminate the need to switch between different windows, the admin manager intends to integrate the calculator directly into CRM. The EMI calculator should appear on the Create Page of the Loans module and remain active until the user closes it.
4. Solution:
To achieve this in Zoho CRM, we can use Widgets to create an EMI calculator and render them using flyouts in client script whenever the create Page of Loan page loads.
4.a. Create a Widget for EMI Calculator
Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- <link rel="stylesheet" href="style.css" />
- </head>
- <body>
- <div class="loan-calculator">
- <div class="top">
- <h2>EMI Calculator</h2>
- <form action="#">
- <div class="group">
- <div class="title">Amount</div>
- <input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
- <div class="slider-label">$<span id="loanAmountValue"></span></div>
- </div>
- <div class="group">
- <div class="title">Interest Rate</div>
- <input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
- <div class="slider-label"><span id="interesRateValue"></span></div>
- </div>
- <div class="group">
- <div class="title">Tenure (in months)</div>
- <input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
- <div class="slider-label"><span id="tenureMonthValue"></span></div>
- </div>
- </form>
- </div>
- <div class="result">
- <div class="left">
- <div class="loan-emi">
- <h3>Loan EMI</h3>
- <div class="value">123</div>
- </div>
- <div class="total-interest">
- <h3>Total Interest Payable</h3>
- <div class="value">1234</div>
- </div>
- <div class="total-amount">
- <h3>Total Amount</h3>
- <div class="value">12345</div>
- <div class="right">
- <canvas id="myChart" width="400" height="400"></canvas>
- </div>
- </div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
- <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
- <script src="main.js"></script>
- </body>
- </html>
- Click here to view the complete code.
- Once you have added the code, upload the zip file by following the below steps.
- Go to Setup > Developer Space > Widgets.
- Click Create New Widget and Fill in the details.
The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.
Note:
The widget should be of "button" type in order to render through a Client Script.
4.b. Create a Client Script to render the Widget as Flyout
Configure a Client Script for Create Page(Standard) Loans module, that triggers during onLoad event as shown below. Click Next. Click here to know how to configure a Client Script.
Enter the following script and click Save.
- ZDK.Client.createFlyout('EMIFlyout', {
- header: 'EMI Calculator',
- animation_type: 1,
- height: '400px',
- width: '450px',
- close_on_exit: false
- });
- ZDK.Client.getFlyout('EMIlyout').open(
- { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
- { data: loanDetails }
- );
In the above script, createFlyout() will create a new flyout with header.
Below is the syntax and parameter detail.
Now Open the flyout and render the Widget in the flyout using open() method and specify the api_name of the widget.
Here is how the Client Script renders the flyout.
5. Difference between flyout and popup in Client Script
Flyout | Pop up |
A flyout can be moved around the page. | A pop-up cannot be moved anywhere on the page. |
It can run independently in a separate thread. The user can interact with the background interface without closing the flyout. | The user cannot interact with the background without closing the flyout. |
Use flyouts, when you need to exchange data to and fro between a Widget and Client Script. You can use ZDK.Client.sendResponse() to pass data from a widget rendered as a flyout to the Client Script. | Use popup, when you need to interrupt the screen to gather input from the user or display a message before proceeding. Use $Client.close() to pass data to the Client Script, which will also close the popup. |
In the scenario discussed in this post, if you want to make it mandatory for the user to read or interact with the EMI Calculator before entering any value in the create Page(Standard), then you can use pop-up instead of Flyout. Both pop up and flyout can be used to display widgets, and their dimensions can be altered.
Refer to this post to know how to render widgets as pop up using Client Script.
6. Summary
- In this post, we have seen,
- Flyouts in Zoho CRM.
- ZDKs and methods to render a Flyout(Widget) using Client Script.
- When to use a Flyout and when to use a pop up.
7. Related Links
Previous Post: Kaizen #156 -Enhancing Mass Communication in Zoho CRM with a Custom Button Widget | Kaizen Collection: HomeAccess 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
Maadhari M
Jeremy Nagel - www.smooth.tel
Sticky Posts
Kaizen #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.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 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.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! Commands
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
Option to block bookings from specific email address or ip adresss in zoho booking
Sometime few of our client keep booking irrelevant booking service just to resolve their queries and they keep booking it again and again whenever they have queries. Currently its disturbing our current communication process and hierarchy which we haveFeature Request: Email Templates for notifications accross all services
Currently in Zoho Bookings, email notifications (such as booking confirmations, reminders, and cancellations) must be customized individually for each service. This becomes time-consuming and error-prone when managing multiple services that require consistentAllow customers to choose meeting venue and meeting duration on booking page
My business primarily involves one-to-one meetings with my clients. Given the hybrid-work world we now find ourselves in, these meetings can take several forms (which I think of as the meeting "venue"): In-person Zoom Phone call I currently handle theseApproval-based booking with Zoho Creator and Zoho Bookings
Hi community members, We have developed a workaround for approval-based booking using Zoho Creator and Zoho Bookings! This provides a temporary solution as we work on the native feature, and it's useful for anyone needing an approval workflow when confirmingMember Accounts in Related List
Hi Team, Currently, when a parent account is associated with an account in FSM, there is no related list displaying the associated member accounts under the parent account’s related list section. To view member accounts, I have to manually search usinghow do i remove a specific Zoho Service from my account
I no longer need Zoho CRM, ZRM Assist nor ZRM BugTracker. How do I remove them from the list of apps for my account?I Want migarte all invoice details to zoho sheets
I want to migrate all existing invoice details to Zoho Sheet, and automatically update the sheet whenever a new invoice is created.were can i find my invoices i need this for my accountant
were can i find my invoices i need this for my accountant, how can i get id direct to my email?ONLY email field not populating Writer fillable document (randomly)
I have a Zoho Writer fillable document that has pulled all my data from my Zoho Sheets file, EXCEPT the email column. It pulled every data before and after that column with no issues. Screenshots attached. It's not my first time using the app or the feature,My number is marked as spam
Hello Zoho Mail Support, My phone number was incorrectly flagged as “spam” during sign-up. This is my personal number, and I have not engaged in any spam activities. Kindly review and verify my account so I can proceed with my email setup. Thanks.Personnalisation des paramètres dans Zoho Mail
Pourquoi cela compte-t-il ? La personnalisation des paramètres dans Zoho Mail permet aux administrateurs de configurer l’environnement de messagerie en fonction des besoins spécifiques de leur organisation. Que ce soit pour alléger l’interface pour certainesHow To Save Data Into Zoho CRM Sandbox
Hi Community, I want to save data into my zoho sandbox , for this I am using this api endpoint - https://www.zohoapis.com/crm/v8/Patients but I am getting this error - { "success": false, "message": "Zoho API request failed", "error": { "code": "INVALID_MODULE",Automate pushing Zoho CRM backups into Zoho WorkDrive
Through our Zoho One subscription we have both Zoho CRM and Zoho WorkDrive. We have regular backups setup in Zoho CRM. Once the backup is created, we are notified. Since we want to keep these backups for more than 7 days, we manually download them. TheyQuestion about retrieving unsubscribed contacts (outside of lists) via API
Hello, I am currently using Zoho Marketing Automation and would like to integrate it with our company’s core system. For this purpose, I am exploring the API options available to retrieve contact information. Specifically, I would like to know if thereGetting “mandatory field missing: Service_Line_Items” When Creating Work Order via Zoho Flow Deluge
Hi Team, I’m trying to create a Work Order in Zoho FSM with only a Service Line Item (no Parts). However, I keep getting this error: Work Order Response: {"code":"MANDATORY_NOT_FOUND","details":{"api_name":"Service_Line_Items"},"message":"required fieldHow to customize the colors of the Client Portal login screen and add the company logo?
As title, how to customize the colors of the Client Portal login screen and add the company logo?Daily updates/fixes and how to see what was changed?
When I receive the notification that zoho was updated and I need to refresh it. How can I see what was changed or fixed? Sometimes they change things that effect my books and I need to know what they did. For example over this past weekend something wasUpcoming Change: Snowflake Username/Password Authentication Deprecation – Action Required
Hello Users, Snowflake has officially announced that username and password-based authentication will be deprecated by November 2025. You can find the official announcement [here]. If you're using a Snowflake connection in Zoho Analytics to import data,Why should I choose Zoho Inventory vs Odoo?
Hello there! I have used Zoho in different companies I've worked in, and I have a positive perception of it. I am starting a new import business for pipes, tubes, fittings, valves, elbows, etc., which all have serial numbers, cast numbers, etc., so IProduct Updates in Zoho Workplace applications | July 2025
Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this July. Zoho Mail Import bookmarks from Pocket Worried about losing your Pocket bookmarks? Don't worry we have got you.PLEASE FIX YOR BUGS
PICTURES ARE BEING REJECTED DESPITE THEM FOLLOWING THE GUIDELINES ON DIMENTIONS.Kaizen# 204 - Answering Your Questions | Perform Field Updates before Blueprint transition via Client Script
Hello everyone! Welcome back to another exciting Kaizen post. One of the questions we received through your Kaizen feedback was: “How can I update fields before Blueprint transition and how to prevent a transition based on a condition using Client Script?”Create online meetings for Booking Pages with Zoho Meetings and Zoom
Greetings, We hope you're all doing well. We're excited to share some recent enhancements to Bigin's Booking Pages. As you know, Booking Pages let you create public pages to share your availability so that your customers can easily book time slots withFilters in audit logs
Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to Bigin. We'll go over each one in detail. Previously, there were no filters available to narrow down data in audit logs. Now, we've introducedEnhanced help options in Bigin
Greetings, We're excited to introduce a new enhancement to Bigin's Help section: a comprehensive Help Options panel that brings together all your support resources in a single, well-organized space. Previously, the Need Help? menu provided only a limitedZoho FSM API Developer Needed
Hi, I’m looking for a developer with experience using Zoho FSM APIs. Scope: Connect WordPress website booking form to Zoho FSM Check availability (date, time, region) Create Work Orders + Service Appointments automatically Notify both customer and schedulerRevenue Management: #4 What if there are uncertainties in project or service delivery?
Our previous post taught us how Zoho Billing makes life easy for businesses with its automated revenue recognition rule. However, certain businesses have more challenges that an automated system cannot handle, and there are certain situations where automatedThis mobile number has been marked spam. Please contact support-as@zohocorp.com
Bom dia, estou tentando colocar o número 11 94287-6695 e esta com erro "This mobile number has been marked spam. Please contact support-as@zohocorp.com" pode me ajudar, por favor?Feature Request: Ability to Set a Custom List View as Default for All Users
Dear Zoho CRM Support Team, We would like to request a new feature in Zoho CRM regarding List Views. Currently, each user has to manually select or favorite a custom list view in order to make it their default. However, as administrators, we would likeItems Serial Tracking Issue
We enabled Zoho Items inventory tracking then disabled it after some time now we want to enable it again When I check the missing serial number reports I see one item But I cant see any option to Add the serial numbers Where and how to add the serialComposite Services and Account Tracking
I am looking to garner support/request the ability to make composite services. A quick search in the forums brings up multiple requests for this feature. I fail to see why an item is mandatory while services are optional. I also would like to see theZoho Payroll integration with Zoho Books - unable to match multiple bank feeds to one wage payment
For one employee's wage, I make two partial payments. Those bank feed transactions come into Zoho Books via bank integration. I make one pay-run for the month in Zoho Payroll and that comes into Zoho Books via the Zoho integration. Zoho Books doesn't let me match multiple bank feed transactions against a single wage item. Please fix urgently. I can't complete my books because of this.Add Checkbox Selection & Bulk Actions to Delivery Challans Module
Hi Zoho Team, I’ve noticed that in the Sales Orders module, there are checkboxes beside each entry that allow users to select multiple records for bulk actions such as print, email, or delete. However, in the Delivery Challans module, this option appearsCan't be able to check-in in laptop
even after giving location access still i can't be able to check-in in laptop.Compensation Cess on Coal ₹400 per tonne. ?????
The compensation cess rate varies by the type of product. And the cess is calculated based on the value of the product without GST. Coal, for example, comes with a cess of ₹400 per tonne. That means that if you sell 2 tonnes of coal that have a value7 month over zoho book purchase but still not immpliments Golive
7 month over zoho book purchase but still not immpliments Golive one problems zoho team short out then other problems come still very poor mangments and immliments team . struggling with the templates in ZOHO Books. Especially with the placement of someAverage Costing / Weighted Average Costing
Hello fellow maadirs. I understand Zoho Books uses FIFO method of dealing with inventory costing, but do you guys have any plans to introduce average costing? We indians need average costing. It's part of our culture. Please. I beg thee. Thanks.SMS to customers from within Bigin
Hi All, Is there anyone else crying out for Bigin SMS capability to send an SMS to customers directly from the Bigin interface? We have inbuilt telephony already with call recordings which works well. What's lacking is the ability to send and receiveHow to update/remove file in zoho creator widgets using javascript API
Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord APIParent & Member Accounts (batch updating / inheritance)
Hello, I find the Parent Account functionality very useful for creating custom views and reports, but was wondering if I can also carry out batch editing on all members (aka children) of a Parent Account at the same time. Alternatively, can I set members to automatically inherit the values of the parent? For example: We have a chain of supermarkets that buy our products. These supermarkets are all members of a Parent Account in our CRM. We release a new product and all of the member stores wish toNext Page