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

    • Add Support to Upload Inventory Items with Categories or Enable Separate Upload for Inventory Categories

      Currently, Zoho Inventory does not support uploading new items along with their parent and sub inventory categories using the item import feature. This creates challenges for businesses with structured inventory hierarchies when trying to upload items

    • i need active of my whatsapp business number in zoho

      i am waiting from 3 days for active of my whatsapp business account in crm ,its too late to configure.its just showing account details i can't able to know its connected or not anything else

    • Sub-Form Padding in CSV Export

      Hi, When you use the Sub-Form, and for example you have a Date Field on the Main Page, then Option 1 and Option 2 fields on the Subform, when you export this to CSV the Date column will only have the Date in 1 row, the first row, it would be nice to pad

    • Integrate your Outlook/ Office 365 inbox with Zoho CRM via Graph API

      Hello folks, In addition to the existing IMAP and POP options, you can now integrate your Outlook/Office 365 inbox with Zoho CRM via Graph API. Why did we add this option? Microsoft Graph API offers a single endpoint to access data from across Microsoft’s

    • Analytics Dashboard User Filters Default Value

      User Filters on Dashboard do not allow Unknown to be set as a default filter value. I have to include NULL values in my dashboard among other values but I can't include NULL/Unknown by default in Dashboard User Filters.

    • Microsoft is retiring Exchange Web Services (EWS): Here's what it means for Zoho Mail users

      Microsoft has officially announced the retirement of Exchange Web Services (EWS) for Exchange Online. If your organization is planning to migrate from Microsoft 365 to Zoho Mail, you may be wondering what this change means for you. The good news is that

    • Zoho Writer page break in a merge repeating region always adds an unwanted blank page

      Hi I'm merging a Zoho CRM record to a Zoho Writer document with a repeating region to display subform records on their own page within the document. When I try to insert a page break in a repeating region, the resulting merge always adds an unwanted blank

    • ZeptoMail account pending review, SMTP blocked with relaying-issues

      Hi ZeptoMail team/community, Our ZeptoMail account has been pending review for more than 3 business days and still shows: “Your account is yet to be reviewed.” I already created a support ticket, but have not received an update yet. Ticket details: Request

    • Zoho ERP | Product updates | June 2026

      Hello users, We launched Zoho ERP on January 23, and since then, our goal has been to help businesses streamline and manage their operations with greater efficiency, flexibility, and control. Since the launch, we've continued to enhance the platform every

    • Tip #83- Give Customers a Faster Way to Reach You with the Quick Support Plugin – 'Insider Insights'

      Hello Zoho Assist Community! Think about the last time a customer needed urgent support. They emailed in, waited for a response, got a session link, couldn't find it in their inbox, called back, and by the time the session actually started, a good chunk

    • How to Open .mbox file in Gmail with Attachments?

      Gmail offer users to backup INBOX folder in .mbox file format via Google Takeout Feature. Howver there is no such option to Restore Gmail MBOX. Thus I would like to suggest you to choose an alternate approach i.e. MBOX to Gmail Wizard. This utility will open .mbox file in Gmail with attachments.  Steps to open MBOX file in Gmail are; Run MBOX to Gmail Wizard Click Add File and add .mbox file. Enter your Gmail login credentials. Click Convert button. Finished! This is how you can open MBOX file in

    • Seperate rating scales for KRA's and Competencies in appraisals

      Is there a way to set-up different rating scales for KRA's and Competencies?? I would like to have; Met/Not met for KRA's and a 1-5 scale for the competencies I know how to set up custom ratings but it spans across both sections and I need them to be

    • Is there a CRM Deluge function available to convert an RTF (rich text field) to plain text (with no formatting tags)?

      I know that we can run reports so that RTF fields can either show as plain text or the text or the text with the formatting fields included (which is wonderful, btw, as it helps me adjust tags when I need to troubleshoot and just see what I need to see

    • How do I set the value of a Lookup field in SlyteUI?

      I am using the "crm-field" component in a SlyteUI project (code attached) https://www.zohocrm.dev/explore/slyteui/ui-components/crm-field/api#Properties The client would like to have this field pre-populated with a value. When I try to input the record

    • Mise à jour de Zoho Books – France

      Chers clients, Merci pour votre patience et votre soutien continu. Avec les évolutions réglementaires à venir en France nous introduisons de nouvelles fonctionnalités dans Zoho Books pour les clients français. Ces mises à jour ont été conçues pour répondre

    • CRM Developer Update: Mandatory field behavior changes in Zoho CRM APIs

      We are planning a few updates to Zoho CRM APIs that are expected to be rolled out by the end of October 2026. These changes are not live yet. We are sharing this early so developers and partners can review the impact and prepare in advance. What is changing?

    • Show Available Stock as a Column in Item Views (Including by Warehouse)

      It would be very useful to have Available Stock as a standard column in the Items list view. Currently Stock On Hand does not show the real picture for businesses managing orders and inventory. Example: Stock on Hand: 100 Committed to Sales Orders: 80

    • What's New in Zoho POS - July 2026

      Hello everyone, Welcome to Zoho POS’s monthly update, where we share our latest feature updates, enhancements, events, and more. Let’s take a look at how July went. Support for Saudi's ZATCA Phase 2 e-invoicing We have added support for ZATCA (Zakat,

    • How to make Contact a Help Center User

      I see a "IsPortalUser" checkbox on each of the Customer account, but I am unable to check the checkbox. How is this configured?

    • Introducing the new Fields API

      Hello everyone, Greetings from Zoho Desk's API corner! With the rising need for integrations to connect multiple tools in businesses, APIs need to be adaptive, reliable, consistent, and ready for dynamic operations. To support better performance, efficiency,

    • Service locations are tied to contacts?

      Trying the system out. And what I discovered is that it seems that the whole logic of the app is, I'd say, backwards. There is a Customer - a company. The company has contact persons and service locations can be associated with different contact persons.

    • Zoho ResearchStudio Shutdown Notice

      Hi ResearchStudio fam, We are writing to inform you that Zoho ResearchStudio will be discontinued from Oct 5, 2026. Thank you for being a part of our journey and for trusting us with your qualitative research work. What this means for your data: Your

    • SlideShare Downloader PDF not syncing in Zoho WorkDrive

      Hi everyone, I use SlideShare Downloader for save study PPT and PDF files. After download I upload files in Zoho WorkDrive, but sometimes PDF preview not showing or sync take very long time. Small files work okay but some bigger presentation files have

    • メモの保存場所、見直しませんか？― Zoho Notebookで始める情報管理

      ユーザーの皆様、こんにちは。ゾーホージャパンの朝香です。 AIを利用した業務が広がる中、AIによる情報漏洩対策を進めている組織も多いのではないでしょうか。 一方で、日常的に使っているメモの管理については、対策できていますか？ 業務中のメモには、重要な情報が含まれていることがあります。 そのため、AIへの入力だけでなく、メモの保存先についても是非確認をおすすめしたいと思います。 そこで今回は、使いやすさだけでなく、セキュリティにも配慮して設計されたZohoのノートアプリ「Zoho Notebook」をご紹介します！

    • Zoho Sheet offline is now live on iPhone

      Hello everyone, We've just rolled out offline support for Zoho Sheet on iOS—you can now create, edit, and analyze spreadsheets on your iPhone without an internet connection. Offline support has been a sustained priority for us. We're on the verge of bringing

    • You can now sync records from Custom Modules in Zoho CRM

      p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0.0cm; font-size: 12.0pt; font-family: Cambria; } p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph { margin-top: 0.0cm; margin-right: 0.0cm; margin-bottom: 0.0cm; margin-left: 36.0pt; font-size: 12.0pt; font-family: Cambria; } p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst { margin-top: 0.0cm; margin-right: 0.0cm; margin-bottom: 0.0cm; margin-left: 36.0pt; font-size: 12.0pt; font-family: Cambria;

    • Zoho ERP | Product updates | July 2026

      Hello users, We're back with another round of updates to help you streamline your operations. This month's release brings new features and enhancements designed to help you work more efficiently. Read on to discover everything that's new in Zoho ERP this

    • Fixed cost per task

      Is there any way to assign a fixed cost per task, but track time for internal reporting? Don't see a way to do this currently.

    • Please critique my CRM design

      I run a disability healthcare business with 2 business units. We run on Zoho One and are re-designing our CRM. We have developed the design concept ourselves, and I am hoping to get some critical feedback: 1) Noting that this is an early design of the

    • Set custom date creation for ticket using API in Desk

      Hi. all.. I want know if is possible to add ticket with custom creation date via API... This would to be great because we are moving from another platform to Zoho and we have need to keep all statistics for old tickets also. In api docs i didnt see nothing about custom date in ticket creation but i would prefer a confirm from comunity/support. Thank you P.S.: Sorry for bad english language

    • Allow Shopify / marketplace orders to be cloned

      Many businesses now use Shopify as a B2B ordering portal, not just a D2C ecommerce website. For B2B businesses, once these orders are imported into Zoho Inventory, Zoho often becomes the main system used to manage purchasing, stock, fulfilment and customer

    • How to Display a Logo Image on a Public Form?

      I would like to display a logo image in the header of a form. To achieve this, I added an Add Notes field to the form. The code below works perfectly for Zoho users accessing the form. However, when the form is made public, the image does not load properly:

    • Possible to define default font and size in Zoho Campaigns?

      Is it possible to define a default font (font, size and colour) for the text, H1 and H2 in Zoho Campaigns? For example: In a campaign, I add a text block, and the text is automatically century gothic, size 11, grey (6f6f6e) by default? Thank you!

    • Set Custom Colurs/Fonts/Style

      I know I can save blocks as books marks but it would be nice to be able to define a custom colour pallet, the style of the H1, H2 etc to save me having to copy a previous block and set them manually over and over again. Since the colour picker doesn't

    • Stop Zoho Projects From Automatically Adding Client Users

      I have a custom function that creates a Zoho Project for every Quote attached to a Deal when it moves to Closed Won. Everything works fine, except for the fact that connecting a Zoho Project to the CRM automatically takes the Contact associated with the

    • Zoho CRM - Kiosk Studio: Build Once, Execute Multiple Times with Loops

      Hello Everyone, Introducing Loop Functionality in Kiosk Studio. If you've ever built a Kiosk that needed to perform the same action multiple times like updating a list of contacts, scheduling calls for a batch of leads, or processing multiple products

    • Switching from Notebook to another product, too unreliable

      Not only is the spell check worse than useless, now there is a lag AFTER EVERY KEYSTROKE! This makes it impossible to use when there are innumerable products which provide this basic function. I made the mistake of relying on Notebook and have so many

    • Accidentally deleted a meeting recording -- can it be recovered?

      Hi, I accidentally deleted the recording for a meeting I had today. Is there a way I can recover it?

    • Zoho Desk: A Estruturação do Atendimento ao Cliente na era da IA

      O mercado de atendimento ao cliente vem passando por uma transformação que não é apenas tecnológica, é também comportamental. As empresas que antes mediam qualidade de suporte pelo tempo de resposta, hoje precisam medir pela experiência completa, unindo

    • API bookings/v1/json/appointment not adding additional fields he is returning this "customer_more_info": {"booking_form_type": "service"}

      Hi, I'm trying to add additional fields inside zoho booking appointment api and I'm passing same data as you told inside your documentation. He is returning following response "customer_more_info": { "booking_form_type": "service" } I'm using this parameter

    • Next Page