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.

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 flyout.

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 #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.

    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs

    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! 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.

    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands

    • Recent Topics

    • How can users unblock their blocked Zoho Mail accounts?

      After the reason for the account block (storage exceeded, spam detection etc.) has been rectified, the user can unblock the account from the UnBlock Me page. Account support@edu2review.com  Edu2Review is an education review platform, we rate the quality

    • Adding additional fields for batch information

      Hello, I am looking at adding additional information into our inventory module. we would like to be able to see up to 8 attributes that will be individual & different for each batch (i.e. batch specific information) but currently I seem to only be able

    • Dynamic Pickup List Values using Deluge and Client Script

      I would like to dynamically show Pickup List Values For example we need to fetch some data from an on premise application and display it so they can choose and pick This can be done in Creator but I didn't find anything for CRM

    • Validation Rule for Controlled Stage Movement in Deals Module (Deluge Script)

      For keeping a control over module stage or status, you can use the below deluge script. The below deluge script defines validation control over deals module stages: // Function to validate allowed stage transitions in the Deals module map validation_rule.LeadStatustValidation1(String

    • Pick List Issues

      I have created a pick list that looks at a table in a sheet, it selects the column I want fine. Various issues have come along. The option to sort the pick list is simplistic, only allows an ascending alphabetical sort. Bad luck if you want it descending.

    • Four types of task dependencies

      "Nothing is particularly hard if you divide it into small jobs."                                                                                                                  - Henry Ford Projects, small or large, are driven by simple work units called tasks. Monitoring standalone tasks might look simple but as the workflow becomes elaborate, tasks may start relying on one another. In project management, this relationship between tasks is termed as "Task Dependencies". Dependency between tasks arise

    • 1099 tracking

      Do zoho books offer feature of tracking for 1099's for contractors, etc? Quick books offers this feature and wondered when/if Zoho books will do same

    • VAT-type Taxes in US Edition?

      I'm located in the US, and I use the Zoho One US edition of Books. We are in the process of registering with Canadian authorities for their GST / HST, which is a VAT-type of scheme. It is not immediately obvious to me how one would deal with input tax

    • 2 users editing the same record - loose changes

      Hello, I'm very new to Zoho so apology if this has been addressed somewhere i can't find. I have noticed the following: If we have 2 users put an inventory item in edit mode at the same time: say user1 click on edit and user2 while user1 is still in edit,

    • Schedule sms to be sent later

      When will you make available an option to send sms's at a later time??? You finaly have this option available on emails, so it will be very useful to have it also with sms. Our sms provider, has already this available but we cannot use it because you

    • Ecommerce integration with prestashop

      Development of campaigns integration with prestahop. When???

    • How to create an article containing images and rich text via the api?

      Hi, I'm trying to migrate our kb articles from our previous helpdesk service, and import them to ZohoDesk. Is there any way to create an article that contains images?  Is it possible to add formatting to articles created via the API? Thanks, Adam.

    • Number of statement execution limit exceeded on deluge scheduled function

      I'm working on a send email functionality in creator that sends out crew work orders at the end of the day each day for the next day. I'm running into the issue that zoho is unable to handle the number of statements that I am doing to be able to successfully

    • Color of Text Box Changes

      Sometimes I find the color of text boxes changed to a different color. This seems to happen when I reopen the same slide deck later. In the image that I am attaching, you see that the colors of the whole "virus," the "irology" part of "virology," and

    • Zoho SignForm In Progress But Cannot Be Completed

      If a person starts signing a document (via SignForm), but closes the window before submitting, Zoho marks the document "in progress", but how do they finish signing it?

    • How to show Assemblies AND component items in a report

      Hi Is there any way in Analytics to create a report that shows the Composite Item AND the Component Items with mapped quantity? It seems that the component item is not exposed in any table that I can find. Also, the same question but for Stock on Hand.....this

    • Mandatory Messages for Specific Members in Zoho Cliq Channels

      Hello Zoho Cliq Team, We hope you're doing well. We would like to request a feature enhancement to Zoho Cliq that would allow marking certain messages in a channel as mandatory for specific members — with built-in tracking and reminders. 🎯 Use Case:

    • Admin Access to Message Read Statistics in Zoho Cliq

      Hello Zoho Cliq Team, We hope you're doing well. We would like to request a feature enhancement that would allow admins or channel owners to view read/unread statistics for messages, even if they were not the original sender. 🎯 Use Case: Currently, in

    • Online Member Visibility in Channels (Similar to WhatsApp Group Presence)

      Hello Zoho Cliq Team, We hope you're doing well. We’d like to request an enhancement to Zoho Cliq’s channel experience by introducing online presence indicators for channel members — similar to how WhatsApp shows how many people in a group are currently

    • Show ticket field in Zoho Desk only if that same field is not empty (API‑created records)

      Zoho Team , We have a ticket workflow where every ticket is created via API based on dynamic logic from an external form. That form has complex logic and already decides what’s relevant to ask, and the API only populates fields in Zoho Desk based on that

    • Multiple Products on Ticket

      Good morning. We will classify all tickets based on the product. Users sometimes send different requests on the same ticket, so we are facing some challenges. Is there a way to add more than one product to the ticket, or is there a way to tie the product

    • Não recebo Email de confirmação e validação de cadastro do PagSeguro

      Olá, utilizei uma das minhas contas de email Zoho para criar um cadastro no PagSeguro, contigo o email com o link de confirmação da conta não chega no meu email Zoho (nem.ma caixa de spam, nem na lixeira, e nem em outras pastas). Outros emails do PagSeguro

    • Does Thrive work with Zoho Billing (Subscriptions)?

      I would like to use Thrive with Zoho Billing Subscriptions but don't see a way to do so. Can someone point me in the right direction? Thank you

    • accounts payable and receivable subaccounts

      How to create accounts payable and receivable subaccounts? Being that I have several clients and in my balance sheet have to specify the accounts of each client and not only appear "accounts receivable or accounts payable" ??

    • DUPLICATING WORKFLOWS IN CREATOR

      Hi all, I want to duplicate and slightly amend 3 workflows in Creator so that I don't have to keep typing in all the rules and properties each time. I can see lots of videos on CRM with the 3 dots at the top of the workflow, but nothing like that in Creator.

    • Add SKU to query options in `items` API endpoint

      It would be very useful to be able to pull items by SKU in the API as this is a commonly used unique ID that tends to be consistent across systems.

    • Estimates and invoices being sent from company-wide address, rather than individual

      In our organization, team members send estimates and invoices through Zoho Books by using the "Send Email" function. However, for certain users, the system defaults to sending estimates and invoices from a shared organizational email address (e.g., company@example.com)

    • Need profit margins for books in estimates & invoice

      https://help.zoho.com/portal/en/community/topic/show-my-cost-or-profit-while-creating-estimate

    • Decimal places settings for exchange rates

      Hello, We are facing issues while matching vendor payments with banking feeds. As we often import products/services exchange rate comes into play. Currently, ZOHO allows only six digits for decimal places. We feel that conversions like JPY to INR require

    • Item Level Notifications

      I need to create a custom workflow based on the creation of an estimate that has a SKU/Item name that matches certain criteria. I can have it generated based on a total amount, but not at the item level. Is this possible?

    • Cannot categorize a bank deposit to an income sub-account

      When I go to categorize a bank deposit, I am not able to see any income sub-accounts. If I set up an income account without a parent, then I am able to categorize a transaction into that account, but as soon as I make it a child account, it disappears

    • ZV Extension passkey changes in v5.7.0

      Has there any changes to the how passkeys are managed in ZV - Chrome extensions v5.7.0? Namely, if the passkeys were already implemented/enforced as 2FA on a certain webpage, but ZV does not track them yet. Would that be the issue for my use case?

    • What's New in Zoho Billing - August 2025

      Hello everyone, We are excited to share the latest updates and enhancements made to Zoho Billing in August 2025 to improve your overall billing management experience. Keep reading to learn more. Notify Customers About Subscriptions via WhatsApp Business

    • How do I get my account id?

      Hello, I followed the instructions to get a list of accounts of the currently authenticated user (which is me, and I am logged in). But when I follow the below instructions I get the following error: ERROR: {"data":{"errorCode":"INVALID_TICKET","moreInfo":"Invalid ticket"},"status":{"code":400,"description":"Invalid Input"}} Instructions that I am following: GET - User account details Purpose The API retrieves the list of accounts of the currently authenticated user.  Request URL  http://mail.zoho.com/api/accounts

    • Why are tasks not showing in Zoho Calendar?

      Hi there, I updated the Zoho calendar preferences for Task records to show on the calendar together with Meetings and Calls - see attached screenshot. Despite of that, Task records still won't show on the calendar. Is there a specific reason why this

    • Zoho Payroll: Product Updates - July 2025

      Over the past month, we've focused on making Zoho Payroll more flexible, compliant, and easier to use—whether you're processing complex payouts, ensuring accurate calculations, or meeting local tax regulations. Here's what's new: One-Time Payments and

    • Discussion for “sub product”, “sub item” or “child products”

      Hello everyone, In some CRM systems, there is the ability to associate products in a hierarchical manner within a quote. For example: Product A: Gold Plan Product B: Setup Product C: Connector Product D: Silver Plan Product B: Setup Product C: Connector

    • Retrieve Accidental Deleted User

      Is there a way to undelete a user who accidentally deleted themselves?

    • Request for Support - CRM Integration Issues

      I’m reaching out to request assistance with the following items: 1. Zoho Forms Integration with Zoho CRM We are currently using Zoho Forms to send the Global Credit Application form to our customers. The intended workflow is for the form submissions to

    • Knowledge Base Module

      How to enable the knowledge base module in zoho crm account. I saw this module in one crm account but unable to find it other zoho crm account. can anyone know about this?

    • Next Page