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.



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          • Sticky Posts

          • 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
          • Kaizen #152 - Client Script Support for the new Canvas Record Forms

            Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ



                                ご検討中の方

                                  • Recent Topics

                                  • Can I use a Standalone CRM Function as the Callback URL For Async Export Data API?

                                    I am creating an export job using this API https://www.zoho.com/analytics/api/v2/bulk-api/export-data-async/create-export/view-id.html There is a "callbackUrl" key in the CONFIG object. I tried copying the URL for a standalone function in CRM which can
                                  • Add RTL (Right-to-Left) Text Direction Support Across All Zoho Learn Editing Interfaces

                                    Hi Zoho Learn Team, Hope you're doing well. We would like to request an important enhancement to Zoho Learn regarding support for right-to-left (RTL) languages such as Hebrew and Arabic. 🔹 Current Issue While the Knowledge Base Article editor provides
                                  • Add Hebrew Support for Meeting Transcripts Provided by ZIA in Zoho Cliq

                                    Hi Zoho Cliq Team, Hope you're doing well. We would like to request the addition of Hebrew language support for the Meeting Transcript and Summary feature in Zoho Cliq. Currently the transcript and summary feature is available for recorded meetings and
                                  • Remote Control Functionality During Screen Sharing in Zoho Cliq

                                    Hello Zoho Cliq Team, We would like to request the addition of remote control functionality during screen sharing sessions in Zoho Cliq. Currently, while screen sharing in Cliq is very useful, it lacks the ability for another participant to take control
                                  • Centralized Organization Information Management in Zoho One

                                    Dear Zoho One Support, I'm writing to propose a feature that would significantly improve the user experience and streamline data management within Zoho One. Current Challenge: Currently, managing organization information across various Zoho One apps requires
                                  • Enhance Zoho One Conditional Assignment to Fully Reassign App Settings When Changing Departments

                                    Hi Zoho Team, We’d like to submit a feature request regarding the current behavior of Zoho One’s conditional assignment logic when moving a user between departments. 🔧 Current Limitation As it stands, Zoho One’s conditional assignment does not remove
                                  • Ability to Filter Alias Mailboxes in Zoho Recruit

                                    Dear Zoho Recruit Team, I hope you are doing well. We would like to request a feature enhancement regarding the handling of alias mailboxes in Zoho Recruit. Currently, when we connect an alias mailbox (e.g., jobs@domain.com) from our Zoho One account
                                  • Automatic Department and Employee Sync Between Zoho One and Zoho People

                                    Dear Zoho Support, I'm writing to propose a valuable feature request that would streamline data management and improve user experience within the Zoho ecosystem: automatic synchronization between departments and employees in Zoho One and Zoho People.
                                  • Prefered Bin Missing in android APP

                                    Andoroid app dosent show preferred bin in the picklist. The workaround support reccomend is to use the computre to create the picklist. it shuld be information to be shown aas basic for the pciker.
                                  • Open Sans Font in Zoho Books is not Open Sans.

                                    Font choice in customising PDF Templates is very limited, we cannot upload custom fonts, and to make things worse, the font names are not accurate. I selected Open Sans, and thought the system was bugging, but no, Open Sans is not Open Sans. The real
                                  • Function #1: Convert an accepted Estimate to Sales Order automatically in Zoho Books

                                    As you’re aware, Zoho Books provides a default option to have the estimates automatically converted to invoices once your customer accepts them. Many of you wanted a similar option for sales orders, so here’s a workflow that converts accepted estimates
                                  • Reusable Jira Connection for Multiple Zoho Projects Imports

                                    Hello Zoho Projects Team, We would like to raise a concern and submit a feature request regarding the Jira → Zoho Projects migration process, specifically around how Jira connections are handled. Current Behavior: When setting up a Jira connection for
                                  • Zoho invoice doesn't support Arabic language

                                    I added a clause in the terms & conditions section in Arabic but it doesn't appear when I sent or print it.
                                  • Recurring Invoice Placeholder Not Updating Billing Period

                                    Hi, I’m using Zoho Invoice Free and want the billing period to update automatically in recurring invoices. In Item Description I tried: Billing Period: %(m-6)% %(y)% to %(m-1)% %(y)% but even if the invoice date is in 2026, it still shows the period based
                                  • Related list Mobile Device

                                    Hello, We use an the Zoho creator application to make reports linked to Accounts. On the computer: it's easy to go the Account and see all the created reports in the related list below On iPad/Phone ZOHO CRM APP: we cannot see the reports on those accounts
                                  • Can't update the company address in zoho invoice

                                    Dear Sir/Madam, I want to update the company address in Zoho Invoice but failed. It popped out a sentence "Invalid value passed for Website". Please advice how to solve this problem. Thank you.
                                  • Is there a plan to allow for the hierarchical organization of Customers / Companies in Zoho Billing?

                                    We have a few customers who have organizational structures that we haven't quite found a way to deal with in Zoho Billing. In CRM, these sub-companies (or subsidiaries or whatever you want to call them) all have another CRM account as the parent account.
                                  • 【Zoho CRM】作業リスト機能リリースのお知らせ

                                    ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、作業リスト機能リリースのお知らせ情報をご紹介します。 目次 作業リスト機能 概要 機能① 自分の未完了の活動 機能② 処理待ち 機能③ 自分の作業リスト 作業リスト機能 概要 営業チームでは、CRM内に業務やデータが分散しているため、管理が煩雑になりがちです。この断片化は、機会の見逃しや生産性の低下につながります。 作業リスト機能は、タブを横断する業務項目をひとつのカスタマイズ可能なダッシュボードに集約し、業務を効率的に管理できるようにします。
                                  • SalesIQとPageSenseの利用について

                                    初めての投稿で場違いだったらすいません。 弊社ではSalesIQを運用しているのですが、追加でPageSenseの導入もしたいと現場からの声があります。 両サービスともクッキー同意バナーが必要なサービスなのですが 弊社では同意無しに情報はとりませんという方針なので 2つ入れると2つバナーを出す必要がでてきます・・・ 両サービスを運用されてる方があれば運用状況とか教えてほしいです。 PageSenseについては詳細まで機能を理解してないなかでの質問です。
                                  • Parent-Child Tickets using API or Deluge

                                    Hi Everyone, We are looking at the parent-child ticketing features in Zoho Desk. We want to be able to create a parent ticket at customer level and nest child tickets underneath. The issue we are facing is to be able to automate this. I'm checking the
                                  • Closing connected ticket after closing WA conversation

                                    Hi, At the moment, once someone sends a message to our WA number, a corresponding ticket is automatically created. After the question is answered, our support department closes the chat/conversation. However, after that, the connected ticket is still
                                  • Note sync turn off

                                    Hi, Is it possible to turn off notes sync between task notes and the parent module? (Account/Deal)
                                  • Basic Plan Active but Survey Creation Still Limited to 3 Surveys

                                    I have an active Basic (Monthly) subscription (valid period: Dec 24, 2025 – Jan 24, 2026), but the system still limits survey creation to only 3 surveys, which matches Free plan behavior. The subscription appears active in Portal Information, however
                                  • 2025 in Review: Powering Field Services Forward—One Feature at a Time

                                    As 2025 draws to a close, it’s time to pause and reflect on a year of meaningful progress at Zoho FSM. This year was all about listening closely to our customers and partners, building with purpose, and continuously improving the way field service teams
                                  • API Support for Creating Invoices with Batch-Tracked Items

                                    Hi Zoho Community, I am working on an integration where we create invoices in ERPNext and push them to Zoho Books. I need to send batch-tracked items (batch numbers) when creating invoices. I could not find any reference in the Zoho Books API documentation.
                                  • New to automation - please help

                                    Hi there! We are new to automations in Zoho. We built out one automation campaign and it seems to be firing off for some people but others not. Please advise what's the best practice or if anything we should tweak. Thank you so much!
                                  • Unable to Create Zoho Booking via the Book Appointment API

                                    Its giving the below error {     "response": {         "errormessage": "Error setting value for the variable:customer_details\n null",         "status": "Error"     } } Request: POST Url: https://www.zohoapis.in/bookings/v1/json/appointment attached Zoho-oauthtoken
                                  • Task Details on task template

                                    When creating a task template in settings that task details seem to be missing. Is it not possible to set the details of a task, such as the priority, type, reminder settings, and custom field values?
                                  • Building Toppings #3 -Testing and publishing Bigin toppings

                                    Hey Biginners! In previous forum posts, we discussed what a Bigin topping is and explored the Bigin Developer Console's features. In this post, we're going to create a topping from scratch and discuss how to test and publish it. Our topping will automate
                                  • markdown files?

                                    How can I import a markdown file into a note?
                                  • Mail to Zoho Notebook

                                    In the Instuctiosn I faound as email add@notebook.app In my account I see add@eu.notebook.app What is correct please
                                  • Auto-Invite Users to Portals in Zoho CRM based on Conditions

                                    Hello Everyone, You can now automate portal invitations in Zoho CRM with the new Auto-Invite users feature in Portal management. No more manually enabling portal access one by one. With this enhancement, you can automatically send invites for users to
                                  • Growth You can Count On: Zoho Billing's 2025 Journey

                                    As we wrap up 2025, we’re reflecting on a year rooted in steady progress and meaningful growth for Zoho Billing. Every enhancement we have introduced was built to support scalable and reliable billing growth for your business. From launching the Enterprise
                                  • Need help with creating workflow with Bigin and Clickup

                                    Can you please help me with this? I am trying to create a workflow in Zoho Flow wherein a bigin Pipeline deal moves to Decision Closing, it will create a task and subtasks in Clickup, under the condition/filter that the Deal name contains the word Social
                                  • [Webinar] Automate generation of wills, trusts, POAs, and other estate planning documents with Zoho Writer

                                    Managing the lifecycle of the estate planning documents such as wills, trusts, and POAs, from client intake to final storage, can be complex and time-consuming. Join our live webinar to learn how Zoho Writer transforms this process by automating document
                                  • Create / Update Rule in TeamInbox when record is updated in ZohoCRM using flow?

                                    I'm currently evaluating options and trying to work out if the possible scenario is possible; If a record in ZohoCRM is updated, take 2 of the fields from that - lets call them 'OrderRef' and 'OrderTo'. Using flow, if a record is added or updated, add
                                  • Plans to allow more columns of monitoring, and monitoring not only your own channels?

                                    Are their any plans to allow more columns of monitoring, and monitoring not only your own channels? Here's why - I'm sure I'm not alone in that we sell other brands products, so not only am I interested in my own brand social channels, but also the social
                                  • Unwrapping the best practices for the Zoho Desk mobile app: Part 1

                                    In focus: Empowering the field and frontline customer support representatives Imagine having to carry your computer everywhere to respond to customers, handle escalations, and update your process. This series presents you with efficient tips to handle
                                  • dealing with post dated cheques

                                    Hi, can you help me please the best way to deal with this We sell an item of three months duration that is paid for with post dated cheques in monthly stages example - item is sold £3000 Cheque 1 is for £1000 due at time of sale (say Sept) cheque 2 is dated 25th of next month (Oct) cheque 3 is dated 25th of next month +1 (Nov) Now, with invoice number one it's simple - i send a standard invoice as usual But with the other two here's what i want zoho to do next month i want it to send an invoice on
                                  • 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
                                  • Next Page