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

    • Custom View and Custom Fields on Zoho Books

      Hi, I have some custom fields on Estimates and Invoices. I also use Custom Views so I can have a lot of information at a glance. I want to include my custom fields as columns in my custom views of estimates / invoice, but it looks like is not possible.

    • %PaymentLink%

      Does not work. Software creates a BAD link. ....and yes payment options are turned on. Link on the invoice pdf once opened will work but this template is a joke.

    • Can Zoho Marketing Automation send OTP codes via WhatsApp during user registration?

      The flow I would like to implement is: A user signs up in the mobile app and enters their phone number. The system generates a one-time verification code (OTP). The OTP is sent to the user via WhatsApp message. The user enters the code in the app to confirm

    • Where to show Customization Field ?

      Dear Sir, I have made some New Field in Item Field Customisation. Now I don't require that field in Estimate, Sales Orders etc. I just wants that field in Sales Invoice to Show/Hide... Is that possible ?

    • What's New in Zoho Analytics - February 2026

      Hello Users! We're back with another round of updates for Zoho Analytics. This month's release focuses on giving you greater flexibility in how you visualize, manage, and act on your data - with new features like custom visualizations, remote MCP server,

    • Zoho Books (and other Finance Suite Apps) - Clickable Item Name on Invoices and Reports

      Hi Zoho Books team, It would be really helpful if the Item Name on Reports were clicable to take me to the item. The same on Invoices, often I am looking at an invoice and I want to look at the deails of a product. A link here would be helpful to jump

    • ZOHO Reports are taking longer time to get refresh

      Hi Team, Since last few days, I'm facing issues in getting updated reports. For eg: right after making an expense entry or even posting a journal, it is taking longer then expected for the updated reports. Refer below: "You are viewing the report that

    • Display actual mileage on an invoice

      My users are creating expenses in Zoho expense. For example, they expense 10 miles and get paid 7 dollars (10 miles * IRS rate of .70). If I look at the expenses in Zoho Books, it does show them at 10 miles at .70 cent When I add these expense to an invoice

    • Can't change form's original name in URL

      Hi all, I have been duplicating + editing forms for jobs regarding the same department to maintain formatting + styling. The issue I've not run into is because I've duplicated it from an existing form, the URL doesn't seem to want to update with the new

    • Can you create relationships BETWEEN contacts within the same module

      I am setting up my CRM, and I want to have a way to connect contacts within the same module.  Is there a way to do this?  If not - how do I decide how to split up contacts to make connections?  What are best practices for this? We have clients who need

    • Function and workflow to create customer payment and send receipt

       I am attempting to set up a workflow/custom function for the automatic creation of a customer payment and sending the email receipt, but am receiving the error "Improper Statement Error might be due to missing ';' at end of the line or incomplete expression" I've been over everything several times and cannot see where the error is (code is copied into the attached document).  I haven't used custom functions before with Deluge, so it's very likely something very simple, or I've completely mucked

    • Disable Sign Up option in Zoho Creator Portal and show only Sign In page

      Is it possible to disable the Sign Up option in a Zoho Creator portal? The requirement is to show only the Sign In page and completely remove or hide the Sign Up page, so users cannot create accounts directly from the portal login page. Is there any setting

    • Can I view the KB in the same way as a customer logged in as my Agent?

      Sorry if this seems a mad question.  I have some Articles that I want to be seen by my Agents and the status of these is set to Agents only.  We also have some that are set to Public. When I sign in with my private email address (as a customer) I can

    • What’s New in Zoho Inventory — Latest Features, Integrations & Updates | December 2025

      Zoho Inventory has evolved significantly over the past months, bringing you smarter, faster, and more connected tools to streamline your operations. Whether you’re managing multichannel sales, complex fulfillment workflows, or fast-moving stock, our newest

    • Which user's capacity is used for Shared Mailbox storage?

      We use shared mailboxes at our company, and their size is increasing daily. Which user(s)'s total mailbox limit is being used up by this space?

    • Evernote (ENEX) import limitations

      I have been with Evernote since 2010, but the latest price increase is ridiculous. I am currently testing Zoho Notebook as a replacement. I am impressed so far - if it were not for critical need to import legacy Evernote notes, I would 100% migrate to

    • Can I create a CODE 128 custom field for my items in Zoho Inventory and then use it for generating Sales Orders?

      Can anyone helps me, I don't want to use the SKU code for scanning my products.  ​Because all my products have a CODE-128 label attached.

    • Prevent duplicate with custom fields?

      I was wondering something about custom field/custom modules in Zoho Desk. For some reason you can make a custom field mandatory but not unique? For example, if I create a custom module to manage equipment and renewal and make a field serial number no

    • Zoho Books' 2025 Wrapped

      Before we turn the page to a new year, it’s time to revisit the updates that made financial management simpler and more intuitive. This annual roundup brings together the most impactful features and enhancements we delivered in 2025, offering a clear

    • Multiple Vendor SKUs

      One of the big concerns we have with ZOHO Inventory is lack of Vendor Skus like many other inventory software packages offer. Being able to have multiple vendor skus for the same product would be HUGE! It would populate the appropriate vendor Sku for

    • Create Invoice automated with Package

      Does anyone knows how to create an invoice from a SO when we have created the package? We do these manually. and validate that the product packed is the product invoiced (if the order is partially packed) Regards, JS

    • Unable to integrate Zoho Projects and Zoho Workdrive

      I'm a Zoho One subscriber. When I go to Zoho Projects > Settings > Marketplace > Zoho Apps I do not see an option for Zoho Workdrive but I do see one for Zoho Docs that does nothing. How do I get the option to integrate Zoho WorkDrive and Zoho Proje

    • Disable payment thank-you emails

      Hello, can someone please tell me how to disable sending of the "Payment Thank-You" emails? 

    • How to backdate record payment for the invoice

      I would like to record a payment which happened 2 days ago, but I am not able to select any date later than today. I backdated the invoice, too, but it doesn't change anything

    • Help with deluge script

      Hi Community, this is my first Deluge script. I've pieced it together from reading various articles I want to use it in a workflow to 1 Convert a lead to a contact 2. Create a record in a custom module Below is what I have got so far but it does not fire

    • Marketer's Space: Why email authentication matters in Zoho Campaigns

      Welcome back to another post in Marketer's Space! If you've recently started using Zoho Campaigns, you've probably come across terms like SPF and DKIM. You may have also noticed emails that show "via zcsend.net" in Gmail when testing or sending campaigns.

    • Edit email address that appears on invoice

      Hi How do I change the email address that appears on invoices, it is showing the email address that i used to sign up to zoho with but I want to change it to another email address that we use for accounts. also is there a way to edit the position of a

    • Google Fonts Integration in Pagesense Popup Editor

      Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance Zoho Pagesense’s popup editor with Google Fonts support. Current Limitation: Currently, Pagesense offers a limited set of default fonts. Google Fonts

    • Clone Entire Zoho Boooks Organization, including all transactions for testing & training

      Can Zoho Books support help with direct cloning of entire Zoho Books & Inventory Organization? including all transactions, just like a copy & paste or disk cloning. Is this possible?

    • Restrict portal signup until registration form and payment are completed

      Hi everyone, I am working on a Zoho Creator portal for a project. In our business flow, users must first fill out a registration form and pay a registration fee before they are allowed to access the portal. However, when I share the portal link, users

    • Zoho Creator In-App Notification

      Hi Team, I have implemented an in-app notification using code, as it required some customization. I followed the example in the link below: https://www.zoho.com/deluge/help/pushnotify-using-deluge.html#Example I have a couple of questions regarding this

    • Tip #64- Exploring Technician Console: Screenshot- 'Insider Insights'

      Hello Zoho Assist Community! Have you ever needed to capture exactly what's happening on a remote machine, whether to document an issue, guide a customer, or keep a record of your session? That's where the Screenshot feature in Zoho Assist comes in! With

    • Relating Invoices to Projects

      Hi Zoho team, If I have already created previously an invoice in Books, so I want to know how can I associate it with a relevant project? Thank you

    • Create a quote/estimate that includes a range of prices

      I am interested in using Zoho Books' Quote templates to create estimates for my customers. I do a mix of fixed-bid quotes and quotes based on an hourly rate. For the hourly rate quotes/estimates, I like to include a price range, for example: 2-4 labor

    • Budget

      I have just upgraded to the standard plan in order to be able to utilize the budgeting function and record budget amount

    • Capirec bank Automatic feed update

      Can anyone tell me if Zoho supports Automatic bank feed update from a Capitec bank account in south africa?

    • Free webinar! Accelerate deals with Zoho Sign for Zoho CRM and Bigin by Zoho CRM

      Hello, Paperwork shouldn’t slow you down. Whether you’re growing a small business or running a large enterprise, manual approvals and slow document turnaround can cost you time and revenue. With Zoho Sign for Zoho CRM and Bigin by Zoho CRM, you can take

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

    • Upload own Background Image and set Camera to 16:9

      Hi, in all known online meeting tools, I can set up a background image reflecting our corporate design. This doesn't work in Cliq. Additionally, Cliq detects our cameras as 4:3, showing black bars on the right and left sides during the meeting. Where

    • 【まだ間に合う！】Zoho ユーザー交流会 | AI活用・CRM・Analytics の事例を聞いて、ユーザー同士で交流しよう！

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 3月27日(金)に東京、新橋で開催する「東京 Zoho ユーザー交流会 NEXUS」へのお申し込みがまだの方は、この機会にぜひお申し込みください！（参加無料） ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー イベントの詳細はこちらから▷▷ https://www.zohomeetups.com/tokyo2026vol1#/?affl=communityforumpost3 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    • Next Page