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

      • Introducing Rollup summary in Zoho CRM

        ------------------------------------------Moderated on 5th July'23---------------------------------------------- Rollup summary is now available for all organizations in all the DCs. Hello All, We hope you're well! We're here with an exciting update that

      • Zoho Projects and CRM Integration in Analytics

        Hi Team, In Zoho CRM, I’ve integrated CRM with Zoho Projects and associated a project within the CRM. The integration is visible under the Deals module. However, I’m unable to find this data in Zoho Analytics. Does anyone know where this information is

      • Cursor lands on disabled fields when tabbing through forms

        As of yesterday, form behavior has changed w/ regard to disabled fields. Previously when tabbing through a form the cursor would skip over disable fields (as would typically be desired). But now the cursor is landing on all disabled fields, in all of

      • Permission query

        we have two permission settings i.e 'user permission ' & 'portal user permission' and both have the same setting that we enable for our users, Now those who have access to user permission can see a button on the pivot table, "regenerate" but those who

      • Zoho Forms sheet prefil

        I've been using zoho sheet prefill for a week and it was working perfectly, as soon as i deleted the particular sheet and replaced it with another one no matter what I do it cant find the record and i get this message. Could you please assist me to resolve

      • "Create Deal" button should default to the currently selected layout/pipeline

        When viewing Deals in Kanban or List view with a specific layout and pipeline selected, clicking "Create Deal" should default to that same layout — not the profile's default layout. Currently it always opens the default layout regardless of context, requiring

      • Zoho mail admin panel not opening

      • Dynamic Questions in Zoho Forms

        Is it possible to add dynamic questions (like displaying a user’s name) in Zoho Forms? I know this is possible in surveys, but can we implement similar functionality in Zoho Forms?

      • How to add "All Open AND Overdue" back to the Home Page Task Component?

        Hi everyone, I’m looking for a way to restore the Tasks component dropdown list on the Zoho CRM Home Page. Since the recent update to the Task area in my Home Page Classic View, the dropdown options (e.g., My Next 7 Days + Overdue) are too restrictive

      • Canvas: is it possible to have a fixed header?

        Hello. Does Canvas provide the option to have a fixed header, similar to the standard view? It would also be interesting for other parts of the interface, like the header or sidebar of the tab section. Thanks!

      • Removing Related Modules Lookup Fields Assignment / Relationship

        Issue: When creating a related list, I accidently selected module itself creating a circle reference. See attached. Situation: I wish to relating a custom module called "Phone Calls" to Leads and Contacts. Outcome: 1) I either want to remove the this

      • Zoho LandingPage pricing update: Essentials plan is now fully free!

        Hello Everyone, We have updated the Zoho LandingPage pricing structure. The Essentials plan, previously priced at $9 per month for 1,000 visitors, is now fully free, and the visitor limit has been increased to 5,000. With this change, users can start

      • ZOHO.CRM.UI.Record.open not working properly

        I have a Zoho CRM Widget and in it I have a block where it will open the blocks Meeting like below block.addEventListener("click", () => { ZOHO.CRM.UI.Record.open({ Entity: "Events", RecordID: meeting.id }).catch(err => { console.error("Open record failed:",

      • Zoho Survey – Page Skip Logic Not Working

        Hi everyone, I'm experiencing an issue with the page skip logic in Zoho Survey. Last week, it was working fine, and I haven’t changed anything in the settings. However, today the skip logic is not working at all. I also tried testing it with different

      • Introducing a smarter, faster, and more flexible charting experience

        Hello Zoho Sheet users, We're delighted to share the latest news about a major update to charts in Zoho Sheet! The new version supports dynamic data ranges, granular styling options, faster loading, and other interesting enhancements that allow you to

      • Built-in Date Functions in Zoho Analytics Query Tables

        I have a doubt about whether Zoho Analytics Query Tables provide built-in functions for start date, end date, and the current month

      • Zoho Form URL displays incorrect name

        Hi, I have a form I created called "Design Request form". It displays this way everywhere I look. However, in the URL, it shows up as "DesignJobRequestFormFINAL011325PROOFV1B" and I'm not sure why. I can't find where to fix this. Does anyone have any

      • Introducing Radio Buttons and Numeric Range Sliders in Zoho CRM

        Release update: Currently out for CN, JP, AU and CA DCs (Free and standard editions). For other DCs, this will be released by mid-March. Hello everyone, We are pleased to share with you that Zoho CRM's Layout Editor now includes two new field formats—

      • Is there a way to update all the start and end dates of tasks of a project after a calendar change?

        Hi! Here's my situation. I've built a complete project planning. All its tasks have start dates and due dates. After completing the planning, I've realized that the project calendar was not the right one. So I changed the project calendar. I now have

      • Finding rhythm through poetry

        Poetry has long been a powerful form of expression, discovery, and reflection. For many, it is a way to pen down their thoughts and experiences. The "poetic license" allows writers to shape their words with rhythm and flow. This year, on World Poetry

      • Zoho Desk Ticket SLA Level

        Hello, we have 2 levels of SLA escalation for our Tickets. Is there a way to display on the ticket information the level of SLA escalation the ticket currently on? I am aware that we can see in the ticket history the level of escalation that has been

      • Allow Font Size 11 in Editors...

        That is basic functionality...

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

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

      • Where is the scheduled report in New UI?

        Hi Team, Seems there is not such a field in New UI, hence I have to switch to old UI to handle request..

      • Building a Simple Raspberry Pi + Keypad IoT PoC with Zoho Flow

        I want to share a simple IoT PoC I recently built that connects a Raspberry Pi to Zoho Flow and Zoho Creator. The goal was to send PIN input data from a hardware keypad to Zoho and trigger a servo and buzzer for visual/audible feedback. This can serve

      • Enable integration of CRM CPQ functionality for ZohoOne customers using Zoho Finance application

        Hi there. I can't believe I'm needing to launch this idea as I would have thought this was a little obvious. Following a number of conversations with the technical team it's become evident that the CPQ functionality within CRM cannot integrate with Zoho

      • What's New in Zoho Billing | January 2026

        Excited about the latest enhancements in Zoho Billing? Our January updates bring an intelligent AI assistant, smarter subscription management, and improved tax compliance, saving you time and reducing manual work. Dive into the details below to see how

      • Is there a way to sell in a practical method multiple subscriptions of the same product? i.e. domain names

        In evaluating Zoho Billing, a hurdle to adopting it is that Zoho Billing does not seem designed to support businesses that sell multiple subscriptions of the same product. In our case, we need to sell and manage several domain names per client. Am I right

      • Update P_Leave: code: 7052 "Employee_ID": "Enter Employee ID"

        Hi, Zoho People - Update Leaves Can someone assist? ------------------------------------------------------------------------------------------ col = Collection(); col.insert("recordid":id); col.insert("Date_Check_Approval":zoho.currentdate); info zoho.people.update("P_Leave",col.toMap());

      • 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't rename groups on Mac desktop app

        I'm working on an up-to-date Mac with a freshly downloaded Notebook app. I'm trying to rename a group within a notebook. Here I have, left to right, a note, a group, and a note. I select the group. On the top left, I select Action. On the dropdown, "Rename"

      • Custom CSS for Zoho CRM Team Bookings embeded widget

        Hello, we are adding Zoho CRM Team Bookings (crm.zoho.com) in our public website. We know that we can change Theme Color, Font Color and Background Color: Zoho CRM Booking Styling But is it possible to change other CSS attributes e.g. Font Family, like

      • SAP Business One(B1) integration is now live in Zoho Flow

        We’re excited to share that SAP Business One (B1) is now available in Zoho Flow! This means you can now build workflows that connect SAP B1 with other apps and automate routine processes without relying on custom code. Note: SAP Business One integration

      • Strange behavior in CRM Number Field – Characters allowed but not "e"?

        Hi everyone, Has anyone faced this strange issue in Zoho CRM? In a Number field, it is possible to type some characters, but the character "e" cannot be entered. This was really surprising to me. Normally, a number field should restrict all characters

      • Best Way to Manage Approvals Within Blueprint Stages?

        Hi, I am working on a requirement involving Blueprint and approval logic in Zoho CRM and would appreciate some guidance. I understand that approval processes do not trigger when a record is currently within a blueprint, which makes it challenging to implement

      • Marketing Tip #25: Grow your social presence with a simple posting routine

        Consistency is one of the biggest growth drivers on social media. Regular content keeps your store visible and helps customers remember you. Even 3–4 posts a week can build momentum over time. The easiest way to stay consistent is to stop trying to create

      • Dashboard target enhancements

        Often individuals in IT are creating dashboards for their sales team. The ability to create a single dashboard that can be used by multiple people is key. A components for a dashboard have the ability to filter by logged in user which is great. However

      • How to update "Lead Status" to more than 100 records

        Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, Jonathan

      • Bring your own credentials (BYOC) for connections in Zoho Creator

        Hello everyone, We're excited to announce an important step forward in how integrations and authentications work in Zoho Creator. Zoho Creator is a versatile platform for integrations, enabling you to connect with thousands of third-party services using

      • Project Management Bulletin: March, 2026

        We are passionate about equipping our users with efficient solutions that help them run their businesses successfully. Our collective efforts over the past 2 years have culminated in the launch of Sprints 3.0— built with reliable features, impactful integrations,

      • Next Page