Kaizen #157: Flyouts in Client Script

Kaizen #157: 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 Script
3. Use Case
4. Solution
        4.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 Script
6. Summary
7. 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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <div class="loan-calculator">
  12.       <div class="top">
  13.         <h2>EMI Calculator</h2>
  14.         <form action="#">
  15.           <div class="group">
  16.             <div class="title">Amount</div>
  17.             <input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
  18.             <div class="slider-label">$<span id="loanAmountValue"></span></div>
  19.           </div>
  20.           <div class="group">
  21.             <div class="title">Interest Rate</div>
  22.             <input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
  23.             <div class="slider-label"><span id="interesRateValue"></span></div>
  24.           </div>
  25.           <div class="group">
  26.             <div class="title">Tenure (in months)</div>
  27.             <input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
  28.             <div class="slider-label"><span id="tenureMonthValue"></span></div>
  29.           </div>
  30.         </form>
  31.       </div>
  32.       <div class="result">
  33.         <div class="left">
  34.           <div class="loan-emi">
  35.             <h3>Loan EMI</h3>
  36.             <div class="value">123</div>
  37.           </div>
  38.           <div class="total-interest">
  39.             <h3>Total Interest Payable</h3>
  40.             <div class="value">1234</div>
  41.           </div>
  42.           <div class="total-amount">
  43.             <h3>Total Amount</h3>
  44.             <div class="value">12345</div>
  45.         <div class="right">
  46.           <canvas id="myChart" width="400" height="400"></canvas>
  47.         </div>
  48.       </div>
  49.     </div>
  50.     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
  51.     <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
  52.     <script src="main.js"></script>
  53.   </body>
  54. </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.
  1. ZDK.Client.createFlyout('EMIFlyout', {
  2.     header: 'EMI Calculator',
  3.     animation_type: 1,
  4.     height: '400px',
  5.     width: '450px',
  6.     close_on_exit: false
  7. });

  9. ZDK.Client.getFlyout('EMIlyout').open(
  10.     { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
  11.     { data: loanDetails }
  12. );

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.


    Access your files securely from anywhere








                            Zoho Developer Community



                                Bootcamp
                                Community
                                Pricing
                                Webinars
                                What's New
                                Integrations
                                Contact Support
                                Contact Sales
                                  Zoho Survey Resources
                                    Features
                                    Survey Templates
                                    Integrations
                                    Community
                                    iOS Mobile Surveys
                                    Pricing
                                    Android Mobile Surveys
                                    Insurvey Blogs
                                    Insight Blogs
                                    Tips & Tricks





                                                Latest Feature Updates

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                  • Ask the Experts




                                                      Zoho SalesIQ Resources

                                                            • Sticky Posts

                                                            • Kaizen #217 - Actions APIs : Tasks

                                                              Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

                                                            • Kaizen #216 - Actions APIs : Email Notifications

                                                              Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

                                                            • 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 achieved

                                                            • Kaizen #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 the


                                                            Manage your brands on social media
                                                            Access Zoho Social

                                                              Zoho Pagesense Resources


                                                                  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 CRM Resources

                                                                                      • CRM Community Learning Series

                                                                                        CRM Community Learning Series


                                                                                      • Kaizen

                                                                                        Kaizen

                                                                                      • Functions

                                                                                        Functions

                                                                                      • Meetups

                                                                                        Meetups

                                                                                      • Kbase

                                                                                        Kbase

                                                                                      • Resources

                                                                                        Resources

                                                                                      • Digest

                                                                                        Digest

                                                                                      • CRM Marketplace

                                                                                        CRM Marketplace

                                                                                      • MVP Corner

                                                                                        MVP Corner







                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now


                                                                                            Zoho Show Resources

                                                                                              Zoho Writer

                                                                                              Get Started. Write Away!

                                                                                              Writer is a powerful online word processor, designed for collaborative work.

                                                                                                Zoho CRM コンテンツ



                                                                                                  Nederlandse Hulpbronnen


                                                                                                      ご検討中の方




                                                                                                              • Recent Topics

                                                                                                              • Rich Text For Notes in Zoho CRM

                                                                                                                Hello everyone, As you know, notes are essential for recording information and ensuring smooth communication across your records. With our latest update, you can now use Rich Text formatting to organize and structure your notes more efficiently. By using

                                                                                                              • Hidding/excluding specific picklist options from filter

                                                                                                                Hi. Is it possible to hide/exclude specific picklist options from this filter? I don't want them to be shown when someone tries to filter in the leads module

                                                                                                              • How to view CRM Sales Orders in Desk

                                                                                                                What's the usual way to view all CRM sales orders linked to a contact, when viewing a ticket in Desk? I don't want to have to open a new tab to see the order in CRM. And the Desk CRM sidebar doesn't seem to be configurable. Would I have to use an extension

                                                                                                              • Add Attachment Support to Zoho Flow Mailhook / Email Trigger Module

                                                                                                                Dear Zoho Support Team, We hope you are well. We would like to kindly request a feature enhancement for the Mailhook module in Zoho Flow. Currently, the email trigger in Zoho Flow provides access to the message body, subject, from address, and to address,

                                                                                                              • Zoho DataPrep switching Date Format

                                                                                                                When using a pipeline that is importing Zoho Analytics data into Zoho DataPrep, the month and day of date fields are switched for some columns. For example, a Zoho Analytics record of "Nov. 8, 2025" will appear in Zoho DataPrep as "2025/08/11" in "yyyy/MM/dd"

                                                                                                              • Subforms to Capture Multi-Row Data in Job Sheets

                                                                                                                Subforms transform your job sheets from simple checklists to powerful, data-rich forms. In field service work — whether maintenance, inspection, installation, or repair — a single job can involve multiple repeatable entries: readings, parts used, activities

                                                                                                              • 年内最後のユーザー向けイベント：5名限定！ 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ (12/18)

                                                                                                                ANNOUNCEMENT 1 REPLY INSIGHTS ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの中野です。 12月開催のZoho ワークアウトについてお知らせします。 今回はZoomにて、オンライン開催します。 参加登録はこちら（無料） https://us02web.zoom.us/meeting/register/QHn6kJAcRs-znJ1l5jk0ww ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho

                                                                                                              • Add "Fetch Composite Item" Action for Inventory

                                                                                                                I want to make a Flow that uses information returned in the GET call for Composite Items, and it's not currently available in Zoho Flow. Please consider adding this functionality.

                                                                                                              • Presenting ABM for Zoho CRM: Expand and retain your customers with precision

                                                                                                                Picture this scenario: You're a growing SaaS company ready to launch a powerful business suite, and are looking to gain traction and momentum. But as a business with a tight budget, you know acquiring new customers is slow, expensive, and often delivers

                                                                                                              • Adress Labels for sending of the oder und barcode

                                                                                                                We want to print with my address labels to stick on the order of the ware can. there are these options?

                                                                                                              • printing individual labels - Dymo LabelWriter

                                                                                                                I am trying to print individual labels to my Dymo LabelWriter - has anyone done this? Latest Update (December 2025): The Canvas Print View is now available! We encourage you all to try it out and share your feedback with us. Learn more here: Zoho CRM

                                                                                                              • Zoho Creator for Agriculture

                                                                                                                Greetings, I am starting to work on  Zoho Creator specifically for the agricultural field, any recommendations, tips or ideas that might be helpful ? Also, if you are interested by any means in working on such project, kindly contact me. The project is

                                                                                                              • Custom Print Layout

                                                                                                                I would like to create a custom print layout of a Lead or Contact. Is there a way to do that? What I mean is that if I'm viewing a specific lead or contact I'd like to be able to print or export that lead/contact and only print and/or export certain information.

                                                                                                              • Print View

                                                                                                                Nothing happens when I'm in a module , ie; Contacts, and I hit the Print View Button. Even when it does come up and say "loading", nothing loads

                                                                                                              • Get Holiday ready with Zoho Mail's Offline mode

                                                                                                                With the holiday season right around the corner, this is the perfect time to get ready to unplug, relax, and enjoy a well-deserved break. In addition to preparing yourself, you can also make sure your organization members are set for their time away from

                                                                                                              • Zoho Flow Credits

                                                                                                                Hi , I would like to ask the reason why every time I added plus credit but few days later I will return back to default? (as below I add credit to 3000 but today It change back to 1000) Most important is, when the credit fully used, not any reminder to

                                                                                                              • Client Portal ZOHO ONE

                                                                                                                Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

                                                                                                              • Zoho CRM Kiosk issues

                                                                                                                Firstly this is for a system on the AU servers if that makes a difference. Issues are as follows (For Kiosk): 1. Re-ordering fields in the screen builder is broken. The fields seem to be re-ordering themselves, unless you order everything by moving the

                                                                                                              • Zoho Books emails suddenly going to Spam since 11 Nov 2025 (Gmail + now Outlook) — anyone else?

                                                                                                                Hi everyone, We migrated to Zoho Books in July 2025 and everything worked fine until 11 Nov 2025. Since then, Zoho Books system emails are landing in customers’ Spam (first Gmail, and now we’re seeing Outlook/Office 365 also starting to spam them). Impacted

                                                                                                              • Adding Multiple Files to a Zoho Vault Entry

                                                                                                                There is a old blog post talking about adding multiple file attachments to one Zoho Vault Secret: https://www.zoho.com/blog/vault/introducing-new-features-in-zoho-vault-powerful-password-sharing-wider-storing.html Is that still possible, I can see how

                                                                                                              • Email Template Edits Not Saving

                                                                                                                I can make an edit, click save, and see the blue bar annimation at the top, but the edits don't actually save. Important, because my email templates are now broken and clients are receiving bad emails. Tried on Chrome, Firefox and IE.

                                                                                                              • Default Ticket View - Table?

                                                                                                                Guys, We mostly use the table view to queue tickets. Maybe I am missing it - but how can I set that view as 'default" for all our agents? Thanks JV

                                                                                                              • Duplicate customers being created in Desk

                                                                                                                Hi I've trying to work out why I've getting duplicated customers being created in my desk. I have an external booking system that generates an email when I get a customer booking a job. A booking email gets sent to Desk where I manage the booking and

                                                                                                              • Can I have different users see different pick list values for Potential Stage?

                                                                                                                We have some users focusing on new business and others focusing on existing business, and they follow different sales processes/cycles, so we would like them to see different pick list values for Stage (eventually leading up to Closed Won/Lost in both cases).   And just to keep it interesting - some of these users will of course do a combination, so would need to see one pick list for their New business potentials and a different pick list for their Existing business ones.   Salesforce does this

                                                                                                              • Tracking Snippet not working in Zoho Marketing Automation!

                                                                                                                First off, the fact that you have to wait about 12-24 hours for every response is terrible. How are we supposed to conduct business? Second, we have been trying for several days to get the Tracking Code Snippet in marketing automation to work, to no avail.

                                                                                                              • email moderation issue when email is sent in the name of a mail group

                                                                                                                Symptom: an email that is sent by a mail group moderator in the name of a moderated mail group is held back for approval. Reproduction: Create a moderated mail group with members and moderators. Allow that mails can be sent in the name of the group (extended

                                                                                                              • Is there any way to send an Excel received by email to Dataprep?

                                                                                                                Every day I receive an email alert with an Excel file that I want to process through a Dataprep pipeline. To do this, I need to: -Save the file to disk -Open the pipeline -Run the pipeline -Update the source -Several clicks to select and open the saved

                                                                                                              • BUG: Can't copy-paste data outside Sheet

                                                                                                                Currently I can't paste data copied from inside any of my Zoho Sheet files to any other app. Copy-paste works inside the sheet It does NOT work between two different sheets These sheets are built from automation templates Everything works fine if I create

                                                                                                              • Recruit paid support?

                                                                                                                Hi all, Could anyone who has paid support package advise if it provides value for money with regards to support response times? Exploring the idea as unfortunately when we have faced issues with Recruit it has been a 7+ day timescale from reporting to

                                                                                                              • Using IMAP configuration for shared email inboxes

                                                                                                                Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure

                                                                                                              • Add Lookup Field in Tasks Module

                                                                                                                Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

                                                                                                              • Hotmail is blocking the zoho mail IP

                                                                                                                Greetings, Since last Tuesday (5 days ago today) I wrote to Zoho support and I still haven't received a single response (Ticket ID: 2056917). Is this how you treat people who pay for your email service? I am making this public so that those who want to

                                                                                                              • Read webpage - MSXML2.ServerXMLHTTP

                                                                                                                I have the following VBA script, put together from various sources (mainly zoho forum/help/support, so it once worked, I guess): private Sub GetListOfSheets() Dim url As String Dim xmlhttp As Object Dim parameters As String Dim html As String range("B1").value

                                                                                                              • Zoho Creator Form Search

                                                                                                                I'm new to Zoho Creator and so far i do like it but im shocked there seems to be no easy way to add a search function and/or navigation to there forms as this readily available in every platform i have used in the past. Anyway i have a form which i have

                                                                                                              • How to setup DKIM / SPF in Zoho Mail

                                                                                                                Hello there! I'm having a hard time understanding how to setup the TXT records for SPF and DKIM with Zoho Mail. I'm following the instructions here: https://www.zoho.com/campaigns/help/setup-spf-dkim.html Specifically, when it comes to the value for the

                                                                                                              • Mass update cant trigger a workflow?

                                                                                                                Hello there, Is this a normal Creator behaviour? In a report, if I manually edit each data row, it will pass those changes to all other reports. However, if I perform a Mass Update on a few data rows at once, the new data is not pushed to other reports.

                                                                                                              • Exciting Updates to the Kiosk Studio Feature in Zoho CRM!

                                                                                                                Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerful

                                                                                                              • search and Smart Bar both missing in Mail

                                                                                                                One of the users on my account does not have the search bar at the top right or the Smart Bar at the bottom left of the desktop Mail app. Any ideas how to get those back?

                                                                                                              • "Wrong password or login" Problem to configure Zoho on MAIL App on my Macbook

                                                                                                                Hi, I'm having problems to configure my e-mail on my MAIL App(Macbook pro). My e-mail is hari@trespontoum.net Actually was working perfectly, and still working on my Iphone. My MAIL App prompt me that my login or password is wrong. I tried to change 3

                                                                                                              • Possible for first Signer of Sign Form to specify the next signer in the sequence

                                                                                                                We have many use cases where multiple signers need sign the same document. We'd love to be able to use sign forms, where the a signer who uses the Sign Form link can specify the name and email address for the next person in the sequence.

                                                                                                              • Next Page