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. });

  8. ZDK.Client.getFlyout('EMIlyout').open(
  9.     { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
  10.     { data: loanDetails }
  11. );

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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Kaizen #235 - Automating record restoration using Recycle Bin APIs in Zoho CRM

        Welcome to another Kaizen week. Here's a question that came up in our developer forum: "I'm working on a piece of software to automate conversion of Leads into Deals based on order status from my company's website. There are some cases where a previously
      • Open PDFs using Zoho PDF Editor

        Hello users, In this article, we will be exploring the open PDF capability in Zoho PDF Editor to collaboratively edit PDFs, insert text and images, add fillable and e-signature fields, and more. You can upload PDFs upto 50 MB or 150 pages. Password-protected
      • One Contact with Multiple Accounts with Portal enabled

        I have a contact that manages different accounts, so he needs to see the invoices of all the companies he manage in Portal but I found it not possible.. any idea? I tried to set different customers with the same email contact with the portal enabled and
      • Bank Feeds Breaking Constantly

        Hey Everyone, I have already reached out to support about this issue but I am wondering if anyone else is having the same issue. My bank feeds keep breaking within days of me fixing them by updating the credentials. Its been happening for a while and
      • Timed addition to segments

        Hi there - hoping you can help me figure out a graceful way of doing this: • I want to add contacts to a Segment in Campaigns based on a Stage pick-list field value X in CRM - that bit's fine. The problem is that I only want to add them to the Segment
      • Zoho Developer AI Agent = Claude AI + MCP Server + Zoho Ecosystem

        Hello Zoho Community 👋 I’m excited to share a recent integration we’ve worked on at Officehub Tech: ✅Claude + MCP Server + Zoho Creator Zoho Developer AI Agent – an AI-powered Zoho automation platform This solution connects Zoho applications with an
      • Cliq iOS can't see shared screen

        Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards
      • 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
      • CRM

        How do I build an email funnel of 10 emails with decision tree ie; if yes use this email if no use this email. Also I cannot figure out how to add more groups or see my whole groups. I've set up different groups like attorneys is one group of companies/people
      • WebDAV support

        I need WebDAV support so that I can upload/download (and modify) documents from my local file system. Is anything planned in his direction?
      • Replying from same domain as a catch-all?

        I have 2 domains setup on Zoho, both with associated email addresses. They look something like this: john@example.com (primary address) john@test.com (this domain also has a catch-all setup) I use the catch-all for test.com as a public-facing email address
      • Is there a way to show contact emails in the Account?

        I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail
      • Internal Fillable Contract with Zoho Writer (Before Sending to Client)

        Hi everyone, I’m trying to automate the following process in Zoho CRM and would appreciate some guidance. Process: When a Deal moves to a specific stage, CRM triggers an automation. CRM sends a contract template to an internal team member so they can
      • Import Quote from CRM into document in Writer?

        Hi, I created a quote for a proposal in the Zoho CRM and was wondering if there is a way to embed the quote into a document in Zoho Writer so I can make our sales proposals look a little nicer. Is that possible?
      • Zoho Sheet for Desktop

        Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?
      • Can I convert MSG to HTML on Mac?

        Yes, you can convert MSG files to HTML on a Mac using software Aryson MSG file Converter. This tool allows you to convert Outlook MSG emails into multiple formats, including HTML, PDF, EML, PST, and more. It preserves all email content, attachments, metadata,
      • Duplicate Leads Notification Help!

        Hello! I have several web forms that have a duplicate lead notification that are being sent to the creator of the web form. I understand how to change the form entry notification, but I am specifically looking to change the recipient of the "Duplicate Lead" notification. Any help you can offer is greatly appreciated! TIA, ~ Jenn
      • Adding Calendar Display to Home Page

        I would like to display my calendar in a module on the Zoho CRM Home Page. I can't figure out a way to do this.  Is it possible to display the CRM Calendar on the Home Page?  
      • Schedule a Call by Date and Time when a specific lead status is selected

        Hi Wanting to create a workflow where a call can be scheduled by date & time when a specific lead status is selected. Can only currently set the date by Due Date - Trigger Date - Plus 'x' day(s) Thanks
      • Incoming email replies not automatically associating with Deals/Opportunities - Is this possible in Zoho CRM?

        Hello Zoho Community, I'm running a travel agency (B2B and B2C) and we've been struggling with what seems like a basic functionality that we cannot get to work properly. Our use case: We send emails to suppliers (hotels, transportation companies) and
      • Duplicate Leads Concerns with Round Robin and Lead Approval Process

        It is great to have the Duplicate Lead Approval Process, there are a few issues with the process that I would greatly appreciate taken consideration in enhancing. It appears that A Lead comes in Lead owner assigned by the Round Robin Check for Duplicate,
      • Private email threads

        When sending a Private email or receiving a response once the email thread has been marked as 'Private'- is there a way to trigger the system to "restart the clock"? I am finding that when someone responds to a 'Private' thread that it is opening the
      • SLA Notification

        Team members have been receiving this notification and feel as though it is as random. Explanation on this notification is appreciated! Also, is there a way to disable this notification?
      • Map: Output None

        Hi, Checking if you help me inspect this block The code below triggers during Successful form Submission from another Form. // rec_a = formA[ID!=0]; rec_b = formB[ID!=0]; ListA = List(); //subformA for each recA in rec_a.ItemSubform { for each recB in
      • Use arbitrary images in deluge

        I am sending emails from my deluge code and I would like to be able to include a few images in the email template. While I know that I could put the on a website somewhere and link to them in the HTML, that is not what I want due to email client security
      • 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
      • Sync Attachments in Comments from Zoho Desk to Zoho Projects

        Hello Zoho Desk Team, We hope you're doing well. We are actively using the Zoho Desk–Zoho Projects integration, especially for reporting and managing bugs/issues between support and development teams. Current Limitation: After creating a bugs/issues via
      • Add a way to connect Log360 Cloud logs with Zoho analytics

        Hi, Several month ago Log360 Cloud was added to zoho one - and this is great. But as far as I see there is no prebuilt way to connect Zoho analytics to the logs we have in Log360 Cloud. Please add a prebuilt connection like we have for so many other zoho
      • Auto sync Photo storage

        Hello I am new to Zoho Workdrive and was wondering if the is a way of automatically syncing photos on my Android phone to my workdrive as want to move away from Google? Thanks
      • Funcionalidades y configuration ZohoDesk

        Creo que no estoy sacando el provecho adecuado a la application quisiera solicitar una capacitación al respecto
      • How to call Functions and perform Write Operations using Page Scripts?

        Hi everyone, How to call a function from a Zoho Creator application within a Page Script, also how to perform write operations (adding or updating records) using page scripts?
      • Connecting Airwallex in Zoho Books

        I have a question. I’m trying to connect our Airwallex account to Zoho Books, but the integration does not seem to work. Could you please guide me on how to properly connect Airwallex? I need to see the expenses also, since it only shows the profits now
      • Questions Regarding Helpdesk & SalesIQ Customization and Email Setup

        Hello, I hope you’re doing well. I have a few questions regarding Helpdesk and SalesIQ: Can the emails sent to customers via helpdesk tickets be fully customized — including signature, subject line, and other elements? Also, is it possible to send these
      • Button Duplication when emails forwarded or replied

        When I create a new email template in campaigns and send it out it looks fine to all the users, however if that email is then on forwarded or replied to then all buttons within the email duplicate.  See below The one on the left is the original one.
      • Workdrive backup and default storage selection

        Hi community, I have been informed by Zoho that workdrive will be the default storage mechanism for crm and projects. These 2 Apps seem to have different design on how they interact with workdrive for storage. 1. Crm: seems to have files saves at the
      • Ask the Experts 27: Onboarding and managing support reps

        Hello everyone, We are back with our Ask the Experts (ATE) series for 2026. This year, we bring experts to help you address customer support challenges using Zoho Desk. For our first ATE, we are getting into the human side of customer support. "Every
      • 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
      • Enhancements for Currencies in Zoho CRM: Automatic exchange rate updates, options to update record exchange rates, and more

        The multi-currency feature helps you track currencies region-wise. This can apply to Sales, CTC, or any other currency-related data. You can record amounts in a customer’s local currency, while the CRM automatically converts them to your home currency
      • Marketer's Space: Why your open rates suddenly drop to zero?

        Hey everyone—welcome back to another post in Marketer's Space! If you regularly track the performance of your campaigns, open rates are probably one of the first numbers you check after sending an email. So it can be quite alarming when a campaign suddenly
      • Bulk upload images and specifications to products

        Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.
      • Next Page