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.


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

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

    • Recent Topics

    • Mail Merge - unable to send more than 50 email

      Hi, I've subscribed to the pay email service because of the Mail Merge feature. However, I've found that this feature only allow to send up to 50 emails. I've to attach a screenshot for your reference. This limitation is not mentioned anywhere in service.

    • Zoholics Europe 2025: Your Ultimate Data Analysis (Zoho Analytics) Workshop Experience

      Why should you attend? This year, Zoholics Europe 2025 is putting data analysis centre stage. With a dedicated workshop designed to answer all your data-related questions, you’ll gain practical skills, real-time solutions, and expert insights that you

    • UK payroll entries

      Hey guys, Nett payroll payments are imported direct into the bank, using an external payroll system (will be glad for Zoho to have a UK payroll app) At present I have monthly recurring bills for HMRC which are auto entered & paid when due. This seems

    • Closing Accounting Periods - Invoice/Posting dates

      Hi, I have seen in another thread but I'm unsure on how the 'transaction locking' works with regards to new and old transactions. When producing monthly accounts if I close December 24 accounts on 8th Jan 25 will transaction locking prevent me from posting

    • Invoice status on write-off is "Paid" - how do I change this to "Written off"

      HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

    • Reverse Charge Services (Non-EU) Showing Correctly in 84/85 and 67, But Missing in Box 46 - Germany

      Hi, I'm located in Germany and I’ve set up my expenses for non-EU services (e.g., OpenAI, DeepSeek) under the reverse charge mechanism (§ 13b UStG) in Zoho Books, and I noticed some discrepancies in the VAT Summary Report. What’s Correct: Reverse Charge

    • Zoho Live Chat/Support

      What is going on with Zoho support lately? I've tried to use the live chat feature 4 different times and it refuses to connect to any (despite waiting over 30 minutes one of the tries). I finally gave up and emailed my question nearly a week ago and still

    • Can we have a module to records Certificate No and TDS rates for Lower TDS Certificates by the vendors ?

      Can we have a module to records Certificate No and TDS rates for Lower TDS Certificates by the vendors ?

    • Tip #38- Track Organizational Changes: A Guide to Using Action Log Viewer- 'Insider Insights'

      Hello Zoho Assist Community! Ever needed to trace who did what and when within your remote support operations? Let’s say your support team is growing, and you want to monitor key activities like settings updates, user invites, module changes, or permission

    • Tip of the Week #67– Avoid confusion – Mark duplicate threads.

      When customers send the same message to multiple email addresses, such as support@ and sales@, your team may end up seeing the same message in different inboxes. This creates confusion, risks double replies, and clutters your workspace. Use the Mark as

    • Tax in Quote

      Each row item in a quote has a tax value.  At the total numbers at the bottom, there is also a Tax entry. If you select tax in both of the (line item, and the total), the tax doubles. My assumption is that the Tax total should be totalling the tax from

    • Final Reminder: Discontinuation of Older ASAP Widgets and Mobile SDK Support

      We launched the new ASAP Help Widget last year, introducing a unified and enhanced experience. Since then, older configurations have been placed in read-only mode, with all major updates and improvements built exclusively on the new version. As part of

    • Zoho Subscriptions -- Zoho Commerce integration

      Is there integration between Zoho Subscriptions and Zoho Commerce? I would like to create subscription plans in Zoho Subscritpions and list them for on my Zoho Commerce store.

    • Website show Blank white screen

      Customer called me to tell me my website is currently down upon review it shows a white screen however I can access everything via editor. JITCADCAM.com

    • How manufacturing analytics can transform your enterprise with Zoho Projects Plus

      Did you know that every single car is made up of 30,000 to 40,000 individual parts? All of these are manufactured meticulously in various facilities before being assembled into one. The global manufacturing industry spans a wide range from delivering

    • Projects custom colors replaced by default orange

      Since yesterday, projects uploaded to Zoho, to which I had assigned a custom color, have lost the customization and reverted to the default color (orange). Has anyone else had the same problem? If so, how did you resolve it?

    • Customize your SalesIQ live chat with Custom CSS and blend it with your website design

      Hi everyone. Hope you all are having a great day! SalesIQ offers various inbuilt customization choices for your chat widget and window like changes in colour, theme, font etc. Although these choices are many, sometimes they may not match with the design

    • From Email Address When Replaying to Missed Chats

      One of the most common things we do is follow up on every missed chat.  Missed chats are like money in the bank, people just waiting for your response and to start a relationship with our companies. However, SalesIQ only lets you respond from 1 email address from your entire account?! We have happily paid for 4 subscriptions, but our users cannot reply from their own email address?  How are we supposed to build customer relationships? The fix to this issue is so simple, just load in the logged in

    • how to treat a same person as customer and vendor in zoho

      hi team, in my company, few persons acting as creditors as well as debtors (which means sometimes we pay them... some times we paid by them). in that case i would like to maintain a same ledger for that person.in zoho books it is treating creditor and

    • Narrative 6 - The impact of rebranding

      Behind the scenes of a successful ticketing system - BTS Series Narrative 6 - The impact of rebranding Every organization has invested in branding to set itself apart, and that should be reflected in the help desk. Zoho Desk enables organizations to apply

    • custom color palette for picklist in Sheet

      Migrating over from Google Sheets and missing the ability to customize the individual item colors of my picklist/dropdown menus. Is this something that is possible? A search showed me creating a custom color palette in Analytics is possible but I am not

    • What's New - July 2025 | Zoho Backstage

      Start smart, end strong. From knowing who’s coming to celebrating who showed up, July’s updates help you run events that feel organized from the first invite to the final thank you. Planning an event used to be like writing a choose-your-own-adventure

    • Image Upload Field API get encrypted ID and sequence number

      Hello is there a way to extract the encrypted id and sequence number from image upload fields through the Zoho CRM API? I created a custom script with javascript within Zoho CRM, but I want to extract the encrypted id and sequence number for all my images

    • Attention: Changes to 10DLC TCR pricing and new authentication requirements

      Hi everyone, Starting August 1, 2025, The Campaign Registry (TCR) is introducing new pricing changes and a mandatory brand verification process called Authentication+ 2.0, which will affect how you register and manage your 10DLC messaging services. These

    • Better Time Tracking

      We need better time tracking customization for IT MSPs. We also need reporting that is built in, rather than having to try and fumble with creating custom reports. We also need to be able to mark whether a ticket has been billed or not, I don't think

    • Scheduled Tickets Need Updated

      There is a very clunky manual way to create reoccurring scheduled tickets. This should be created to be easy for the administrator to create. We create several (10 to 12) reoccurring tickets per account for biweekly and monthly auditing purposes.. The

    • Team Feeds Improvements

      Team Feeds needs to show a feed of every action within the department. Currently it seems that the feed will only show a ticket that I've personally commented on or interacted with/followed. A feed should be that, a feed. As a manager I would like to

    • Better Security, Better User Experience | Help Center Update | June'25

      As part of our commitment to enhancing user experience and security, we are happy to announce updates to our authentication mechanism. This update introduces several key enhancements designed to improve the password recovery process and streamline the

    • Upload Logo to Account Page

      It would be nice to set a logo for an Account

    • View Agent Collision on Ticket List Page

      It would be nice from the ticket listing page (views) to see what agents are working on what tickets rather than having to click into each ticket throughout the day to see what agents are working on what tickets. This functionality would also be desired

    • Restrict user from viewing the detail standard view

      Is there any way to restrict a user(it can be user-field-based) from viewing the detail standard view? Basically, I have created a canvas detailed view so that on some conditions I can hide some data from the users but the standard view client script

    • Upload Picture to Contact

      It would be nice to upload a profile picture to a contact.

    • Ticket Status Colors

      Can i change the colors of Ticket Status in the admin panel? Or even change the background of the entire cell of a Critical ticket? This way its easy for my agents to see a urgent ticket when it comes in. Right now everything is black text. Here Right

    • Allowing Pictures for Client Contacts

      Do you have any plans to allow us to add pictures of our client contacts? There is a silhouette of a person there now, but no way that I can see where I can actually add a picture of the individual.

    • Paid Support Plans with Automated Billing

      We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? The

    • Agent name Alias

      I am seeing that Full name of my staffs are written on every ticket response which is not good for some reasons. It is possible to user like this: Manny P. (First Name with Last Name's First Letter) or  Manny (First Name) This is want we want to show

    • Unable to add attachments to tickets through Desk API

      I able to use the Desk API to generate tickets. However when I try to use the tickets/{ticketId}/attachments endpoint, I always get an Unauthorized error. My app has Desk.Tickets.ALL included in its scope so this should not be an issue

    • What's wrong with this COQL?

      What's wrong with this COQL? Code returns "invalid operator found". SELECT id, Name, Stage, Account, Created_Time, Tag FROM Production_Orders WHERE (Account = '4356038000072566002' AND Stage NOT LIKE '%customer%') ORDER BY Created_Time DESC LIMIT 200

    • [Feature Request] Add support for internationalized top-level domains mail hosting

      This is an important request to add support for internationalized domains mail hosting to https://www.zoho.com/mail/ In this case, that is only limited to domain name/mail address however currently it's already possible for us send mails etc using below

    • Add Enable/Disable to Field Rules and other Rules

      Hi, Sometimes I have rules setup for fields, and until I want to enable them for use, I can set the fields to Hidden but rules still show them, today you have to delete rules and then recreate them again, would be nice to have a toggle for Enabled/Disabled

    • Next Page