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

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    • Recent Topics

    • Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked

      Hi, I sent few emails and got this: Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked And now I have few days since I cant send any email. Is there something wrong I did? Also can someone fix this please

    • Changes to the send mail Deluge task in Zoho CRM

      Hello everyone, At Zoho, we continuously enhance our security measures to ensure a safer experience for all users. As part of our ongoing security enhancements, we're making an important update on using the send mail Deluge task in Zoho CRM. What's changing?

    • Page Rules in Forms

      🚀 Dynamic Page Navigation Implementation I successfully implemented dynamic page navigation based on a user's radio button selection. The goal was to direct users to a specific, corresponding page while ensuring they only interact with the flow determined

    • Cancellation of written-off invoice

      Hi, Can I know when we cancel the write off (write back), in which FY, the reversal is recorded. It doesn't ask as to when the write off should be cancelled to reflect!. It shouldn't reflect in the year in which the invoice was written off since the Year

    • Create Invoice automated with Package

      Does anyone knows how to create an invoice from a SO when we have created the package? We do these manually. and validate that the product packed is the product invoiced (if the order is partially packed) Regards, JS

    • I want to create a mailing list, NOT a group.

      Can I create a mailing list in Zoho mail? I just want to be able to make a list of email addresses and give the list a name. Then when I type the list name, the list of email addresses will be automatically listed. When I create a group it sends an email

    • ERROR CODE :554 - Your access to this mail system has been rejected due to poor reputation of a domain used in message transfer

      This message was created automatically by mail delivery software. A message that you sent could not be delivered to one or more of its recipients. This is a permanent error. *****, ERROR CODE :554 - Your access to this mail system has been rejected due

    • Export Invoices to XML file

      Namaste! ZOHO suite of Apps is awesome and we as Partner, would like to use and implement the app´s from the Financial suite like ZOHO Invoice, but, in Portugal, we can only use certified Invoice Software and for this reason, we need to develop/customize on top of ZOHO Invoice to create an XML file with specific information and after this, go to the government and certified the software. As soon as we have for example, ZOHO CRM integrated with ZOHO Invoice up and running, our business opportunities

    • no me llegan los correos a Zoho mail

      No puedo recibir correos pero sí enviarlos, ya hice la modificación de MX y la verificación de teléfonos, qué es lo que ocurre? gracias

    • Group Calendar as Default for adding new events, etc?

      Hi, I want to make the group calendar (that I created, if that makes a difference) the default for anything new I add to the calendar. How can I do that? thanks.

    • Bookmark Loading is Buffering

      Hi, i clicked on the bookmark tab, around yesterday and since then it's been constantly buffering and doesn't allow me to access the mail's i have tried login in and out but of no help also trying to share a screenshot of the issue around 232 kb size,

    • Zoho Webinar custom registration fields into Zoho CRM

      I am pushing webinar registrations into zoho crm as leads and this is working fine. I have added a few custom fields to my webinar registration and I wish for these fields values to get mapped into the resulting CRM lead record. I am not seeing anywhere

    • GitLab Extension for Zoho Desk: Connecting support and development for faster resolutions

      Hello everyone! We’re excited to introduce the GitLab Extension for Zoho Desk, an integration that bridges the gap between support and development teams. This allows tickets to be converted into actionable GitLab issues for faster resolutions, better

    • Download Google Drive Shared Image/File Using Deluge – Complete Guide

      Download Google Drive Shared Image/File Using Deluge – Complete Guide When working with Google Drive share links inside Deluge, many developers face a common challenge: 👉 How can we download a Google Drive file directly using Deluge? This article explains

    • How to update Acuity appointment fields from Zoho Flow?

      Hi, I need help with Zoho Flow → Acuity Scheduling integration. What I’m doing Appointment created in Acuity Zoho Flow creates a Zoho Calendar event I want to send the Zoho Calendar Event UID back into Acuity (into a custom form field) This is so that

    • No horizontal scroll bar in reports

      Hi support team, I created a pivot table report which contains many columns (in my application about 15). The problem is that there is no bottom scroll bar to display colums that does not fit within the browser page. I saw that it was possible to resize colums, but colums sizes are not saved within the session. So could you add scroll bar, and eventually make colums sizes stored in the user session ? Best regards,

    • Zoho Map integration tasks have changed - you need to "Locate all instances of Zoho Map integration tasks in your Deluge scripts by searching for the v1 marker... before 16 January 2026"

      Details of an issue specific to Zoho CRM + Deluge Functions (originally posted in this forum) can be found here: https://help.zoho.com/portal/en/community/topic/zoho-map-integration-tasks-have-changed-you-need-to-locate-all-instances-of-zoho-map-integration-tasks-in-your-deluge-scripts-by-searching-for-the-v1-marker

    • filter broke my data

      I uploaded a file recently from Sheets and it has top 2 rows frozen, with table headers in second row and each one is filterable. somehow my first 2 columns became unfiltered and no matter what I do I cannot reapply the filter?? also didn't realize they

    • Request to remove domain "greentechcoatings.vn" from previous Zoho account

      Hello Zoho Support, I would like to register the domain "greentechcoatings.vn" in my new Zoho Mail account, but I receive the message "This domain is already associated with another account". Please remove the domain from any previous/unknown account

    • Trigger actions in third-party apps using Zoho Flow

      Greetings, I hope you're all doing well. We're excited to share an enhancement to Bigin's workflow capabilities. Zoho Flow Actions are now available in Bigin, enabling you to automate tasks across third-party applications directly from your workflow and

    • Enroll, Script, Win: Hackathon 2025!

      Hello CRM Developers! Are you ready to create some magic with Client Script, Widgets and Functions in Zoho CRM? Let’s make Hackathon 2025 an unforgettable adventure! The Zoho Developer Community Hackathon 2025 is here, and it’s your time to shine! REGISTER

    • Zoho Help Desk - Not receiving emails

      Hello… I am on your trial version of help desk… and I am having trouble getting emails from Zoho Help Desk to my MS Outlook Exchange Server… So when a customer sends ticket request I am not getting an email with a notification? I have read your articles

    • Almost all Flows are being queued

      A few days ago I saw one of my Flows status was Queued. This was the first time this had ever happened. Now, almost every Flow that triggers is Queued for at least a few minutes. If I re-trigger the Flow (which causes separate problems) they sometimes

    • Employment Contract / HRMS Documents - Zoho People

      How do I create customized HR documents for disbursal from Zoho People ? Example, say offer letters ? appointment letters ? Memos ? We want to be able to preset these in one or ther other form and issue them to employees who are in Zoho People.

    • Live webinar: Craft and deliver impactful slides with Show’s desktop apps

      If you love the comfort of working on your desktop and want a setup that keeps you focused and uninterrupted, this session is made for you. We’re excited to invite you to our upcoming live webinar: "Craft and deliver impactful slides with Show's desktop

    • Enhancements to Bigin's forms

      Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to Bigin's forms. We'll go over each one in detail. Merge field support in auto-filled forms The auto-fill option in Bigin's forms lets you predefine

    • Table dimensions

      I try changing the dimensions of the table on my computer but it doesn't change. Do I have to be a premium member or does it only work on the app?

    • Direct link to Record Summary

      Hi everyone, In one of my reports, I have built a Record Summary template to display the details of one record. I would like to be able to link directly to this Record Summary once I submit a new record, without having to go to the list of records first and click on View. Is there a possibility to do so ?  Should I use the URL by passing some parameters ? Thank you very much for your help ! Guillaume

    • Verifying Zoho Mail Functionality After Switching DNS from Cloudflare to Hosting Provider

      I initially configured my domain's (https://roblaxmod.com/) email with Zoho Mail while using Cloudflare to manage my DNS records (MX, SPF, etc.). All services were working correctly. Recently, I have removed my site from Cloudflare and switched my domain's

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

    • Amendment effective date

      Hi everyone, I noticed that the amendment effective date mentionned in my amendment is not right. Indeed, when a contract is amended several times, it states the previous amendment and their effective date. However, the effective date stated is always

    • STOCK history in zohosheets

      is it possible to get historical stock value using stock function in zoho sheets? i could not see from and to period in the helper document.

    • Auto sync Photo storage

      Hello I am new to Zoho Workdrive and was wondering if the is a way of automatically syncing photos on my Android phone to my workdrive as want to move away from Google? Thanks

    • Agent password reset

      Hi Zoho support, I would like to ask if there is a way the admin can reset a password of an agent? Regards

    • Can receive but not send messages in Zoho Mail

      Hello! I was able to configure my email client successfully in that I can receive messages just fine. However, when I send messages out, they seem to go out fine (I don't receive any errors or anything), but the recipient does NOT receive those messages.

    • Mail is sent twice!

      Been using Zoho for a while now. Installed Zoho for someone else and some weird things are happening. Mails are being sent twice. He is using Thunderbird as an email client. I already read about email being duplicated in the sent folder. But in my case

    • Can't login IMAP suddenly

      Since this evening I'm getting the error: You are yet to enable IMAP for your account. Please contact your administrator... IMAP always been enabled in my account and was workign fine for the past 7 years. Already tried turning IMAP off and on again.

    • Sending of username did not succeed: Mail server pop.zoho.com responded: User already specified

      I am having issues receiving emails from Zoho in Thunderbird. I am getting the above error. The first error tells me Authentication failed, and prompts me to enter in my password. Then I get the above error. I can receive emails when I log in online to

    • Bug tracking

      Hi, does anyone know how to track errors during picking or packing? This way I can keep track and see how to improve and prevent errors in this area.

    • Migration of corporate mail environment from Yandex 360 to Zoho mail

      I have to migrate a corporate mail environment with an existing domain from Yandex 360 to Zoho mail. It is vital to migrate all users with all the data. I have read the article on this topic using MacMister Email Backup Software just now and have some

    • Next Page