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

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

    • Recent Topics

    • Can’t create alias “Email alias already exists”

      Hi, I’m trying to create the following alias for my domain email. contact@ personal@ private@ But I get a email alias already exists. I had a soho account previously which I deleted which I suspect is causing the issue. Can someone assist? Kind Rega

    • Zoho Books integration sync from Zoho CRM does not work

      Hi Zoho Community & Zoho Support We just tried to get a sync some products into Zoho Books from CRM using the native sync and we're getting an error: "It looks like some mandatory fields you're trying to map are empty. Please provide valid field names

    • Appraisals - Order of Previous Reviews Should Be Newest to Oldest

      The new Zoho People layout generally does a decent job at providing the necessary information for performing appraisals of employee performance. One example of this is the Previous Reviews section: This information is helpful when conducting a review.

    • Paging through API results. a major gap in your documentation.

      There is no way for me. to get all of my data through a single API call. Typically REST APis have mechanisms for paging through API results. But the documentation for the API I am using: https://desk.zoho.com/DeskAPIDocument#Introduction Has no mention

    • unable to send message reason 550 5.4.6 unusual sending activity

      My email account can't send message. It shows unable to send message reason 550 5.4.6 unusual sending activity detected

    • Recurring invoices were generated with old template...

      I have recurring invoices setup. Ones generated on 10.20.2025 used the modified template I had used. But for some reason, on the ones created on 11/20/2025, it seems the invoices created reverted to the previous version of the invoice template. Notably,

    • Zoho desk desktop application

      does zoho desk has a destop applicaion?

    • Tip #54- Exploring the Files Icon in Zoho Assist- 'Insider Insights'

      As we’re already in mid-December, it’s a good time to take a closer look at one of the most useful options in the Zoho Assist remote support dashboard—the Files icon. To get started, log in to Zoho Assist using your credentials. Once you’re in, navigate

    • Tip#47: Estimation planner

      Sprint planning becomes easier, smoother, more collaborative and more accurate with the Estimation Planner extension. Most work items involve multiple users, and each user's role and effort vary. To provide an unbiased and fair estimation point to the

    • Upcoming update to Google Drive integration in Zoho Creator

      Hello everyone, We're writing to inform you about an upcoming update to how Zoho Creator integrates with Google Drive. In Zoho Creator, during actions like importing files to create an app or attaching files to fields, you can choose files directly from

    • Time Tracking on Iphone doesn't stop

      When I start a time tracking session the timer starts as expected. However when I hit stop, the timer remains on that project. The only buttons available are discard and start. Start runs the timer more and discard says it will throw away the data from

    • Zoho Sign - Zoho CRM extension upgrade

      Hi everyone, We've updated Zoho Sign extension for Zoho CRM with significant internal changes. Impact on existing Zoho Sign extension users Users using the extension without customization If you are using the integration without implementing Zoho Sign's

    • Zoho Books blocks invoicing without VeriFactu even though it is not mandatory until 2027

      I would like to highlight a very serious issue in Zoho Books for Spain. 1. The Spanish government has postponed the mandatory start of VeriFactu to January 1st, 2027. This means that during all of 2026 businesses are NOT required to transmit invoices

    • Group by Owner/ Owner Kanban /Group by Custom Field

      Hi, We are missing the option of viewing Tasks grouped by their owner, as it is an essential function for us to manage our employees' working tasks. We find it hard to inspect what are the tasks that our employees are working on.  We are seeking an option

    • Flow using way too many tasks

      I built a flow that is using way too many tasks for what it is doing. I reached out to support a week ago but never heard back so hoping the community can help. Does a filter count as a task? I am seeing tons of records filtered with < 1 Sec Time Taken

    • Regarding the integration of Apollo.io with Zoho crm.

      I have been seeing for the last 3 months that your Apollo.io beta version is available in Zoho Flow, and this application has not gone live yet. We requested this 2 months ago, but you guys said that 'we are working on it,' and when we search on Google

    • Start Workflow from Deluge Script

      I have developed a customized process from our CRM that leverages a deluge script to create a statement of work document. Once the document has been created via the merge and store function, I would like the ability to start a workdrive review & approve

    • Saved Sections?

      In sites editor, the + button reveals options to add a section, element, etc. It includes Saved Sections, but I can find no way to save a section I've already created. Otherwise, is there a way to copy a section from one page to another?

    • Marketer's Space: Unable to select a sender address? Here's the fix

      Hello Marketers, Welcome back to yet another post! So you've added a sender address in Zoho Campaigns and later found that you're not able to select it while creating an email campaign. Has this ever happened to you? If so, don't worry—you're not alone.

    • Loading Project Balances in ZOHO Books for each project

      Hello, What is the best method for loading project balances actual and budget into ZOHO books to provide tracking to our project managers. We have projects and federal awards (also treated as projects) which span multiple years. We are converting from

    • Scale up your writing style with content analysis tool in Knowledge Base

      Hello everyone, Sometimes writers may have strong knowledge about the subject but may find it challenging to articulate clearly or produce comprehensible, jargon free content. To make the process easier and to ensure consistent, high-quality articles,

    • Zoho Books "Update" Trigger for Zapier?

      Hi Zoho Team, I've been in talks with Zapier about using their services to connect my Zoho Books account to various apps, but I require an additional trigger beyond the "New" trigger. I require an "Update" trigger, which will allow me to filter and create Zaps only when certain conditions are fulfilled on the Zoho Books end before I automate a separate app. Specifically this will help me create invoices in QuickBooks Online only when payments are recorded in Zoho Books, rather than when a new invoice

    • How to prevent editing of closed tickets in Zoho Desk?

      I would like to confirm whether it is possible to completely prevent agents from editing tickets once their status is set to Closed. Is there any configuration, permission, or best practice in Zoho Desk to ensure that closed tickets remain read-only and

    • Zoho Desk Limitations

      Good day, all, I would like to know whether others share my frustration with some of Zoho's limitations. Don't get me wrong, I like Desk (and I also have a subscription for Analytics), I have been with them for close to 10 years, and unfortunately, I

    • New Mandatory One-Click Unsubscribe Link Overshadowing Custom Unsubscribe Link

      I was recently informed by Zoho CRM Support that they are now mandated by the large email service providers like Google and Yahoo to provide a one-click unsubscribe option in the header (not the body) of all mass emails. I have a custom unsubscribe link

    • how to undoreconciled transaction

      how to undo reconciled transaction

    • Can I export all attachments from Zoho CRM?

      Can I export all attachments from Zoho CRM?

    • 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

    • Change eMail Template for Event-Invitations

      Hello ZOHO-CRM Team How I can change the eMail Template for Event-Invitations? I work with the German Version of the Free Version. I know how I can modify eMail alerts or Signature Templates, but where I can other eMails modify you send out? Thank you for your answer. Regards, Juerg

    • Service Title in Service Report Template Builder

      I am currently working on the Service Report Template Builder in Zoho FSM. I have created three separate service report templates for different workflows: Preventive Maintenance Report Requested Service Report Installation Report My issue is that I cannot

    • Zoho Sign for Zoho Projects

      Documents authorization and validation with signature is now easier in project management with Zoho Projects' Zoho Sign extension. Sign documents or send them for signatures directly from tasks and issues using Zoho Sign extension in Zoho Projects. Extension

    • Writing by Hand in "Write" Notes

      Hi there! I just downloaded this app a few moments ago, and I was wondering if there was a way to write things by hand in "Write" mode instead of just typing in the keyboard. It would make things a bit more efficient for me in this moment. Thanks!

    • Deluge Learning Series – Best Practices in Deluge | December 2025

      We’re excited to bring you the next session of the Deluge Learning Series, focused entirely on writing cleaner, faster, and more reliable Deluge code. In this edition, we’ll dive deep into the essential best practices every Deluge developer should follow

    • Associate a Contact to a Campaign using deluge?

      If I want to add one record to another related list, which zoho function do I use? zoho.updateRelatedRecord is not it I don't think.  I simply want to take a "Contact" and associate it to a "Campaign" using deluge.  Can anyone help? contactId = 5122008000000796037;

    • Add "Groups" above "Users" in the Zoho Forms Left Menu

      Hi, We have Groups but you have to go to a Form and Share or use the Directory App to manage them, please add "Groups" above "Users" in the Zoho Forms Left Menu so you can manage them in 1 place within Zoho Forms too. Thanks Dan

    • Zoho Books | Product updates | October 2025

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From iOS 26 updates to viewing reports as charts, explore the updates designed to enhance your bookkeeping experience. Zoho Books Updates for Apple Devices At WWDC 2025, Apple

    • Adding Taxes to paid consultations in Zoho Bookings

      I created a 'paid' consultation under Zoho Booking and integrated it with payment gateways for online/instant payment before a booking is done. How can I add 'taxes' to the price of consultation? I can add taxes to other Zoho apps (liks Books, Checkout,

    • Zoho CRM Reports Module on Mobil App

      I have the mobile app and the reports module doesn't appear in the sidebar for some reason. I saw a Youtube video where the user had the Reports module on mobile. Is there a setting to show it on mobile? Thanks.

    • Inquiry on Help Centre Tab Customisation

      Hi Zoho team, I’m wondering if it’s possible to further customise the Help Center tabs, specifically the descriptions under Knowledge Base, Community, and Tickets. While the current setup allows customising tab names, being able to tailor the descriptions

    • Passing a form object to a function

      Suppose I have a sort_order field in multiple tables and I want to increment it by +1 onCreate of a new record. Is there a way to pass the form object as an argument into the function to keep things DRY? The following function from Zia works, but I'd

    • Next Page