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.

Notes
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. });

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

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 pop up.

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.



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          • Sticky Posts

          • Kaizen #226: Using ZRC in Client Script

            Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this
          • Kaizen #222 - Client Script Support for Notes Related List

            Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how
          • 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

          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

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

                              Zoho CRM コンテンツ



                                ご検討中の方

                                  • Recent Topics

                                  • Prefill form with CRM/Campaigns

                                    I created a form in zForms and created prefill fields. I added this to the CRM and selected the fields so when sending from the CRM, the form works great. However, I want to use the same form in Campaigns and I want it to pull the data from CRM (which
                                  • Triggering a campaign automation from a Form

                                    I used Forms to create a lead form that is accessed by a button on my website. The field information flows into the CRM. However, I am trying to figure out how to use Campaign automations to start a workflow (series of campaign emails) that is triggered
                                  • Employee Appraisal Applicability - Why is Date of Joining Hard-Coded?

                                    In the new (to me, at least) Performance Appraisal Cycle wizard, it's possible to set criteria to determine for whom the appraisal process should apply. This makes sense on its face. However, one MUST use the Date of Joining criterion as a filter. Why
                                  • Formula fields

                                    Zoho People now supports formula fields. This post illustrates it. Formula fields are fields whose value is calculated instead of being entered by the user. Using this, number, decimal and date manipulations can be done. The value of this field could be numeric or date depending on the output of the formula. In date manipulations, the result will be given in milliseconds, which you can format as per you need. The operators we support are +, - , *, /. Formula fields get recalculated automatically
                                  • Zobot operator information

                                    I am working on a zobot that calls a plug to send data to our API. I want the response data from that API to be shown only to the operator and not the customer. I have tried writing this data out to the visitorCity field but nothing gets updated on the
                                  • Copy paste from word document deletes random spaces

                                    Hello Dear Zoho Team, When copying from a word document into Notebook, often I face a problem of the program deleting random spaces between words, the document become terribly faulty, eventhough it is perfect in its original source document (and without
                                  • Is it possible to use module field filters via URL parameters?

                                    It would be really convenient if I could quickly link to a filter. For reference, this is the filter functionality I'm referring to: https://help.zoho.com/portal/en/kb/crm/customize-crm-account/advanced-filters/articles/advanced-filters For example: My
                                  • Transitioning FESCO Bill Project to Zoho Sheets and Integration Options

                                    Hello Zoho Support, I'm considering transitioning my FESCO bill project from Google Sheets to Zoho Sheets and wanted to know if there are integration options to seamlessly migrate our existing work. You can view our platform here, any guidance would be
                                  • Credit card

                                    Coming from another software, is it possible here to typically have credit card payment off, but independently per customer, click a box (possibly on the invoice when I go to to send) allowing that 1 allowed customer credit card payment, NOT ALL of my
                                  • Lightbox Pop-up form

                                    I would like to embed my form using the lightbox pop up. I don't want it to load automatically. I want it to load when some clicks the button. I can see this option, however when I use the "show pop-up launch button" on the website, the button automatically
                                  • Lightbox Pop-up form

                                    I would like to embed my form using the lightbox pop up. I don't want it to load automatically. I want it to load when some clicks the button. I can see this option, however when I use the "show pop-up launch button" on the website, the button automatically
                                  • Connecting Portals from different Zoho apps

                                    Hi, I note that Zoho has functionality for customer portals for several of the Zoho apps, like CRM, Projects, Desk etc. Is there any way to connect these portals?  It would be great if we could give our customers access to a portal in which they could
                                  • Customer Management: #5 Never Let the Customer Slip

                                    When Rahul started Knight's Watch Consulting, his focus was simple: deliver good work and keep clients happy. He offered one-time consulting projects, monthly advisory retainers and usage-based support for growing clients. Business was steady, and customers
                                  • Deluge date time issue

                                    The deluge function info zoho.currentdate.toString("MMM/YYYY") returns Dec 2026 instead of 2025
                                  • Zoho Projects Android and iOS app update: Mobile device permission based on user profiles

                                    Hello everyone! We have brought in support for mobile device permissions based on the user profiles which are configured in organization level. Administrators can now configure the permissions on the web app(projects.zoho.com) by following the steps mentioned
                                  • treatment for rehires

                                          Hello,  we are aware of the fact that Zoho People at the moment does not has a provision for rejoining exited employees. But is there any quick fix or hack to this? It will be appreciated a lot. 
                                  • Zoho Projects Android and iOS app update: Timesheet module is now renamed as 'Time Logs', delete option has been renamed to 'Trash'.

                                    Hello everyone! We have now renamed the Timesheet module as Time Logs and the delete option as 'Trash' on the Zoho Projects Android and iOS app. Time Logs Android: Time Logs iOS: Trash option Android: Trash option iOS: Please update the app to the latest
                                  • Zoho Mail app update: Manage profile picture, Chinese (Traditional) language support

                                    Hello everyone! In the latest version (v3.1.9) of the Zoho Mail app update, we have brought in support to manage profile picture. You can now set/ modify the profile picture within the app. To add a new profile picture, please follow the below steps:
                                  • Reminders for Article Approval

                                    Is there a way to send reminders for approvers to review articles and approve/deny them? I'm not seeing that option anywhere.
                                  • Add Full-Screen Viewing for Quartz Recordings in the Client Interface

                                    Hi Zoho Team, We would like to request an enhancement to the Zoho Quartz client interface when viewing submitted recordings. Current Limitation: When viewing a Quartz recording from the client (user) interface, there is currently no option to switch the
                                  • 2025 Recap: A Year to Remember | Zoho Inventory

                                  • Important Update : Pipedrive deprecated fields no longer supported in Zoho Analytics

                                    Dear Pipedrive users, We would like to inform you about a recent update related to your Pipedrive integration with Zoho Analytics. The Pipedrive team has deprecated certain fields from their application. You can find more details in the official Pipedrive
                                  • Product Updates in Zoho Workplace applications | November 2025

                                    Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this November. Zoho Mail Format comments easily using Slash Commands With Slash commands, you can easily format text, insert
                                  • Right-Click Pipeline to Open in New Tab

                                    Please add the ability to right-click on a pipeline to open it in a new tab
                                  • Adjusting Physical Inventory

                                    Not getting very far with support on this one, they say they are going to fix it but nothings happened since November. Please give this a thumbs up if you would like to see this feature or comment if you have some insight. Use Case: Inventory set to be
                                  • I need to Record Vatable amount and non vatable amount separately in zoho books in a single line

                                    I need to Record Vatable amount and non vatable amount separately in zoho books in a single line give me the customisation option and in invoice copy to customer the total amount should be inclusive 5%vat and no need to show the vatable and non vatable
                                  • sync views to sheet

                                    Im looking to sync my views aka reports in analytics to zoho sheets, when data is updated in analytics it also should be updated in sheets, till now zoho sheets only offer raw data connection and it is not enough as these reports are difficult to re-do
                                  • How to update the Status in a custom module?

                                    Hi, I have a custom module "cm_payment_registry" in Billing, I am trying to change the status which is "Draft" with: array = {"custom_status":"Approved"}; zoho.billing.update("cm_payment_registry",organization.get("organization_id"), XXXXXXXXXXXXXX, array,"connectionname");
                                  • Opening balances - Accounts Receivable and Payable

                                    Our accounting year starts on 1st August 2013 and I have a Trial Balance as at that date, including Accounts Receivableand Accounts Payable balances, broken down by each customer and supplier. Q1 - do I show my opening balance date as 31st July 2013 or
                                  • Replace Zoho Invoice with QuickBooks

                                    We are implementing Zoho FSM for a cleaning business in the US with 50+ field workers. This business has been using Quickbooks for accounting for decades and will not migrate to Zoho Books. A major issue in the integration is the US sales tax calculation.
                                  • 2025 Highlights: A Year of Steady Progress and Significant Developments

                                    As we come to the end of 2025, let's take a moment to reflect on the significant progress and developments we've made to improve your travel and expense management. In the Spotlight Introducing Online Booking (US edition only - Early access) Enable online
                                  • Function #42: Show the actual rate of items on invoices

                                    Hello everyone, and welcome back to our series! In Zoho Books, you have the ability to create Price Lists, wherein you can mark up and mark down the item rates by a specific percentage or set custom rates. Generally, when you apply a price list to an
                                  • Ability to Set Text Direction for Individual Cells in Zoho Sheet

                                    Dear Zoho Sheet Team, We hope you are doing well. We would like to request an enhancement in Zoho Sheet that allows users to set the text direction (right-to-left or left-to-right) for individual cells, similar to what is available in Google Sheets. Use
                                  • Warehouse fast processing

                                    Hey guys, would anyone be interested in something like the attached image ? If there's any interest I'd be willing to develop it further for others to use, it's much faster than using Zohos native solutions, it can part pack, pack in full, part ship,
                                  • Can I create a CODE 128 custom field for my items in Zoho Inventory and then use it for generating Sales Orders?

                                    Can anyone helps me, I don't want to use the SKU code for scanning my products.  ​Because all my products have a CODE-128 label attached.
                                  • Start/Stop Timmer in Chrome Extension

                                    The chrome extension is great and allows you to do allot however one of the most common things employees working on projects need to do is track their time. Having an easy start/stop timer to track time would be great.
                                  • Invalid collection string

                                    I haven't changed anything in one of my functions. I'm trying to run it manually and suddenly "Invalid collection string" appears. My code has 6 lines and the error says that the error is on 7th line. Why? What does this error mean? Nothing has been changed
                                  • Zoho Directory 2025: New Features | Security Enhancements | Enriched UI

                                    Hello everyone, Greetings from the Zoho Directory team! 2025 has been a highly successful year for Zoho Directory. We are delighted to introduce a fresh set of features, an enriched UI, and major product enhancements. These updates aim to deliver a smoother
                                  • zoho people 5 report

                                    How do I customize my report in Zoho People Report? I understand that I can get the results of multi-table queries through SQL join statements, but I don't know the relationship between each table. I tried to create a report using Attendance User Report
                                  • Leave Report Emailed Weekly

                                    I am wondering if someone knows how to have a report generated either weekly or monthly or both for department heads and ownership of upcoming employee leave. For instance, it would be nice to get an emailed report on Friday for the upcoming week of who
                                  • Next Page