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

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #261 : Using Zoho CRM Skill to generate complex COQL queries

      Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub Copilot

    • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

      Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

    • 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

    • Recent Topics

    • Sync of products and orders between Zoho Inventory, Zoho Books and Shopify

      Good Day I migrated from QuickBooks to Zoho Books and Zoho Inventory at the beginning of this year. The migration team assisted with importing my data, but I am currently experiencing multiple issues affecting syncing between Shopify and Zoho. 1. SKU

    • Best practices for importing phone numbers

      I've recently found a problem with my phone provider, integrated with Zoho CRM, where a phone number that starts with 00 instead of + won't work. The problem has no solution: they tell me to replace all 00 with + I've always preferred using 00 instead

    • Copy + Paste in Notes: Text color and text background are not retained

      I've recently started using Zoho Notebook as an Evernote replacement. When copying and pasting text within Zoho Notes, I notice that the formatting of the text (text color and background color) is not retained when pasting. Only the attributes "Bold"

    • Add Comprehensive Accessibility Features to Zoho Writer

      Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current

    • MAKING ENTRY TIME MORE USER FRIENDLY AND FASTER O PREVENT TAB TIME

      I AM CURIOUS TO KNOW IF WE CAN MAKE IT MORE USER FRIENDLY WHILE MAKING BILLS , I MAJORLY USE OVER DESKTOP SO I AM SUGGESTING TO REMOVE TAB TIME WHILE ENTERING BILL OR MAKING INVOICE DIRECT JUMP TO ONLY REGULAR PARTS OF THE BILL . YOURS RAKESH 782866

    • Email Forwarding to Zoho Desk Failing After Migration from Gmail to Outlook (Microsoft)

      We recently migrated from Gmail to Microsoft Outlook. Since the migration date, emails sent by our customers are no longer being received by Zoho Desk. I tried setting up the email forwarding rules in Outlook similar to what we had in Gmail, but it still

    • Shopify B2B Integration: Option to Match Customers by Company Name

      It would be great if the Shopify integration could include Company Name as a customer matching option. At the moment customers can only be matched by: Email Name Email and Name Phone For businesses using Shopify B2B, the company is often the customer

    • Free Methods to Convert PST to MBOX on Mac & Windows

      Converting PST files to MBOX is often needed when moving Outlook mailbox data to email clients such as Thunderbird, Apple Mail, or other MBOX-supported applications. The process can be different on Windows and macOS, and free methods may involve several

    • Print checks for owner's draw

      Hi.  Can I use Zoho check printing for draws to Owner's Equity?  This may be a specific case of the missing Pay expenses via Check feature.  If it's not available, are there plans to add this feature?

    • Deliver exceptional customer experience with Field Service Management in Zoho Service Plus

      The advent of automation and personalization in the AI era has raised customer expectations exponentially for faster resolution of issues with less tolerance to friction in the process. Fast, accurate, and intelligent service that understands customer

    • Zoho Extensions 101: Building extensions for Zoho People

      Hello developers! Welcome to our new video series on building extensions for Zoho People! If you're new to extension development or looking for guidance on building extensions for Zoho People, you're in the right place. We've curated a series of videos

    • Build A Happier Workforce With Zoho People

      The success of an organization depends on its people. Therefore, a comprehensive and cloud-based HRMS software is an integral part of the IT ecosystem for the business. With a wide number of key modules to define the structure of an organization, manage

    • How to import PST files in Office 365?

      You can import PST files into Office 365 using native Outlook applications, the Microsoft Purview network upload method, or specialized third-party migration tools. Choosing the right method depends on whether you are migrating a single mailbox or executing

    • Project Change Orders and Additions

      We are in the process of migrating from QuickBooks Online to Zoho Books. We have Zoho One and like the ability to sync all of our data across everything. And I like that projects work in a way that's less dumb than QuickBooks. I'm trying to figure out

    • Support Recording Payments in a Different Currency Than the Invoice Currency

      We would like to request the implementation of a feature that allows users to record customer payments in a currency different from the currency of the original invoice. Current Limitation in Zoho Books Currently, if an invoice is issued in USD, Zoho

    • Customer Statement Showing Incorrect Negative Balance Due to Unused Advance

      Dear Zoho Support Team, We are facing an issue with the Customer Statement in Zoho Invoice related to customer advances/mobilization advances. The issue is that when a customer has made an advance payment that has not yet been fully utilized against invoices,

    • 【10/15・残席わずか】Zoho Championに学ぶ！Zoho Campaigns メール配信の基礎・活用勉強会

      皆さま、こんにちは。ゾーホージャパンの中野です。 10月15日（木）、Zoho コミュニティ初となる「Zoho Campaigns メール配信の基礎・活用勉強会」をオンラインで開催します！ 今回の登壇者は、Zoho の導入・活用支援に豊富な経験を持つZoho Champion の岡安 裕一さんです。 「一斉配信はできるけれど、現在の設定や運用が正しいか自信がない」 「Zoho CRMとZoho Campaignsのどちらから配信すればよいか分からない」 「リストとセグメントの違いや、配信停止の扱いを整理したい」

    • WorkDrive API: allow the modification time to be set when updating an existing file (x-last-modified-date is honoured on create, ignored on update)

      Hi, I contribute to the Zoho WorkDrive backend of rclone, the open-source sync/copy tool. I would like to raise one specific, narrow API gap that currently makes reliable syncing to WorkDrive impossible, and ask whether it can be addressed. What already

    • WhatsApp Coexistence

      Hello, please implement WhatsApp Coexistence, we need to track staff whatsapp chats on their PC and they need to be able to use WhatsApp on their mobile in around the office and warehouse, as we video call customers and send them product pictures. Thank

    • Kiosk / CRM Timezone Oddity

      I grant you this is much easier to see than to explain, and snapshots here won't help much and I don't want to snapshot my record anyway in a forum, so bear with me... Effectively... As there had been discussions on times coming through in different timezones

    • Restricted Account - "This user is not allowed to add in Zoho" - citbinvestment.com.

      Hi Zoho Support Team, I am attempting to set up user mailboxes for my domain citbinvestment.com, but I am receiving the following error: "This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details." > My MX, SPF,

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • Contact Sharing: Hide email alias from global address list

      As the superadmin, I would like to hide my domain aliases from appearing in the global address list. Currently, my end users can see all my aliases. The aliases also appear as type-in addresses when composing a new email. This is a potential security

    • Incorrect Currency Shown

      On Bills, each line shows the rate in the wrong currency (home currency).

    • This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • [Free webinar] Beyond prompt-to-app: Vibe coding with Zoho Creator | Creator Tech Connect (October 2026)

      Hello everyone, We are excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar consisting of purely technical sessions, where we dive deep into

    • Zoho Recruit Staffing version Interview using Zoho Meeting

      I would like to understand whether Zoho Meeting has a native integration with Zoho Recruit – Staffing Edition. As of now, I am unable to find the native Zoho Meeting integration within the Staffing Edition of Zoho Recruit. Could someone please confirm

    • Payroll needs to automatically remit taxes, not just give me the calculations

      Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

    • New enhancements to user management

      Hello everyone, We're excited to introduce a few enhancements to user creation and user preferences in Bigin! These updates give administrators more flexibility while inviting users, and give users more control over how their data is displayed. With this

    • How to add PHONE number to the Activites view

      This just seems like something so obvious and I can't believe I can't find it.  When I add a TASK for a person that I want to call back, I'd like to be able to see that persons PHONE NUMBER in the actives list. Ive added every field possible in the views, and the best that it gets is the person's name, but not their phone number. I'd like to be able to just print my tasks, seeing the person I need to call back with their phone number. Is there a way to do this in the FREE edition?  thanks.

    • Public dashboard table does not load in mobile view - TypeError reading 'viewType'

      Our public dashboard links have worked for years. We made no changes. Now the table widget does not load on mobile browsers. It loads fine on desktop, and it loads on a phone when we use "Request desktop site." Chrome DevTools shows this error in mobile

    • Cannot format "start date" field in Zoho Flow

      I am trying to recreate a flow that connects Inventory package creation to Zoho projects (where a task is created in a defined project). I've been able to troubleshoot everything EXCEPT the date fields; specifically the "start date" - which is quite important

    • Bank Transactions page shows too few transactions due to large header area

      In the Banking → Uncategorized Transactions screen, a lot of vertical space is being used by the account header, balance details, tabs, buttons, etc. Because of this, on a normal desktop screen I can see only around 2 transactions at a time, even though

    • Zoho Mail Android app update (v3.6.5) - Enhancements in Email Composer and Google Meet support

      Hello everyone! We are excited to introduce new enhancements in the Zoho Mail Android app (v3.6.5). Let's dive into what's new. Drag and drop email addresses between recipient fields You can now drag and drop the email addresses across the recipient fields:

    • Migration from QuickBooks to Zoho Books for the U.S. Company

      Is there any automation tool available to migrate data from QuickBooks to Zoho Books for a U.S.-based company? If yes, could you please provide the details?

    • Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México

      Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México Hola equipo de Zoho, Durante los últimos meses he observado una necesidad recurrente entre varios clientes en México relacionada con el cumplimiento fiscal del

    • Introducing Zoho Key Service, a simpler way to access LLMs without API keys

      Available in the Professional, Enterprise, and Ultimate editions in the US, IN, AU, JP, and CA DCs. Hello everyone, We are excited to bring Zoho Key Service (ZKS) in Zoho CRM, a simpler way for organizations to access and use third party LLMs. You can

    • Single Folder Archival in Zoho Mail

      Dear Zoho Mail Community, Have you noticed and wondered what the banner is about in your Zoho Mail's Archive Policy Settings? In Zoho Mail, users have traditionally archived emails to keep their inbox and active folders clean. While this helped reduce

    • Trigger Workflow Rules from subform row actions

      Hello all, Previously, workflow rules could only be configured at the module level, which meant subform data had to be tracked and managed manually. With this update, workflow rules can now be triggered directly by actions within subform rows, giving

    • Free Plan mail accounts details

      In the zoho mail pricing there's a free plan that includes: FREE PLAN Up to 25 Users 5GB* /User, 25MB Attachment Limit Webmail access only. Single domain hosting. I need to make sure that I'm able to create multiple email accounts in the form of: name@domain.com

    • Next Page