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

        • Different languages for users

          Hello, Do you plan to enable individual users to select their languages for interface? Currently language can be changed for everyone - it looks like a settings for a whole portal, which is not good when you are working internationally. Best regards,

        • 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

        • 2025年 Zoho コミュニティ 活動の振り返り 🎉

          ユーザーの皆さん、こんにちは！コミュニティチームの中野です。 2025年も多くの学びと出会いがあったZoho コミュニティ。 本記事では今年の活動を振り返りながら、フォーラムの投稿・参加者の皆さん・イベントのハイライトをご紹介していきます。 目次 フォーラム：注目の投稿 フォーラム：多くの貢献をしてくださった方々 ユーザー交流会振り返り ワークアウト振り返り その他のトピックス 1. フォーラム：注目の投稿 本フォーラムでは様々な議論と知識の共有が行われました。 ユーザーの皆さんが日々の業務で直面する課題を投稿し、経験豊富なユーザーさん達が実践的な解決策を提供してくださいました。

        • Customer Management: #3 Giving Customers Control & Privilege

          Rio, the founder of RenoTech Solutions, a fast-growing digital service company, found itself juggling a dozen different services for its clients. They handled one-time setup fees, recurring monthly invoices, and custom milestone-based billing for projects.

        • 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

        • Next Page