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

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




      • Sticky Posts

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

      • 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

        • Recent Topics

        • How to disable the Login button in Desk Helpcenter

          Hey there, I'm testing out whether the help center within Zoho Desk could replace our existing Customer FAQ. I tried to customize the themes for the public help center frontend, but stumbled across the login button in the navigation bar. Is there any

        • Full Text Customization & Translation in SalesIQ Chat Widget Settings

          Dear Zoho SalesIQ Team, Greetings, We would like to request an important enhancement to the chat widget customization options in Zoho SalesIQ. Current Limitation: At the moment, only some of the text shown in the chat widget is editable or translatable

        • Best way to display complex Bookings Consultation Descriptions on Zoho Site?

          I am a new user so apologies if this has been asked before. I couldn't find any answers in the forum. We offer 18 complex Consultations to our subscribers. Our current platform lets me put detail on these Consultations thoroughly (200-300 words) during

        • Gmail is ramping up its email sender policy as of November 2025

          Hello marketers, As you may be aware, Gmail introduced a guideline for bulk senders starting February 2024. If not, here's a quick refresher straight from Google: After this policy was announced first in 2023 and soft-implemented in February 2024, we

        • Modifying iframe data of Zoho booking iframe

          Hello, I have integrated a Zoho Bookings embedded iframe into my website. Currently, I am pre-filling the booking form with default values as part of our process flow. However, I want to ensure that if an input field is already populated with a default

        • Zoho CRM Workflow and Function Backup Options

          Hi everyone! I have been able to make several backups of my CRM data and noticed that the Workflows and Functions are not included in these backups. To my knowledge, there is no backup feature for workflows and functions, which is problematic in of itself.

        • Is or will be possible to associate meeting transcription and summary, made by Zia, to meeting/contact/account record in CRM?

          Would be useful to keep context and track jobs, better if it will be auto

        • Desk Field Not Showing in Analytics

          Hi there, I recently added a field to our Zoho Desk Ticket Information. I went and added the data retrospectively to the tickets. It is also marked as required, so all new tickets cannot be closed off without it being filled in. When I try to run a report

        • Export data using advanced export options and customizable settings

          Hello everyone, The user interface for exporting data has been revamped with updates to make data exports more flexible and efficient for users. These updates not only enhance usability but also bring advanced capabilities to help users extract precise

        • Moving data from one pipeline to another

          Hey all, I've got some complex pipelines to build and I'd like to seperate them into seperate pipelines rather than have one mammoth one. If I create 2 pipelines, is there any easy way to use the output of Pipeline1 to be the input into Pipeline2? Or

        • How to export/find all deluge code.

          Hi, I have a large app wich contains several forms, reports, html views, I need to find thow my application if any contains specific word, I could find it manually by editing app and see on every section(field code, on succes, on load, etc) but I would like to do it faster. Is there a way to at least export it to a file the whole deluge code on my application?

        • Have Some Bugs in Zoho CRM Ask Zia Assistant

          Hi Support Team, I have found some bugs in Zoho CRM Ask Zia Feature Please Check below screenshot, insight option is showing twice i think its in early access that's why its have some bugs .

        • COD with Partial payment

          Two reasons why we need COD with partial payment option. 1) Since we deal heavy weight products our shipping costs are too high. If shipment is rejected by customer we incur huge loss. 2) Some competitors place fake orders with different names and return

        • Slicers are now available in Zoho Sheet—filter your data interactively

          At Zoho Sheet, we diligently track user requests and feedback. In line with this, based on extensive user requests, we've integrated Slicers to pivot tables and are delighted to announce its release. Slicers are interactive visual filters that have add,

        • Resizing a Record Template Background Inage

          Hi everyone, I have an issue which I can't seem to resolve: Basically, I'm designing a record template in certificate form. I've specified A5 landscape. I've set my background image the same dimensions with total pixels at 443,520. Whatever I try, when

        • Updated font library: New font styles and custom font options in Zoho Sheet

          Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you can

        • Introducing Data Bars: Graphically represent changes in data within the cells

          Conditional formatting has helped millions of spreadsheet users analyze and highlight their data more efficiently. In addition to the classic rules, color scales, and icon sets available in Zoho Sheet, you can now apply Data Bars, a convenient method

        • Default Font Size in Desk

          How do I set my default font size in Desk? It takes me about 45 minutes to find the place to set it, then, when I sign out of Zoho and log back in, it's back to font 10 again. Seems like this would be simple, but like everything with Zoho, it's buried

        • Tip #19 - Create checkbox tracker in your spreadsheet

          Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sample

        • Tip #20 - Three things you probably didn't know you can do with picklists

          Hello Zoho Sheet users! We’re back with another quick tip to help you make your spreadsheets smarter. Picklists are a great tool to maintain consistency in your spreadsheet. Manually entering data is time-consuming and often leaves typos and irregular

        • Per Level Approval for admins

          We need Process admins like Zoho CRM in Zoho Books for per stage approval Currently in books, admins only have the option for Final Approval But for example, in cases like when an employee is on leave, we can't just approval one level we only have option

        • Feature enhancement: Highlight rows based on a cell value

          Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to draw

        • Updating custom fields in Zoho Projects

          Hi I am wondering if anyone has experience with custom fields in Zoho Projects. I am struggling to update the field using either deluge or the api endpoint. My code is: //custom_Map = map(); custom_Map = {"UDF_DOUBLE_1":"0.27"}; update_Map = map(); update_Map.put("custom_fields",custom_Map.toList());

        • Markdown for Desk?

          Hi, my company wants to use markdown for formatting text in Desk (in all modules there, especially Tickets and Helpcenter). Zoho already offers use of markdown in several products (see https://help.zoho.com/portal/en/kb/backstage/microsite-guide/formatting-with-markdown/articles/formatting-with-markdo)

        • Change Currency symbol

          I would like to change the way our currency displays when printed on quotes, invoices and purchase orders. Currently, we have Australian Dollars AUD as our Home Currency. The only two symbol choices available for this currency are "AU $" or "AUD". I would

        • Calendar not working

          Are we the only ones. On any browser we cannot click on any of our calendar appointments and get them to open. They just make the browser loop. WE have reached out and have been told they are working on it. The office staff are really stuck. The point

        • WhatsApp Message Template Quick Reply Buttons

          Hello, I created my first Message Template to overcome the 24-hr messaging window and it was approved by WhatsApp/Meta. When I go to Meta, I also see that template brought from Zoho Desk, and used it via Zoho Desk IM. However, I notice that when in Meta's

        • Account in Quick View Filter

          I have a report that I often run against a specific Account. Every time, I have to go into the edit menu and change the Advanced Filter. I would prefer to use the Quick View Filter, but it does not allow me to use the one and only field that makes any

        • Set Display for Numbers/Currency/etc with Client Script/Customization in Canvas List Page

          Is it possible to set a display mask for a number/currency field using Client Script or customization? I have custom fields that I would like to keep the decimal places for calculation purposes, but do not need them displayed to the user. So 101.3568

        • 136.143.188.51 blocked by spamcop

          Zoho mailserver seems to be blocked by spamcop. Cant send mail to my customer. Not sure what to do.

        • 🚀 WorkDrive 5.0: Evolving from a file sharing app to an intelligent content management platform: Phase 2

          Hello everyone, WorkDrive's primary focus has always been to provide an intelligent and secure content management platform, simplify collaboration, and be the central repository of files for all Zoho apps. In our previous announcement, we unveiled the

        • i keep see there is a connetion issue connecting 3rd party api on zoho when using zia

          hi there , i have set up open ai api to zoho zia (copied and pasted to zoho zia) but I keep getting notificaiton "there is a connetion issue connecting 3rd party api on zoho" when using zia on top when click zia and try to type in word there

        • Deleting Fields in CRM Deletes Views in Analytics

          Hey friends! I'm having some issues when we modify some fields within ZohoCRM. There are times where we need to sunset a field and eventually completely remove it. In these instances, it seems like a lot of views are removed in Analytics. This ranges

        • Zoho Desk Android and iOS app update: Access multilingual templates on the IM module

          Hello everyone! We have introduced multilingual templates on the IM module of the Zoho Desk mobile app allowing you to send IM template messages in translated versions. iOS: Android: Please update the app to the latest version directly from the App Store/

        • Does Zoho offer a full WhatsApp Marketing Platform (like WATI / GallaBox)?

          lm exploring WhatsApp marketing and I’d like to understand what options are available within the Zoho ecosystem. Currently, I see: Zoho SalesIQ has a broadcast option, but it seems very limited — for example, it doesn’t support uploading contacts via

        • Custom buttons

          Getting Error "You can only create 10 custom buttons per module" ! I already have more than 10 for 1 module before trying to create another. Is this a new restriction brought about by the all knowing what's best for businesses Zoho guru ? It would be

        • The Social Wall: October 2025

          Hello everyone, As we head toward the end of the year, we’re bringing you a few updates to help give your social media efforts a strong finish. This month, we’re rolling out new enhancements across both the web and mobile app. Post Preview Have you ever

        • Client Script | Update - Support for List Page (Canvas) and Notes

          Hello everyone! We are glad to announce two exciting updates in Client Script. Client Script support for List Page (Canvas) Client Script support for Notes These open the door to more dynamic and interactive customizations! 1. Client Script support for

        • Pincode Based Pricing

          We want to give extra discount to customers within city limits because our shipping and packing costs are less. My proposal is assign list of pincodes to price list and assign the price list to customers whenever they sign up with pincodes. Also show

        • feature question: lookup field in Projects task layout

          Hello, Below we have interface to configure a custom task layout, however, we need a lookup field to let pickup data from other apps, such as Zoho CRM Products module, is that possible or already in your roadmap? or a workaround to achieve it? Thanks in advance.

        • Next Page