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

    • Admin and Dispatcher Users show as Field Technicians in Dispatch Module?

      Hi Zoho, Our Admin and Dispatch user both show up as Fied Technicians / Field Agents in the Dispatch module, but they most certainly should not be assigned to any of the work orders and service appointments. These users are NOT service resources. How

    • Don't understand INVALID_REQUEST_METHOD when I try to post up an attachment

      When I make the POST request (using python requests.post() for files): https://www.zohoapis.com/crm/v8/Calls/***************01/Attachments I get this response: r:{ "code": "INVALID_REQUEST_METHOD", "details": {}, "message": "The http request method type

    • Zoho Payroll: Product Updates - June 2025

      This June, we’re taking a giant step forward. One that reflects what we’ve heard from you, the businesses that power economies. For our customers using the latest version of Zoho Payroll (organizations created after Dec 12, 2024) in the United States,

    • View Products (items) in Contact and Company

      Hi, I would like to know if there is an option to view all the products /(items) that were inserted in the pipeline deal stage for exemple "Win Pipeline" within the company and contacts module section? For instance, view with the option filter for the

    • Update subform dropdown field choices - on load workflow

      Hi, I have a "Check In" form that has "Contacts" subform and a "Tickets" subform. When the form is loaded, I want to populate one contact and the number of tickets. I want the "Contact" field in the "Tickets" subform to have the choice of "Contacts."

    • Upload Zoho Inventory Item Image by API

      itemID = item.get("item_id"); organizationID = organization.get("organization_id"); resvp = zoho.inventory.getRecordsByID("items",organizationID,itemID,"zoho_inventory_conn"); info resvp; image_file = invokeurl [ url: "https://t4.ftcdn.net/jpg/03/13/59/81/360_F_313598127_M2n9aSAYVsfYuSSVytPuYpLAwSEp5lxH.jpg"

    • Salesforce to Zoho One Migration

      HI, I am about to start a migration from Salesforce to Zoho One I would like to know the best practise for this, my current thoughts to the approach is 1) Create fields, modules as required for migrating data 2) migrate Data 3) go live Will this approach

    • Zoho Expense Integration with Zoho Books

      I want to know what flexibility do i have in selecting the chart of accounts which get a hit whenever we are posting any expense or advance in zoho expense?

    • Custom Function to Update Ticket based on Subject of Ticket

      This may be pretty simple but I'm having issues with getting a custom function to fill out custom fields based on the subject of a ticket and not the body of a ticket. Basically we need to fill in the PO number and Item ID custom fields, both of this

    • Incoming 'Message' data via WhatsApp appears empty

      the Incoming 'Message' data via WhatsApp appears empty; instead of customer messages, I only see CRM system notification messages are being displayed. I have seen 3 messages like this since yesterday it seems that in 'All Message' the message snippet

    • Handling Automatic Replies in Desk

      We send out email campaigns (currently via Klaviyo) and naturally we receive "Automatic Replies" to these mass email campaigns. These responses are all being routed to Zoho Desk. We get two types of "Automatic Replies" Type 1) Customer is out of the office/holiday

    • Zoho Mail API Error EXTRA_KEY_FOUND_IN_JSON

      I have a workflow set up in Pipedream that uses the Zoho Mail API to send emails from my account. It's worked without issue for months but today I'm getting the following 404 error for every email I try to send: { "data": { "errorCode": "EXTRA_KEY_FOUND_IN_JSON"

    • How to search (web API) for a Calls record by phone number?

      Using v8 /Calls/search web api I'm unable to to complete a search request no matter how I use the api: When I try using "criteria=" I get: response: <Response [400]> response_json: { "code": "INVALID_QUERY", "details": { "reason": "the field is not available

    • [Free Webinar] Product Release Updates - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Zoho GenAI API Error Not a valid response from zia.

      Zoho GenAI API Error Not a valid response from zia.

    • Help me to retreive my Document

      Please help me to retrieve my documents from any date between 1st February, 2025 to 20th,March 2025 .it got mistakenly deleted on the 21 of March 2025 due to phone screen malfunction I earnestly await your positive response .thank you

    • how to change the page signers see after signing a document in zoho sign

      Hello, How can I please change the page a signer sees after signing a document in Zoho Sign? I cannot seem to find it. As it is now, it shows a default landing page "return to Zoho Sign Home". Thanks!

    • Look Up Field Type not available for events and tasks?

      Look Up Field Type not available for events and tasks?    

    • I cannot check out to Zoho People.

      When I tried to check out today, there's prompt that inhibits me to check out: To add entry in Attendance, log time for any of your jobs

    • Digest Juin - Un résumé de ce qui s'est passé le mois dernier sur Community

      Bonjour à toutes et à tous, Ce mois-ci encore, tout s’est enchaîné à toute vitesse ! On vous fait un petit récap de ce qui a marqué ces dernières semaines. Zoho RPA est une solution robuste d’automatisation des processus, conçue pour s’intégrer aux systèmes

    • Different Transaction Series for Different Types of Sales

      Is there any way I can create multiple transaction series for different type of Sales? Say B2B-001 and B2C -001 for respective type of Sales.?

    • Unable to charge GST on shipping/packing & Forwarding charges in INDIA

      Currently, tax rates only apply to items. It does not apply tax to any shipping or packing & forwarding charges that may be on the order as well. However, these charges are taxable under GST in India. Please add the ability to apply tax to these charges.

    • Customer Advance Zoho Book API

      All I could find was Customer Payment API, it does not have facility to add customer advances, where those are not linked to any invoice as such. How to do it?

    • Even though the received amount+tax is equal to or lesser than the invoice value, zoho doesnt allow to record

      Even though the received amount+tax is equal to or lesser than the invoice value, Zoho mentioned the error- you've recorded more payment than the actual invoice balance. please check again. screenshot also attached.  You've recorded more payment than

    • Multiple deductions in invoice

      I issue invoices to a customer that include multiple deductions that I would like to track in different expense accounts. But that is not possible in Zoho Books as there is only one Deduction field and even that I don't have control over to assign it

    • #BiginnersTips | How to bulk update closing dates for multiple deals in Bigin

      Hello Biginners! Keeping your CRM data accurate is crucial for any business- big or small. One key aspect is ensuring that closing dates for deals are always up to date. Why? Because if a deal is closed but not updated, your dashboards and reports would

    • 采购里出现付款通知 的错误

      采购里面出现付款通知错误，怎么调整，我找不到路径，好像是ZOHO 自动生成的，请问怎么调整

    • {"code":1002,"message":"Statement of Accounts does not exist."}

      Hello Zoho team, I faced an issue while trying to POST a sales order from sap to zoho books, using the below data packet: {   "customer_id": "4322967000027451968",   "line_items": [     {       "item_id": "2154170000010847685",       "rate": "752.00",

    • Add Custom Fields only in Customer module and not on supplier module!? Is not there a way to do that!?

      I am trying to create custom fields on clients module but it also gets created on suppliers module; which of course does not make sense at all as a lot of custom fields are client or supplier specific but never both. I am missing something? This seems

    • Logging website service fees

      Hello, I do a lot of freelance work on sites like Upwork and Wyzant and others and those companies take a small cut from what I pay or what I earn and I am wondering what is the correct way to log this in my books. For example if I charge $55 per hour

    • How do i clear a liability account without making a payment?

      I have a liability account with a provision for an expected bill from previous years. However the bill never arrived and the provision/liability account with Cr balance has been carried forward for many years now. How do i know clear the provision made

    • 2 Transactions for single Expense

      I have make 2 payments and have 1 Invoice containing both the items. My Bank Feeds show 2 Transactions, How can i associate them with Single Expense? I tried adding them to Advance Payment, but advance payment I can only apply to Bills It seems. Why cant

    • Everything AI in Zoho Recruit – Webinar Recording Available!

      AI is transforming the way recruiters find, engage, and hire top talent. In our latest webinar, we explored how Zoho Recruit’s AI-powered features can help streamline hiring, automate workflows, and improve decision-making. Missed the session? No worries

    • Introducing the FTP task in Deluge

      Hello everyone, We're excited to announce the launch of the FTP task, a powerful addition to Deluge that enables you to effortlessly transfer files between various Zoho apps and your own servers. Unlike the invokeUrl task, which supports various HTTP

    • Custom widgets on Zoho one dashboard

      Is it possible to create custom widgets on the Zoho One dashboard? I see there is a widget name My Open Tickets to display open tickets in my view, but I would also like to have a widget to display unassigned tickets. A widget to display unfinished projects

    • Data privacy concerns

      Does Zoho team have access to my data in the database e.g. Balance Sheet, Bank account transactions, Profit & Loss statement etc.

    • 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.

    • Next Page