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

    • Inactive User Auto Response

      We use Zoho One, and we have a couple employees that are no longer with us, but people are still attempting to email them. I'd like an autoresponder to let them no the person is no longer here, and how they can reach us going forward. I saw a similar

    • Zoho People Attendance Module - Split Shifts

      Hello, Our business employs a number of college students who often split their workdays between work hours and class schedules, resulting in split shifts. For example: Employee 1 works 9am to 11:30am and then leaves for class, returning to work at 3pm

    • Zoho One subscription

      we have got Zoho CRM for 3 users and we paid for the app , and we have still 9 months to go , but if we join Zoho one , does it mean the payment for that subscription would be a waste? Please help. Thanks.

    • How Zoho CRM Can Enhance Your Faucets Accessories Business Operations?

      In today's competitive market, having a reliable CRM system is crucial for managing customer relationships and streamlining business operations. For businesses in the faucets accessories niche, Zoho CRM offers powerful tools to help manage everything

    • Dashboard

      I’m currently working on a project using the Zoho IoT Cloud with an ESP32 and MQTT. I’ve successfully connected the ESP32 to Wi-Fi and MQTT, and the data from the ESP32 is displayed in the telemetry section of the cloud. However, when I try to create

    • Can i connect 2 instagram accounts to 1 brand?

      Can i connect 2 instagram accounts to 1 brand? Or Do i need to create 2 brands for that? also under what subscription package will this apply?

    • Zoho Forms - Improved Sub-Forms

      Hi Forms team, I'm helping a client move from JotForms to Zoho Forms and I've found another opportunity for improvement. In the below screenshot, JotForm left and Zoho Forms right. The Zoho Forms Sub-Form is quite a poor visually. There is no way to make

    • What's New in Zoho Billing | Q3 2025

      Hello everyone, We are excited to share the latest set of updates and enhancements made to Zoho Billing in Q3 2025. From the latest GST updates to multi-level discounting, Zia-powered report summaries, and customizable web forms, these updates are designed

    • How to Delete Personal Account Linked with My Mobile Number in past or by someone else

      How to Delete Account Created with My Mobile Number in past or by someone else This is creating issues in making or sync with my credentials mobile and email address..

    • WhatsApp Business Calling API

      Dear Zoho SalesIQ Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho SalesIQ. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need

    • Does Zoho Learn integrate with Zoho Connect,People,Workdrive,Project,Desk?

      Can we propose Zoho LEarn as a centralised Knowledge Portal tool that can get synched with the other Zoho products and serve as a central Knowledge repository?

    • Marketer's Space - Going beyond basics: Smarter ecommerce marketing with Zoho Campaigns

      Hello Marketers, Welcome back to this week's Marketer's Space. In the last post, we discussed the basics of email marketing and how to get started with email marketing in ecommerce. In this part, we'll dive much deeper into some other advanced features

    • Connecting two modules - phone number

      Hi, I’d like some guidance on setting up an automation in Zoho CRM that links records between the Leads module and a custom module called Customer_Records whenever the phone numbers match. Here’s what I’m trying to achieve: When a new Lead is created

    • Zoho Marketing Automation 2.0 - Landing Page function not working

      Dear Zoho Team, I am working on implementing Zoho Marketing Automation 2.0, and am now looking into the section "Lead Generation". If I open the "Landing Pages" section, I immediately get an Error code: Error: internal error occurred. Can you help me

    • Unable to use Sign "You have entereed some invalid characters"

      Unable to use Sign "You have entered some invalid characters" I do not see any invalid characters. The text in "Leave a Note" is plain text which I entered directly into the field. See attached screenshot

    • cannot login from outlook on mobile

      Hi there,   I tried to set up my email accounts on my iphone using outlook, but it always return email address and password error. Please find the attachment for the screenshot. I am pretty sure that I typed in the correct email address and password and the imap has been enabled from zoho admin account. I can configure the email address on iphone default mail service as well as outlook on pc, the problem only occurs on the outlook app on mobile. I do need to use this app instead of the iphone default

    • Elevate your CX delivery using CommandCenter 2.0: Simplified builder; seamless orchestration

      Most businesses want to create memorable customer experiences—but they often find it hard to keep them smooth, especially as they grow. To achieve a state of flow across their processes, teams often stitch together a series of automations using Workflow

    • Messages not displayed from personal LinkedIn profile

      Hello. I connected both our company profile and my personal profile to Zoho social. I do see all messages from our company page but none from my private page. not even the profile is being added on top to to switch between company or private profile,

    • "Performed changes in the query is not allowed due to following reason" when adding columns or reordering data

      I'm trying to make changes to a query but every time i try to save it i get this error message. I'm not touching the data it's flagging. All I've tried to do is reorder a couple of fields and add a new one. Why won't it let me do this? It's a core query

    • Onboard new users easily with native screen recording in Zoho Projects Plus

      Communication involving both visual and audio elements tends to capture more interest among the audience. Whenever we onboard new employees to the organization, the task of engaging them in the induction sessions, and keeping the spark going in their

    • Request to Add Support for PDF Templates and More Flexibility in Email Editor

      Hi Zoho Campaigns Team, I hope you're doing well. I wanted to share some feedback and request a few improvements in the Email Template feature of Zoho Campaigns. Right now, we can create email templates using the HTML editor, which is helpful. But we’re

    • Can you stop Custom View Cadences from un-enrolling leads?

      I'm testing Cadences for lead nurture. I have set un-enroll properties to trigger on email bounce/unsubscribe, and do NOT have a view criteria un-enroll trigger. However, help documents say that emails are automatically un-enrolled from a Cadence when

    • Zoho Desk Android and iOS app update: Agent detail overview

      Hello everyone! We’ve introduced agent detail overview on the Zoho Desk Android and iOS app update. With this feature, you can get a complete view of agent’s tickets, response times, logged hours (for both tickets and activities), customer happiness ratings

    • Blog Widget: Show recent blog posts on my homepage

      Hey there I am using the Zoho Sites Blog feature. On my homepage, on the bottom I'd like to have a featured content section where I show some of my blog posts (selected, most recent, filtered by category and so on...). It would be nice to have a blog

    • How to iterate through excel data using zoho rpa

      I wanted to iterate or loop through excel data ( datatable). How can i do that

    • Zoho Commerce

      Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if not

    • Mass (Pull back) (Close WOs) (Close APs)

      Hi develop team. Just idea because Zoho FSM is great but its too manual. we have a lot of task to do every day and the system needs to have more features to automatic our tasks. I need to close several WOs, APs and Pull Back per day. Please we need mass

    • Customising Zohidesk portal default widgets

      Hello, I'm wondering how could I customise the default widgets such as "popular topics", "popular articles" using CSS or to make the tiles at the bottom match the ones that I made in the picture attached. I have made some custom widgets and edited them

    • If there’s a batch at the end, the ‘mark as inactive’ function doesn’t work.

      when my batch has a date to batch end and I "mark as inactive" he batch does not obey the status and reactivates the batch.

    • Seamless multilingual messaging and tone control in Zia IM Composer

      Hello everyone! Managing customer conversations across multiple languages can be time-consuming. Using Zia in the Instant Messaging (IM) Composer helps you overcome this by providing tools to translate content, adjust your tone, and refine your messages

    • Advanced Deluge help needed with custom function and COQL limits

      I have a scheduled function that takes a snapshot of specific metrics and saves them to a custom module. However I'm struggling with the limits of COQL. I attach my full code, but an example of the issues I'm having is that it's erroring with a 'Limit

    • Tip of the Week - Conditional Formatting Chart

      Conditional formatting allows you to highlight your data series based on a pattern or a trend in your data. This makes it easy for you to identify when your data reaches certain values or when it deviates from the trend.  Zoho Analytics allows you to

    • Zoho Campaign says "null"

      Here is what I did: 1. Created a list in CRM, made a form to fill information in the list. - This is working fine. 2. Created a flow to connect CRM (chose a the list) and want to add an event in Google Calendar. (Calendar is connected). Problem 1 - When

    • Zoho Learn - AI Translate

      Hi Learn team, I had a situation today where I was providing training to a client team and I had written articles into their Zoho Learn to support their learning. I realised that one of the team members was a non-native English speaker and they were struggling

    • Power of Automation :: Auto-Sync Custom Date Field Between Related Tasks via Blueprint Transition

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • Introducing auto-upgrade in Zoho LandingPage

      Hi everyone, We’re excited to share an upcoming update to help you get the most out of your landing pages — the auto-upgrade option, launching on October 22, 2025. Your landing pages are designed to bring in leads, and we want to make sure you never miss

    • Webhook Authentication Key

      As Google Ads' lead form extension does not integrate with Zoho CRM at the moment other than Zapier. I want to use the Zoho Flow webhook feature to send leads to Zoho CRM. Meaning creating a flow in Zoho Flow that triggers based on Webhook and then webhook

    • Workdrive comment links stopped working.

      I have marked a PDF file with 95 comments, they have worked for a while. When i clicked on them they brought me to the correct page and showed me the outline that i had drew on the plans. The comments included the page number of the outline, but now it

    • How to Bulk-Update Sales Orders in CRM

      Hi - I need to bulk update existing sales orders with dates from our ERP of when the sales orders were created. I made a date field on the Sales Order module where I want to insert that data. I can't Mass Update because I am not updating the fields to

    • Zoho ToDo in Cliq

      Our organization utilizes Zoho ToDo in the Zoho Mail Desktop app. Is there a way for these to show up in Cliq Desktop app as well?

    • Next Page