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

    • Ability to Remove/Change Zoho Creator Admins via Zoho One Interface

      Dear Zoho One Team, Greetings, We would like to request a feature enhancement in Zoho One. Currently, it is not possible to remove or downgrade a user with the Admin role in Zoho Creator from the Zoho One admin interface. Unlike other Zoho apps where

    • Zoho Sheets

      Are they ever going to set up the feature "where I left off" just as you can do in Microsoft Excel online ? For me that is the only feature missing from Zoho sheets other than that I think they are terrific and use them every day. I only occasionally

    • Canvas Detail View Related List Sorting

      Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

    • Mass Update in Zoho CRM

      Hello, I want to update my past update records by using deluge on some conditions. anyone can please tell me how can I do it.

    • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

      Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?

    • Action requested: Retain your sales journey configuration in Path Finder

      Dear Customers, We hope you're well! As you might know, we're completely overhauling our journey management suite, CommandCenter, and are in the last leg of it. As a means of getting ready to go live, we will be announcing a series of requests and updates

    • search layout in new version

      Hello where is the menu for customizing search fields (module search layout) in the new zoho version (2016) ?? thanks nono

    • Zoho Marketplace Analytcis

      Hi Team, Our Zoho Marketplace Dashboard is not showing any data. What do you think we could do?

    • if i have zoho one can i upgrade some of my staff from crm to crm plus within my organisation?

      if i have zoho one can i upgrade some of my staff from crm to crm plus within my organisation? Or because I have many licenses of ZOHO ONE , IF I upgrade some staff to ZOGO CRUM PLUS. they will not be on the same organisat

    • The problem with Commerce ownership changing

      Hi, I am changing the ownership of the company and trying to delete the previous user-owner. I changed the owner of the company from user Tatiana to user Eugene. Eugene is the owner of the organization. It's OK. I am now trying to remove the user Tatiana.

    • Secondary Emails

      I am having issues deleting a secondary email address from a couple of our users and need help. When in Directory, manage email addresses, I click the trash icon by the email address and confirm I am trying to delete the email. I click continue and I

    • Kaizen #121 : Customize List Views using Client Script

      Hello everyone! Welcome back to another interesting Kaizen post. In this post, we can discuss how to customize List Views using Client Script. This post will answer the questions Ability to remove public views by the super admin in the Zoho CRM and Is

    • Zoho Books | Product updates | June 2025

      Hello Users, We’ve rolled out new features and enhancements in Zoho Books, from the option to record advances for purchase orders to dynamic lookup fields, all designed to help you stay on top of your finances with ease. Introducing Change Comparators

    • Widget Upload to CRM Fails with “Page Not Found” – Even with Correct Index Path

      I'm building a simple widget to export Contact data to CSV in Zoho CRM, triggered via a custom button. The widget uploads cleanly, appears in the widget list, and is successfully assigned to a Contact detail view via a custom button. But when clicked,

    • Account disabled

      I have an issue I need help with. Whilst trialing ZOHO CRM I created the following: Account1 (-------------) using m__ame@m__rg___s__i__.___.__ and 2 personal emails Account2 (-------------) using a personal email and 2 users _al__1@______________._o_.__

    • How can we manage the tags in ticket

      Allowing agents to use Tags indiscriminately can cause havoc. We could not find tag management where 1. The admin can create Tags beforehand for use by Agents 2. Permission can be allocated which roles/profiles can use existing tags or add new tags 3.

    • Feed Notifications filter?

      I'd like to have filter settings for Feed Notifications just like we have for Personal Email. If someone dumps a bunch of files into a project, we get a notification for every file!

    • Custom fields and filters for Timesheet

      HI Zoho Projects team. IT would be great and useful if we can add custom fields to the Timesheet design And is needed more options for filtering the timesheet dashboard, like "Milestones" and task list asociated to the record. Thank you

    • How do I rename the dropdown that contains a form and a report?

      I want to rename this, but I can't find how

    • Filtering two fields

      Hoping somone can assist, i am trying to create a report to show values from two different fields. e.g I have Field 1 Field 2 In some records, fields 1 and 2 are both "yes"; in other records, only one of the fields has the value "yes". Can we generate

    • Unable to Convert Quote to Invoice – Integration Active but User Not Recognized

      I’m having trouble converting a Quote into an Invoice inside Zoho CRM, even though the Zoho Finance Suite integration is enabled (Invoices, Quotes, Products, and Customers are all checked), and my user is an Admin in both Zoho CRM and Zoho Books, using

    • Owner drawings

      I entered an owner’s drawing transaction in 2023 but it’s still appearing on 2024 books. Is that supposed to happen? Or should Is there an additional step? I prefer for this transaction not to appear.

    • Running Balance in Account Statement.

      Running balance should come by default in the accounting statements but in ZOHO we need to customize every time to get the running balance in accounting statement. I did not understand, when the bank account statement opened from Bank Menu can show the

    • Importing Invoices

      Dear Team I used the enclosed csv file to import some invoices and it worked fine. I had to delete the file and when I am trying to re-upload it, I am getting the error for invoice number and branch "Resource does not exit." I tried a number of different

    • Enhance "Send Cliq Notification" Action in Zoho Desk Workflows (and also add Happiness Rating Support)

      ello Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request regarding the “Send Cliq Notification” action available in Zoho Desk workflows — specifically in workflows triggered by Happiness Ratings, but also relevant to all workflows

    • Treatment of Non-Refundable Income after cancelling an Invoice

      A customer made part payments of 30,000 for an invoice 0f 100,000, and then he is unable to pay up the remaining and has asked for a refund. As per company policy, he can only get 75% of the amount paid, which is 22,500. The remaining 7,500 is non-refundable

    • I need refund

      I have purchased the Zoho Book standard plan; I had the impression that I would get the purchase > Bill feature. After purchasing, I found that billing is not included in the Zoho standard plan. I immediately canceled the subscription. I love the product,

    • Handling identifiers during an import

      Importing your data When importing data into an application, it is crucial to prevent data loss or duplication. These types of errors can hinder the development of a clean and well-organised database, which is essential for effective data management and

    • Creating Deposit Invoices

      Hi, we are a company that does project based work with a request at the begining of each project for a deposit payment. At the moment we are creating invoices for the deposit and an invoice for the completion of the project, however they are completely

    • Marketer’s Space - WhatsApp Pricing Update: What Marketers Need to Know and Do

      Hello Marketers, Welcome back to Marketer’s Space! WhatsApp made changes to their pricing model on July 1, 2025, moving from conversation-based pricing to a per-message pricing model. This week’s post focuses on what these changes mean for your WhatsApp

    • It's time to say goodbye to Zoho Recruit for me.

      Hello, I have been a Zoho Recruit user since 2013. The tool has evolved, with a better UI, new features and so on. The pricing is still a great asset too. BUT, that being said, important features are not coming fast enough. I tried to share my point of

    • change subscription within customer portal

      Would be great for the customer to be able to change their own subscription (or restart existing one) within the customer portal. Also, would like to be able to have early termination fee on subscriptions if canceled early.

    • How to make the add-on optional at the time of subscription?

      The scenario is this, we have a service which has optional add-ons. Like the customer who purchased the subscription may or may not want to get the add-on. In our case if the customer choose the addon we have monetary benefit. In case the user does not

    • Unable to add attachments to knowledge base anymore

      I have been adding articles to knowledge base in Zoho Desk (as part of Zoho One). Today suddenly i found that I am unable to upload and attachments to the articles. I get the following error: "Attachment couldn't be added." I have uploaded the screenshot

    • Advanced factors for multiple scoring rules: Now with Zia scoring automations for all modules

      Greetings all, We're happy to offer improved scoring features by adding extra scoring factors, including Zia Scores, in our multiple scoring rules (MSR) feature. These new factors—which empower existing traditional scoring factors—include criteria for

    • Sortie de Zoho TABLE ??

      Bonjour, Depuis bientôt 2 ans l'application zoho table est sortie en dehors de l'UE ? Depuis un an elle est annoncée en Europe Mais en vrai, c'est pour quand exactement ??

    • Restrict Agents from Editing Shared Custom Views in Zoho Desk

      Hello Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request regarding the custom views functionality in Zoho Desk. 🎯 Background We’re actively using custom views to filter and display tickets for different teams based on specific

    • Introduction Dario Schiraldi Deutsche Bank Executive

      Hello Everyone, Dario Schiraldi serves as a key leader at Deutsche Bank, where he plays a crucial role in shaping the bank's strategic direction and driving operational success. With a solid foundation in finance and leadership, Dario is committed to

    • Is Zoho Shifts included in the Zoho One plan?

      In case the answer is no: there's any plan to make it available via One? Thank you

    • Feature Request: API Access for Managing Deluge Functions (with OAuth & Change Tracking)

      Hi everyone, I wanted to share a thoughtful request that came in from one of our Zoho clients this week. I believe many of us as partners and developers might relate to it. “One quick item to flag: we’d love an official way to manage Deluge functions

    • Next Page