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.

Notes
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. });

  8. ZDK.Client.getFlyout('EMIlyout').open(
  9.     { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
  10.     { data: loanDetails }
  11. );

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 pop up.

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.



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          • Sticky Posts

          • Kaizen #198: Using Client Script for Custom Validation in Blueprint

            Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
          • Kaizen #226: Using ZRC in Client Script

            Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this
          • 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

          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ




                                ご検討中の方

                                  • Recent Topics

                                  • Cannot log in to IMAP account as of last night

                                    Hey I've been using MFA with an authenticator for a while and have had to use application passwords for Outlook and Edison Mail on my Android devices. Last night the app passwords started to be rejected on my Android devices so I created new ones for
                                  • Low Stock View

                                    We use the Low Stock view frequently as a guide to inform us when to reorder items, but the view is misleading because it does not take into account Purchase Orders that have already been raised. Unless you are aware and check item by item, this can lead
                                  • Improve History Feature in Zoho Inventory

                                    At present there is a "history" tab on Zoho Inventory Items, however this only shows a date and time stamp along with the users name. It doesn't say what was changed. What is the value of this if you can't see what was changed? My Ideal is to include
                                  • Show backordered items on packing slip

                                    We send out a lot of large orders, and often there are one or two things backordered. How can I fix the packing slips to show quantity ordered  & quantity packed There should also be the ability to "ship" 0 of an item so the receiver knows that things
                                  • Document | Files

                                    The vendor "Partial matches" still not fixed here after years of putting up with having to select most vendors manually ! ( again, the banking "Transaction rules" would solve a lot of these issues ) Some unwanted, irrelevant pdf's also arrive. It would
                                  • books+POS+ tap to pay+ stripe

                                    So in the UK we now have tap to pay with stripe. So we can use the stripe app as a POS terminal. Brilliant news. Can we hope that the Books App might add this feature ASAP. It would be great to have one system rather than using the not very good Square
                                  • Canvas Form View - Client Script Page on load - Url params not working

                                    We have a custom module with a canvas page for form view. We have a button in Customers module to open this canvas page using invokeurl function. We send few parameters as in the URL as query parameters. https://crm.zoho.in/crm/orgxxxxxxxx/tab/CustomModule12/create/canvas/64333200000261xxxx?layoutId=643332000002605001&c=${Customers.Customer
                                  • Sending Recruit SMS's to Zoho Cliq - Or tracking in the Messages module in Recruit?

                                    Is there any way to send SMS Gateway messages in Recruit to ZOho Cliq? We use 2-way SMS massages a lot in Zoho Recruit to speed up communication with Candidates. However the only way to keep track of received SMS's is by keeping a look out for the Email
                                  • Is it possible to set a customer context variable in Zobot

                                    Hi, I want to use a context variable to route users down different paths in my Zobot chat flow. I know I can do this when the user enters data. But I want to know if I can use a variable that is 'hard coded' on the card, that the user is unaware of. Use
                                  • Cannot change Blog Title

                                    There is nowhere to change the blog title. You can change the blog URL but that is making no difference to the text "Enter Your Post Title" am I missing something?
                                  • Kaizen #203 - Answering Your Questions | Handling API Limits and Error Responses

                                    Hi Everyone, Welcome back to yet another post in the Kaizen Series! We appreciate your keen participation in the 200th milestone celebration of the Kaizen series. We will continue to answer the queries we received through the feedback. When working with
                                  • How to verify website ownership with google search console

                                    Hi, I am having a free .in domain provided by Zoho I have created a website on it now I want to verify my ownership to google webmaster. Can you please help me how to do that.
                                  • "SPF record exceed the allowed limit of 10"

                                    Hi, I was wondering if there were a "universal Zoho SPF record" that would allow all my configured Zoho services that email things to meet this limitation ? or do I have to have an entry for mail, com, billing, etc?
                                  • Animated GIF Images in Chat

                                    I know this seems to be a small feature request but in a recent Cliq update Zoho disabled autoplay for animated GIFs posted in Cliq conversations. We think this was not a good change. In our organization, animated GIFs in a chat play a role in expressing
                                  • I can't seem to login in to Mail Apps of MacOS /IOS

                                    Hi, i'm having trouble in signing in to mail apps from IOS. It's always come back to wrong passwords. But i already changed my password like 3 times. But still it says wrong credentials
                                  • Profile Image Showing Incorrectly in Zoho Mail

                                    Hi everyone, I’m facing a serious issue with Zoho Mail. The profile image showing for my email address is incorrect — it’s not my image. When I send an email to my Gmail account, it displays someone else’s image. This looks very suspicious and can make
                                  • I need access to my old email

                                    I need access to my old email bromzeman@zoho.com to verify it for forwarding. I can’t access the inbox to get the confirmation code. Please assist with recovery or forwarding. as you might already know, they made alot of the email addresses to have that
                                  • Set Defaults for Email Groups

                                    Is there a way to set defaults for all of the groups that I establish as a moderator? For example, I want every group I establish to have the following settings: 1. Moderator is <user> 2. User is <user>, <user> 3. Notifications for new group turned
                                  • LOGS FOR RECEIVED MAIL ( READ DATE & TIME)

                                    In Zoho mail we can extract the read logs of received mails so that we can see when we have read the mail and at what time & we have read it.
                                  • Domain verification probem

                                    Hello, i use a domain from Namecheap with hosting from Cinfu when i try to verify my domain on zoho i get "TXT Verification failure" i even tried the HTML verification and the code appears but also giving me the verification failure error.
                                  • Switching to Cloudflare email routing from Zoho Mail

                                    Hello, I'm currently working on migrating from Zoho Mail to Cloudflare's email routing solution. This requires changing MX and TXT records for our custom domain - when we do this, will our users still be able to log into their accounts and access an archived
                                  • Un Subscription Button

                                    How can i Add the Un Subscription Button in Zoho mail
                                  • Documents unable view and need to downlad

                                    I can't view .doc files in Zoho mail unless I download them, but I can view PDF files without downloading.
                                  • we encountered a problem while sending your email. please try again later.

                                  • Adding and removing people from groups

                                    We're having problems adding people to a group. Apparently Zoho has one email address and will not recognize a different email address.
                                  • MAIL SEARCH IS NOT WORKING

                                    THIS ISSUE HAS BEEN BUGGING ME SINCE MORNING, PLEASE RESOLVE THIS AT THE EARLIEST
                                  • URL Parameter on Help Center SIgn in link

                                    Is it possible to add a url parameter to the sign in link on the Help Center?
                                  • migrating from HelpScout

                                    I am attempting to import a conversation file from helpscout into desk and am receiving size errors. What is the current file size restriction. Does anyone have any tips for a successful migration?
                                  • Article Name Sorting in Zoho Desk Knowledge Base (agent / admin side)

                                    Dear Zoho Desk Support, We are writing to request an enhancement to the Knowledge Base management feature within Zoho Desk. Currently, there is no option to sort articles by their name, which significantly hinders efficient article management, especially
                                  • How to parse JSON data with SQL in Zoho Analytics?

                                    Hi all, I have a column with JSON data. I want to show this column in a chart, but it is very messy, and no JSON parsing function is supported on Zoho Analytics. data example: {"id": 5, "status": "false", "date": "15/10/22"} what I want to do in SQL is
                                  • Add an Equation Field (Or update the Formula Field)

                                    Hi, I would like to be able to have one field as a Text Field with QR Code, and then have multiple Equation/Formula Fields that then take parts of that fields data with LEFT, MID, RIGHT, REGEX, etc. Thanks Dan
                                  • How to parse column having JSON data using SQL?

                                    We have a daily sync from a PostgreSQL database that brings data into Zoho Analytics. Some of the columns store raw JSON data. We need to build SQL queries on top to parse data from JSON and store them in discrete columns. There is no option for "Data
                                  • Enable report button based on the current user role

                                    Greetings  i have a report that contains action buttons, i want these buttons to appear as enabled only when the current logged in user has a certain role, for example only CEO role users will be able to use this button. but when setting the conditions
                                  • 500 Internal Error In Mail API

                                    I'm getting 500 Internal Error when using mail API. I'm getting this error for this one account, it works fine for other Account IDs which I have in my system.
                                  • Zoho Sign Document upload to the Attachment section of the Zoho CRM Deals record

                                    Hi, Is there a script I can use to attach a document once signed in the Deals record attachment section? I know that the fiels are uploaded in the Zoho Sign Document module but our client wants it in the attachment section. They are using the "Send with
                                  • Zoho live chat widget in React Js

                                    I am trying to test Zoho live chat widget code in react js, below is the sample code void(0)} onClick={()=>window.$zoho.salesiq.floatwindow.visible("show")}>LIVE CHAT window.$zoho = window.$zoho || {};window.$zoho.salesiq = window.$zoho.salesiq
                                  • Are there any plans to add Triggers for Subform edits?

                                    By The Grace of G-D.  Hi, How are you? Can you tell me if you have any plans to support subform edit as a workflow trigger? And what about have them trigger an "onChange" client script?
                                  • Zoho commerce

                                    i am facing issue with order summary emails.i am getting 1 continuous email for order received yesterday and today.ideally 1 email should be received for a particular date ie for 02/08 i should received 1 email from 12.01am till 11.59pm but it is being
                                  • Feature Request: Improve Category Page Sorting for "Out of Stock" Products

                                    Hi there, I'm writing to request a new feature that I believe would significantly improve the user experience in my online store. Currently, on category pages, products are sorted by popularity. However, when a popular product goes "Out of Stock," it
                                  • POSTMAN - There was an error in evaluating the Pre-request Script:Error: Cannot read properties of undefined (reading 'json')

                                    I am beginning the journey to learn how to use the API for Zoho Sign. I am getting the following error when I try to use postman. To walk you through how I am getting this error... I wanted to start with a simple GET and expand my learning from there.
                                  • Next Page