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.


    • Sticky Posts

    • 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

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Recent Topics

    • Pricing Strategies: #4 Counting on Discounts

      "Is there any chance I can get a little discount on this month's service?" Maya hears this almost every time at her fitness studio. She offers monthly subscription plans for various services, including yoga, strength training, wellness sessions, and personal

    • Introducing Query Workbench in Zoho CRM

      Hello everyone! We’re excited to announce the Query Workbench, a brand-new interface designed to improve developer experience of building Queries in Zoho CRM faster, simpler, and more intuitive. In the past, constructing queries required navigating across

    • Limitation with Dynamic Email Attachment Capture

      I've discovered a flaw in how Zoho Creator handles email attachments when using the Email-to-Form feature, and I'm hoping the Zoho team can address this in a future update. The Issue According to the official documentation, capturing email attachments

    • Add Customer in Books on Creator Form Submit Params

      Hi guys, Were integrating a creator app with books however what were doing is adding a books customer on submit of creator form.  We have some parameters but some fields aren't coping, All were seeing is the contact name in books,.  Any help of the params for this would be great. below is a sample of the script... response = zoho.books.createRecord("contacts", "XXXXXXXXX", { "contact_name" : input.Name, "address" : input.Email }); 

    • Weekly Tips: Protect Confidential Information with PGP in Zoho Mail

      We deal with confidential information almost every day, whether it is being sent out or received. Though emails sent using Zoho Mail are encrypted both during transit and at rest, attempts to access and steal your sensitive data are always a threat that

    • Suggestion : link KB with Accounts

      Hi Zoho teams.  I think it could be good to link KB articles with  : accounts in order to easily  find articles dedicated to some account specificities. I tried to use tags , but tags are free text with not easy way  to retrieve it directly from ticket or list article for one tag. Tickets : It would be a good way to measure usage of KB directly from ticket when we don't need to copy/paste KB in solution. And : Great Tool , keep going ! 

    • Drag and Drop in Creator Application

      Hi, I am in the planning phase of a new application and I would like to use 'Drag and Drop' in the user interface of my new Creator application that I am sketching out, but I don't seem to be able to find any reference that this is available to developers. In my instance I have table of entries and I would like to be able to allow users to move an entry to another table (much like you do in your own interface when creating a Pivot Table report. In addition, I would like the user to be able to re-order

    • Is there any way to integrate Zoho with Zapier?

      Is there any way to integrate Zoho with Zapier? I'd like to use it to create a workflow, sharing posts from our Wordpress website to all our channels.

    • Popular Articles Report

      From data to decisions: A deep dive into ticketing system reports Content management teams can use various metrics to assess the effectiveness of knowledge base articles, improve content quality, and ensure articles are regularly updated. Predefined article

    • Invoice Ref. Field

      Hello Team, Currently, the Invoice Ref. field is set to a Number type with a maximum limit of 9 digits. However, we often receive customer invoices that contain up to 12 digits. In some cases, the invoice reference includes not only numbers but also letters

    • 60 Days Into Zoho - Tiktok Branding Startup -7 Questions?!

      Wsp Everybody I co-own a TikTok Branding / Consulting Startup & have been using Zoho for the past 60 days - Am now looking to make our overall operations & processes more Efficient & Effective! Curious to know how others are using the platform & what's

    • Turning off the new UI

      Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?

    • XML format to import knowledgebase into Zoho Desk

      Hi, We just started to use Zoho Desk and want to import our knowledgebase from our old support system (Freshdesk) to Zoho Desk. Can anyone give us information about the format of xml file to import? There is no explanation on the related page.

    • Pushing Zoho People leave into Microsoft calendar: how to chose how "event" is shown (busy, free etc)

      Hi, how can I select how a "leave" event is pushed into Microsoft calendar? I want for leave "working elsewhere" to show as working elsewhere and NOT as busy.

    • Duplicate Accounts

      Hi There, I am looking for a solution, script, workflow or anything to solve an issue we have - in our customers section we have a rule that doesn't allow duplicates, however Zoho will allow customers with xxxxx and xxxxx PLC or LTD so effectivley we

    • Error with If formula

      I've got this super simple If formula, what is the reason for the error? If ( LEN(${Leads.Trial Slot Option}) == 3,'y','n') Syntax Error. Check the examples for any functions you're using to see if you formatted them correctly. Make sure your fields are

    • Announcing Multi-language Support in Zoho FSM

      Zoho FSM now speaks your language. The much-awaited multi-language support is now available in Zoho FSM. The following languages are supported in Zoho FSM: Dutch (Nederlands) English - United Kingdom English - United States French (français) French -

    • Creating multiple CRM leads from a Zoho Forms subform

      Hi all, We have a heavily used intake form that is used for new leads as a part of our intake. There is a subform that allows the lead to add additional team members, their titles and other basic info. That form submission creates a new Lead and the subform

    • Free webinar! Build smarter apps with Zoho Sign and Zoho Creator

      Hello, Bring the power of digital signatures to the apps you build in Zoho Creator! Connect Zoho Sign as a microservice and enable seamless e-signature workflows in your applications. This integration allows you to automate signing tasks using Deluge.

    • Restrict Addresses in Zoho Forms?

      In the address field, is there a way to restrict the addresses that auto populate (via Zoho Maps or Google Maps) to a specific state (I know it's possible with the country). Additionally, how often does the address in Zoho Maps get updated? Certain addresses

    • Unable to send message;Reason:553 Relaying disallowed. Invalid Domain

      i have facing the issue "Unable to send message;Reason:553 Relaying disallowed. Invalid Domain" if i verify domain evertthing i did but still face the same error.

    • ZohoMail is so close to being Perfect BUT

      Why don’t you have HILIGHTING???!! I've been trying to find a substitute for Edison Mail but I want & need hilighting (preferably in more than just yellow)! Is this even on your To Do list? I’m so disappointed. 🙄

    • Weekly Tips: Secure your attachment downloads with Zoho Mail

      Safety is one of our main concerns, whether it’s about device security or online protection. We use tools like fingerprint scanners, facial recognition, and two-factor authentication to keep our devices and email accounts secure. We use methods like OTP

    • Resume Harvester: New Enhancements for Faster Sourcing

      We’re excited to share a set of enhancements to Resume Harvester that make sourcing faster and more flexible. These updates help you cut down on repetitive steps, manage auto searches more efficiently, and review candidate profiles with ease. Why we built

    • Looking for best practices to import data from SAP Business One (on-prem) into Zoho Analytics via Zoho DataPrep / Databridge — daily automated schedule

      Hi all, I’m using SAP Business One on-prem (SQL Server / or HANA — depending on DB backend) as our ERP. I want to build a pipeline that, every morning at 9:00 AM IST: pulls transactional data (invoices, customers, products, stock, etc.) from SAP B1, loads

    • Zoho One Unified Portal - Applications

      Hello, It is great to see the work on the New Unified Customer Portal. Thanks for that. The number of applications is limited though. It is now only around the Zoho Books ecosystem (Books, Expense...) and Zoho Social. = Are other applications planned

    • Using a third party service provider want to move directly with Zoho

      Hi good day I’m currently using Zoho but I’m using a third party service provider I want to move directly with you guys I’m using Zoho email and invoices and my domain please let me know if it’s possible to move away from the third party provider my email

    • Marketing Tip #10: Start a customer loyalty program

      Winning a new customer is great, but keeping them coming back is even better. A loyalty program rewards repeat buyers with points, giving them more reasons to shop again. Over time, this builds trust and long-term relationships. Try this today: Set up

    • Zia Actions: AI-powered Workflow Automation for Faster and Smarter Execution

      Hello everyone, Updated on 12th Dec 2025 Zia actions for Workflow is available for Enterprise edition ONLY. These features are currently available in the following DCs: US, CA, EU, IN, and AU Email Auto reply and Content Generation are available as Early

    • Do Individual Forums within Categories, in Desk Community, Produce Their Own RSS Feed?

      Do Individual Forums within Categories, in Desk Community, Produce Their Own RSS Feed? If not, can anyone share a work-around that could help me get an RSS feed for individual category forums?

    • Incremental Migration Issue – Ticket Showing Resolution on Dec 9 Despite Urgent MX Cutover (Ticket ID: 152080262)

      I am experiencing an issue with Zoho Mail incremental migration from Rackspace. The initial full migration completed successfully, but the incremental migration for one mailbox failed immediately with the message: “User not exist” This appears to be a

    • Change Last Name to not required in Leads

      I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

    • Resend Client Portal Invitation + View Email Delivery Status

      Hi Zoho Team, We hope you are doing well. We would like to request two important enhancements related to the Zoho Creator Client Portal invitation process. At the moment, when we add a user to the Client Portal, Zoho Creator automatically sends an invitation

    • Get user last login

      1. Is there a way to programmatically get the last user login to trigger certain workflows? 2. Is there a way to programmatically access the custom fields on a user's account?

    • Seeking Zoho Creator Expert (Delivery Management App / Logistics Ops) — Built & Deployed Before

      Hi everyone, We’re building a Delivery Management App (focused on delivery operations for now) using Zoho Creator. We’re looking for a Zoho Creator expert who has already developed and deployed a similar delivery/workflow system and can assist us with

    • Adding Multiple Files to a Zoho Vault Entry

      There is a old blog post talking about adding multiple file attachments to one Zoho Vault Secret: https://www.zoho.com/blog/vault/introducing-new-features-in-zoho-vault-powerful-password-sharing-wider-storing.html Is that still possible, I can see how

    • FNB South Africa Bank Feed

      I should've thought this wouldn't work. As suspect, Zoho claims to be able to pull bank feeds from First National Bank (South Africa), but fails everytime. I suppose Xero (or even Sage One) is the way to go? If they (miraculously) get it to work again,

    • Dropshipping Address - Does Not Show on Invoice Correctly

      When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company being

    • Zoho unreliable

      Some mails are delivered, others not. How can I trust Zoho any more? Some friends get my e-mail, some don't. Same with receiving e-mails: Some I get, some not. If I use Google, everything works well. But Zoho?!!! How to solve this problem? I already reported this problem before, but didn't get any reply. Thanks, Kim

    • the custom domain forwards by default to the old career site / how to switch it off??

      dear friends, how to switch off the old version of the career site?? The set up custom domain forwards directly to the old site, so that I cant publish it... Any ideas? Thank you! KR, Victoria

    • Next Page