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

    • merhaba

      merhaba sosyal medya paketimiz mevcut ama yorumları göremiyoruz ve o yüzden cevap veremiyoruz destek rica ediyoruz.

    • Teaminbox not working

      We couldn't send or receive any mail within the team inbox. Displaying error 'Unable to process this request.'

    • Related lists New option in missing

      hi I have created quite a few modules and added as related lists to my main module. Some have new, some dont I can not see why?

    • Cliq and ToDo integrations?

      I'm a bit surprised not to find any way to open a Cliq chat for the current thread, or to create a Zoho Mail ToDo from a thread. Are these on the roadmap?

    • Reply-to names are mangled

      Hello, I'm seeing an odd behavior in replies. Steps to reproduce: 1. Click reply to an email from "John Doe <doe.john@example.com> in TeamInbox Expected outcome: TO field pre-filled with "John Doe <doe.john@example.com>" Actual outcome: TO field pre-filled

    • I CANT UPGRADE MY FREE ACCOUNT

      I TRY TO UPGRADE MY FREE ACCOUNT AND I COULD NOT UPGRADE IT CAN SOMEBODY TELL ME WHY? AND I HAVE THE MONEY SO.

    • Level up your ASO game with tags & categories in store reviews

      Introducing tags and categories in Apptics' store reviews Dear Apptics community, If your app is listed on the Play Store or App Store, you already know how important store reviews and ratings are. They’re one of the most direct signals of user sentiment

    • Including attachments with estimates

      How can attachments be included when an estimate is sent/emailed and when downloaded as a .pdf? Generally speaking, attachments should be included as part of an estimate package. Ultimately, this is also true for work orders and invoices.

    • Adding VENDOR SKU to PURCHASE ORDERS

      how can we add the Vendor SKU when issuing a Purchase Order , so the PO shows the Supplier SKU and our own Internal SKU , which is what we want to receive into the system .

    • Possible to freely prompt/query CRM data using Zia?

      Is it possible to prompt Zia to query on any information stored in the CRM, especially on the data stored in custom text fields? My use case is the people in my organisation have entered lots of text in custom text fields to capture information from an

    • Restrict employees to take only one day holiday from a multi-day festival holiday

      Hi everyone, I have a requirement related to Optional/Festival Holidays in Zoho People. For example, in the month of May there are three optional holiday dates: May 11, May 12, and May 13. Employees can choose one of these days as their optional holiday.

    • Cannot modify colours in invoice email template

      I have tried switching browsers... but I cannot change the (pretty horrible) default colours in the preset email when sending an invoice... the blue banner, red outstanding total and the bright green button... I can change other things but not the colours?

    • Cannot find zpuid for Zoho Projects user

      I'm using the Zoho Projects v3 API to create a task. The task is created successfully, but in order to assign the task owner, the "Create a Task" API also requires the zpuid of the task owner. Unfortunately I cannot find any user-related API calls that

    • Print a document from Zoho Writer via Zoho Creator

      If i use the code below i can get writer to create a new document or email it to me but i want to be able to print it directly from the browser and not have to send it via email and then print. Below is the code im using. Attached options form zoho writer

    • Allow styling for specific Subform fields in Zoho Creator

      Sometimes in forms we need to visually highlight a specific field inside a Subform (for example Sanctioned Amount, Approved Value, Critical Fields, etc.) so that users immediately notice it while entering data. Currently there is no direct UI option to

    • Career site URL - Suggestion to modify URL of non-english job posting

      Hi, I would like to suggest making a few modification to career sites that are not in english. Currently, the URL are a mix of different languages and are very long. It makes for very unprofessional looking URLs... Here is an example of one of our URL

    • 3/18 オンライン勉強会のお知らせ Zoho ワークアウト （無料）

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 3月開催のZoho ワークアウトの開催が決定しましたのでご案内します。 今回はZoomにて、オンライン開催します。 ▶︎参加登録はこちら（無料） https://us02web.zoom.us/meeting/register/BoNTN7zYR8OvOPGShqBY0A ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目指すイベントです。

    • New 2026 Application Themes

      Love the new themes - shame you can't get a little more granular with the colours, ie 3 different colours so one for the dropdown menu background. Also, I did have our logo above the application name but it appears you can't change logo placement position

    • Placeholder format in Number field does not reflect Max Digits configuration

      When the Max Digits (Maximum digits of number) property is set to a smaller value (for example, 2 digits), the placeholder in the input field still displays a 7-digit format (#######). The same behavior can also be observed in Decimal and Currency field

    • How does SKU work when selling products in parts in Zoho Inventory

      Hello everyone, Zoho Inventory does not understand the physical cutting of the piece.. It only tracks quantities of the unit (like feet ). So when you sell part of an item, the system simply reduces quantity for that SKU. Assume that i have a 50 ft long

    • CRM Cadences - working timesThe Friday afternoon? The next Monday morning? Not at all?

      I think I’m writing saying that cadence emails are only sent during the organisations set working hours in CRM. So if a particular email is set to send for example in three days and that lands on a Sunday (when working hours are not operational) when

    • CRM Cadences - working times

      I think I’m right in saying that cadence emails are only sent during the organisations set working hours in CRM. So if a particular email is set to send for example in three days and that lands on a Sunday (when working hours are not operational) when

    • Push Notification for New Bookings in Zoho Bookings App

      when a someone schedules an appointment through the booking page, is there any option to receive a push notification in the mobile app?

    • Intergrating multi location Square account with Zoho Books

      Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.

    • Add the same FROM email to multiple department

      Hi, We have several agents who work with multiple departments and we'd like to be able to select their names on the FROM field (sender), but apparently it's not possible to add a FROM address to multiple departments. Is there any way around this? Thanks.

    • Zoho Desk View Open Tickets and Open Shared Tickets

      Hi, I would like to create a custom view so that an agent can view all the open tickets he has access to, including the shared tickets created by a different department. Currently my team has to swich between two views (Open Tickets and Shared Open Tickets).

    • Clone Banking Transaction

      Why is there no option to CLONE a Transaction in the Banking module?? I often clone Expenses (for similar expense transactions each month) so I would also like to clone Income transactions. But there is no option in Banking to clone an existing Income

    • Zoho Expense - Bi-Weekly Report Automation

      Hi Zoho Expense Team, My feature request is to please include an option to automate creation of reports bi-weekly (every 2 weeks)

    • Application Architecture in Zoho Creator: Why You Should Think About It from the Start

      Many companies begin using Zoho Creator by building simple forms to automate internal processes. This is natural — the platform is extremely accessible and allows applications to be built very quickly. The challenge begins to appear when the application

    • Arquitetura de Aplicações no Zoho Creator: Por que pensar nisso desde o início

      Muitas empresas começam a utilizar o Zoho Creator criando formulários simples para automatizar processos internos. Isso é natural — a plataforma é extremamente acessível e permite construir aplicações rapidamente. O problema começa a aparecer quando a

    • Dark Mode - Font Colors Don't Work

      When editing a document in Dark Mode and selecting font colors, they don't show up on screen.  Viewing/editing the same document in Light Mode shows them just fine.

    • How to Customize & Reorder Spaces in Zoho One 25 (Spaces UI) — Admin Tips Not in the Docs

      Hey Zoho Community, After digging around in the new Spaces UI, I found a couple of admin features that aren't well documented yet but are really useful. Sharing here in case others are looking for the same things. 🔁 How to Change the Default Space Users

    • System Components menu not available for Tablet to select language

      I have attached a screenshot of my desktop, mobile, and tablet menu builder options. I am using 2 languages in my application. Language Selection is an option under the System Components part of the menu, but only for my desktop and phone(mobile). My

    • Approvals in Zoho Creator

      Hi, This is Surya, in one of  my creator application I have a form called job posting, and I created an approval process for that form. When a user submits that form the record directly adding to that form's report, even it is in the review for approval.

    • How Zoho Desk contributes to the art of savings

      Remember the first time your grandmother gave you cash for a birthday or New Year's gift, Christmas gift, or any special day? You probably tucked that money safely into a piggy bank, waiting for the day you could buy something precious or something you

    • Estimate PDF Templates - logo too large

      Hello, I cloned a standard estimate template, but my logo is showing up much larger than intended. This doesn’t happen with the standard invoice template, where the logo displays correctly. How can I adjust the logo size in the estimate template? Thank

    • Select CRM Custom Module in Zoho Creator

      I have a custom module added in Zoho CRM that I would like to link in Zoho creator.  When I add the Zoho CRM field it does not show the new module.  Is this possible?  Do i need to change something in CRM to make it accesible in Creator?

    • Invoice emails not sending but reminders are

      I am a new user. I have been creating some dummy invoices before I go live and have struck a block. Emails for the invoice are not being recieved by the recipient, however, when I send a reminder for the same invoice the email is sent. NOTE: I have checked

    • Deleted account recovery

      I ended up accidentally deleting our Zoho invoice account while trying to work something out. Emailed support for recovery and restoration of the deleted account, if possible, but they responded by saying they can't find an account associated with that

    • Devis et factures multipage coupées

      Bonjour, je suis sur Zoho invoice et je rencontre un problème sur mes devis et factures lorsqu'ils dépassent 1 page. je me retrouve souvent avec des lignes coupées ou le sous total page 1 et le total page 2. j'aimerai savoir s'il existe une possibilité

    • Next Page