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.


    • Recent Topics

    • Kanban View for Projects.

      At our organization, we describe active projects with various statuses like "In Proofing" or "Printing" or "Mailing". In the Projects view, one can set these project statuses by selecting from the appropriate drop-down. While this works, it's difficult to view and comprehend the progress of all of your projects relative to each other in a table. Creating a Kanban view for projects where I can move them from one status to another allows me to see where each project is in the order of our workflow.

    • Useful enhancements to Mail Merge in Zoho CRM

      Dear Customers, We hope you're well! We're here with a set of highly anticipated enhancements to the Mail Merge feature in Zoho CRM. Let's go! Mail Merge in Zoho CRM integrates with Zoho Writer to simplify the process of customizing and sharing documents

    • How can I see the actual copy sent to the specific contact?

      I have setup a journey in Marketing Automation and created addition of contact in a specific list as the trigger, emails are sending to the contacts, but I can't see the actual copy sent to any specific contact in the list. Please guide me, where can

    • Client Script for Task Module

      When do we expect the client script for the tasks module?

    • Formula Fields inside of Blueprint Transitions

      We would like to have formula fields inside of blueprint transitions. We type in currency fields and would like to see the result inside of a formula field. Our use case: Send out a price for XY 1. Filling out cost fields 2. See gross profit

    • inventory based on bills and not physical stock

      Hello, I have noticed a very annoying issue with zoho books/inventory. I use composite items. If I have an sub assembly item on back order, I am unable to make up the composite item, even when I have received the goods and it is in my stock. I have to convert the PO into a BILL in order for the item to show as 'Accounting Stock'. The problem is that the supplier Invoice is not shipped with the goods, but can follow even a week later. So I have to make the bill have a 'dummy name and number' until

    • Using Zoho Inventory for managing Item compatibilities

      Use case: Using Zoho Inventory for managing (as an example) aftermarket car parts, where a single part can suit many makes, models and years. How do most businesses assign and manage compatibility for each part? Do ZI users typically do this using multi-select

    • Unable to enter manual journal entries in AR/AP.

      Hi there, i am facing some problem relating to AR/AP. I want to make some entries in AR/AP through manual journal. for example. some time I send cash 500 to Mr. A (Customer) for any purpose and then after 2 or 3 days Mr. A returned back 700 to me and

    • Questions regarding WorkDrive

      Here are my questions regarding WorkDrive: Does WorkDrive have a limit on the number of downloads? What will happen if a file is downloaded excessively? Does WorkDrive have any restrictions on download speeds? Are there any limitations on downloading

    • How to record tips from customers

      I run a cleaning service business and on occasion customers include a tip with their check payment. How can I record the amount paid for service and the tip separately? Any amount over the invoice is looked at as an overpayment and suggest a credit note

    • Multi-currencies in Zoho Books

      I'd like to request multiple currencies in Zoho Books. I have customers paying in USD, CAD, CNY. I need to bill customers in these currencies too. I can set up a base currency, and then set up a exchange-rate table to convert these currencies.

    • I want refund of Zoho standard subscription on WEB payment

      Hi, Kindly help to refund the WEB payment made on 13/07/2025 for Zoho standard annual subscription. I didn't find the software useful for my project. Regards

    • Is Conditional display of field(s) possible in a Canvas Customer Portal?

      Is Conditional display of field(s) possible in a Canvas Customer Portal? How?

    • Automate Backups

      This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.

    • View Linked Subscription on Invoice list

      When looking at the list of invoices in billing is it possible to see the subscription that an invoice is for. This would allow you to see if it's a subscription a customer is behind on, or they simply haven't paid a one time invoice.

    • Recording Credit Card Fees when Recording Payment for Bills

      It seems I am unable to record credit card fees when paying a bill. I pay close to 100% of my bills with a company credit card via online portals. I'm happy for the CC fess to be recorded as Bank Charges but it will not allow that field to be used if

    • Workerly/Zoho One Pricing

      Hi What is the pricing model that is suppose to be as a Zoho One user? If i use the services of a freelancers or temp workers (Sometimes for a few hours a week/month), I need to purchase a zoho one license for each of them as well as workerly licenc

    • DKIM

      I have my DKIM in Titan, which is another email service provider. I get this notification on my portal. What shall I do? ( Improve the deliverability of emails sent from Zoho Social by adding DKIM (DomainKeys Identified Mail) records to your DNS settings.

    • Show All Notes For A Single Record

      I would like to be able to view a list of all Notes for a particular record. We can add several (unlimited) Notes for the Leads, Contacts, Accounts and Potentials records. The subject line and some of the note content for up to 10 notes is visible on the first page. You can select the arrow to view additional notes in the list. I would like a button next to the New Note button that says View All. This would bring up a printable list of all notes listed in descending order by Modified Time (newest

    • Zoholics Europe 2025: Build Smarter with the Zoho Creator Low-code Workshop!

      Why should you attend? This year, Zoholics Europe 2025, Zoho’s official user conference, is your opportunity to connect directly with the teams behind the tools you use every day. Don’t miss one of the most requested sessions: dedicated, hands-on workshop

    • Assigning multiple roles to a user in Creator

      Hi I find we can assign only one role and permission to an user in creator. There is a requirement to assign multiple roles and corresponding permission to one user. Is there any solution or workaround for this? Refer the screenshot below

    • 【Zoho CRM】ウィザード機能のアップデート：セクション要素の追加

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、ウィザード機能のアップデートをご紹介します。 ウィザード機能に新たに「セクション要素」が追加されました。 各ウィザード画面内で項目、テキスト、サブフォーム、ウィジェット要素などをより柔軟に整理できるようになりました。 セクション要素とは？ ウィザードの中で、関連する項目や要素をひとつの「サブエリア」 としてまとめられる新しい構成要素です。 セクション要素活用メリット 入力内容やプロセスによっては、より細かな構造や階層化が求められる場合があります。

    • Edit PDFs from within your web app using Zoho Office Integrator

      Hi users, We are excited to introduce PDF editing capabilities in Zoho Office Integrator. You can now open, edit, and collaborate on PDFs from within your web app—in addition to documents, spreadsheets, and presentations—and save them in your configured

    • Zoho CRM Workflow and Function Backup Options

      Hi everyone! I have been able to make several backups of my CRM data and noticed that the Workflows and Functions are not included in these backups. To my knowledge, there is no backup feature for workflows and functions, which is problematic in of itself.

    • Zoho Recruit > Job Opening Module> Editing, Deleting, Adding (Fields)

      Hello All In the Job Opening Modules How do i go about deleting the Positing Title or changing to Job Title or can i hide it from all? I want to add a Look Up User Field, however when i select the look up field i do not see that Can i have the industry

    • Can you create a lead without assigning an owner?

      Here is the question I have:   Is there a way I can create a bunch of leads without assigning it an owner?   What I want is for my salespeople to pick and choose their own leads without me assigning them..   right now all leads are owned by me because

    • Bug - Incorrect example in the documentation

      I found an issue in the Zoho API documentation. The example "Sample Request" on this page is incorrect — it shows the example for "Get Email Attachment Info" instead of "Get Email Attachment Content". Wrong example: curl "https://mail.zoho.com/api/accounts/12345678/folders/9000000002014/messages/1710915488416100001/attachmentinfo"

    • Power of Automation :: Dynamically generate Tasklists based on values selected in Task Custom Fields

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • WhatsApp Enhancements to Boost Customer Engagement

      We're excited to introduce a series of powerful enhancements to the WhatsApp integration in Zoho FSM, making customer interactions faster, smarter, and more actionable—right from your Zoho FSM interface. Here’s a quick rundown of what’s new: Try It Out

    • Store reviews module just got smarter in Zoho Apptics

      Hello, Apptics community! Every app deserves better visibility in the marketplace, and reviews play a crucial role in improving your app's App Store Optimization (ASO), rankings, and credibility across stores. That's why we've rolled out a set of enhancements

    • Try CRM for everyone button in the way of workflow

      Please consider using the bottom bar for offers. Using the top bar for offers like "Try CRM for everyone" really gets in the way of my day to day workflow.

    • Include EVERYTHING in Language Files

      Hey, we are building out a system, that needs to be translated. The language files lack a few things though. 1. Blueprint names 2. Canvas View elements like tab names Please include everything into these files, otherwise it's not really a multi language

    • A way to create kits (groups of items) that do not require bundling and are added to an order as the individual items

      We are evaluating moving off of Sage BusinessWorks (which handles accounting, order entry, inventory control, accounts receivable, etc) to Zoho Books/Inventory. One of the things we heavily use is a feature called Kits, which allows creating a group of

    • Allocating Salesman To Customer

      Hello, please add a feature to allocate a salesman to a particular business customer/account. Regards

    • Shipment

      I have 70 shipments Out of which 40 delivery date are updated( since it is live tracked) 30 numbers i need to update manually. How to do it in bulk?

    • arabic not printing

      Qatar has a legal requirement to have invoices in English and Arabic. When writing invoice fields in Arabic, they don't print. Why?

    • How to show Order Number/SO Ref on Invoice emails

      When creating a sales order or invoice we have an option to input an order number or ref# (see attached images). For the Sales Order email template we can add a placeholder for the SO_REF. However, for the Invoice email template there's no option to reference

    • Specify in-line image size in question

      I have an image inserted into a file upload type question. I can click and drag the corner of the image to make it larger or smaller, but I would like to manually input the dimensions I need. No matter what size I make the image in photoshop before uploading

    • Can you limit who creates tags?

      Hi there, I'd like to find out if it's possible to limit which Agents create tags on Zoho desk. Thank you. 

    • Auto CC - Moving Departments

      We have Auto CC e-mail replies to your support mailbox enabled. We have two departments: Helpdesk (helpdesk@domain.com) Delivery (delivery@domain.com) If we create a Helpdesk ticket, and reply, replies are CC'd to helpdesk@domain.com (OK) We then move

    • Next Page