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

    • Hiding / removing Currency field from Layout

      Hello, I'm working on the LEAD standard layout of Zoho CRM. I like to have it as minimal as possible for our team. I could remove most of the field, but Currency is not possible. As lead, I don't quite understansd the necessity to have Currency as mandatory.

    • Field Dependency Not Working on Detail Page in Zoho Desk

      Hi Support Team, I’ve created field dependencies between two fields in Zoho Desk, and they are working correctly on the Create and Edit layouts. However, on the Detail page, the fields are not displaying according to the dependencies I’ve set — they appear

    • Turning off the recorded welcome in Zoho Webinar

      Is there a way to turn off the recorded voice that comes up at the beginning of every webinar session? It devalues the experience for attendees from feedback, interrupting their connection with our brand and delaying webinar start unnecessarily.

    • Issue with attaching files to a task through the API

      Hello! I've implemented a function that creates a task for every new bill that is created but I haven't been able to attach to the task the files which are attached to the bill. I have encountered multiple errors but the most common one is error 33003:

    • Tip #68- Exploring technician console: Remote Audio- 'Insider Insights'

      Hello Zoho Assist Community! Imagine being in the middle of a remote support session for a media production studio. The editor reports that their audio mixing software is behaving strangely, exported files sound distorted, and a persistent error tone

    • Copy all reports in a folder

      I currently have a database that I need to create multiple charts filtered by market. All of the charts are identical, I just change to of the filters and then I have the next market's set of charts. The only way I've been able to copy charts (reports)

    • Bin Tracking with eBay integration

      When trying to setup bin tracking on items that are linked to eBay listings using the built-in Zoho eBay integration, I keep getting this error: "Storage Tracking cannot be enabled for items that are manually fulfiled or for serial/batch items tracked

    • Allow Zia Agents using Zoho One Account

      When I went to try Zia Agents, it forced the creation of a new, separate account. This seems counter-intuitive to me. I don't want to manage a separate account. Plus, aren't Zoho One users the ones most likely to adopt Zia Agents most quickly? It seems

    • Make Camera Overlay & Recording Controls Visible in All Screen-Sharing Options

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an improvement to the screen-recording experience in Zoho WorkDrive. Current Limitation: At the moment the recording controls are visible only inside the Zoho WorkDrive tab. When

    • ID:2406331

      Hello, I have sent the form (ID:2406331) but no answer after two days. This is a paid subscription, I am not allowed to use the eighth paid slot of 50GB email space anymore, only 7 are being used. Is anyone going to help me please so I can use the eighth

    • 商談の特定ステージ選択時に、集計項目の入力を必須化したい

      こんにちは。Zoho CRMの商談管理で以下を実現したいです。レイアウトルールでは、集計項目を条件に選択できず実現できておりません。よい方法があればご教示いただけると嬉しいです。 ■やりたいこと 商談で特定のステージに変更する場合に、特定の集計項目（同じ商談データ内の項目。以降、集計項目Aとする）を入力必須化したい。 ■概要、状況 ・集計項目Aは、別のオブジェクトで、商談に関連する月ごとの売上を集計している数値項目 ・見積を顧客に提示した際に、集計項目Aに見積金額と一致するようにデータ登録する運用をしている

    • Setting default From address when replying to request

      At the moment, if I want to reply to a request, the From field has three options, company@zohosupport.com, support@company.zohosupport.com, and support@company.com.  The first two are really internal address that should never be seen by the customer and

    • Allow Multiple Scheduled Appointments with Zoho Support

      Dear Zoho Team, I hope you're doing well. First, thank you for introducing the option to schedule support calls via the Zoho CRM booking link. This has been a fantastic enhancement, eliminating the need for back-and-forth coordination when scheduling

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

    • Share Edit while in Workflow

      There are times that while a writer document is in the middle of a workflow the user that's responsible for that stage of the workflow needs to bring in other people to work on the document. Currently there is no way for the user to be able to allow other's

    • How to add a custom hyperlinked button in ZohoCRM Canvas Builder?

      I am building custom views in ZohoCRM Canvas builder, with one view that will be used for a client Portal. Trying to add a custom button that when clicked opens a separate window to a ZohoForm. How do I do this?

    • Event Time Zone in meeting invites are confusing users

      When sending calendar invites to internal and external users, the first section "Event Time Zone" is confusing people and they are automatically declining events. Can this section please be removed??? It already shows the correct time zone next to the

    • How do you create an event/meeting in a different time zone?

      Does anyone know how do you create an event/meeting in a different time zone? 

    • Extend GitHub Commit Integration to Tasks in Zoho Projects

      Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding the current GitHub integration in Zoho Projects, specifically the ability to link commit information. Current Limitation: As of now, Zoho Projects

    • Add Native GitHub Pull Request Creation & Management from Tasks/Bugs

      Hi Zoho Projects Team, I am submitting a feature request to enhance our development lifecycle by enabling native GitHub Pull Request (PR) creation and management directly within Zoho Projects. The Current Limitation: Currently, the GitHub integration

    • Add Actionable “Smart Commits” for GitHub Integration

      Hi Zoho Projects Team, I am submitting a feature request to introduce Smart Commits support for the GitHub integration in Zoho Projects. The Current Limitation: Currently, Zoho Projects offers a "passive" integration. Including a Task ID in a commit message

    • Add Unified Project-Wide Development & Release GitHub Dashboard

      Hi Zoho Projects Team, I am writing to submit a feature request for a Unified Development & Release GitHub Dashboard that provides centralized GitHub visibility at both the Project and Milestone levels. The Vision: We need a single "Command Center" that

    • Add Native “Create GitHub Branch” Action for Tasks and Bugs

      Hi Zoho Projects Team, I would like to submit a feature request to enhance the GitHub integration in Zoho Projects by adding the ability to initiate a GitHub branch directly from a Task or Bug. The Current Limitation: Currently, Zoho Projects lacks a

    • One-click “Open in VS Code” from Zoho Tasks/Bugs with automatic branch checkout

      Hi Zoho Projects Team, I am submitting a feature request to enhance the development workflow within Zoho Projects, specifically the ability to open a Task or Bug directly in VS Code and automatically check out the related branch, similar to capabilities

    • How to reduce inventory valuation when not tracking individual items?

      We purchase clothing items wholesale, embroider them with a company's logo, then resell. The garment style, size, color, etc. changes according to a customer's desire, so we don't track the individual item's purchase within Zoho Inventory unless there's

    • Merge tag didn't work in the campaign sent to test email list

      Hello, I just sent out a campaign to my list of test emails (including my personal one). The merge tag that's supposed to put a first name of the contact $[UD:FIRST_NAME||]$ didn't work. Where the first name of the contact should be displayed there's

    • Add Camera Background Blur During Recording

      Hi Zoho WorkDrive Team, Hope everything is well. We would like to request an enhancement to the video recording feature in Zoho WorkDrive. Currently, the camera preview displayed during a recording does not support background blur. This is an essential

    • Sync Data from MA to CRM

      Currently, it's a one-way sync of data from the CRM to MA. I believe we should have the ability to select fields to sync from MA to the CRM. The lead score is a perfect example of this. In an ideal world we would be able to impact the lead score of a

    • How can I transfer data from Production to Development environment?

      Hi, I am using Creator V6 and would like to bring all the data in production to the Development and Testing environments? Is there an easy way of doing that or I have to export and import each table?

    • filter on sheets mobile (iOS, iPadOS) does not work

      re-posting this as a question because reporting as a problem netted zero responses... I have this issue on every spreadsheet, whether imported or created natively in Zoho Sheets. I can use on desktop without issue: but on iOS the filter dropdowns are

    • How to map fields from Zoho Recruit to Zoho People

      I've got these fields from my Job Offer that I'm trying to map to the Work information fields in Zoho People, but they arent showing up. For example, how do I get the department name field (in the job post) to map to the work information field in Zoho

    • Mass email from Report output

      Hi, I'd like to send a mass email based on a report output. The report is pulling multiple information from linked modules. Each line of the report ends up with a contact name, email and multiple field values pulled from the linked modules (some are custom

    • SalesIQ Operator Activity Reports in Zoho Analytics

      I'm busy building a dashboard in Zoho Analytics and I want to include SalesIQ stats in the dashboard, but I'm unable to get the statistics mentioned in the attached image. Any idea where I can get the stats for Operator Activity?

    • Deluge Update Function

      I am struggling to get this function to work no matter what changes I make - this is the constant error (my code is 30 lines long): Data type of the argument of the function 'get' did not match the required data type of '[BIGINT]'at lineNumber 31 I am

    • Introducing SlyteUI : From Idea to a Working Interface in Minutes

      Hello everyone! Are you spending hours building basic UIs? Does even the smallest customization feel like a major task? CRM customization should feel intuitive and straightforward, not time consuming or exhausting. SlyteUI makes this possible by simplifying

    • 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

    • How to see Tickets that require a response

      When an agent checks his work he should be able to see a list of tickets that he has to reply to. Currently he can only see if the ticket is closed or open. However the ticket might be open but we are waiting for the customers reply, so there is nothing

    • 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

    • [Free webinar] Integrations in Zoho Creator - Creator Tech Connect

      Hello everyone, We’re 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 featuring in-depth technical sessions designed for developers, administrators,

    • Trigger workflows from SLA escalations in Zoho Desk?

      Hey everyone, I’m currently working with SLA escalation rules in Zoho Desk and ran into a limitation that I’m hoping someone here has solved more elegantly. As far as I can tell, SLA escalations only support fairly limited actions (like changing the ticket

    • Next Page