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

    • This mobile number has been marked spam.

      Dear zoho team, I am very happy to use zoho,because it india 🇮🇳 own app, but when we login into zoho account we facing some issue, please solve below issue ASAP. Add your mobile number As an added security measure for Accounts, you need to verify and

    • Add an external email to the allowed list

      I need to allow an external email to raise a ticket on Manage Engine ServiceDesk Plus. The external email is a outside of our domain and is not a domain user. The email address that needs to be allowed to raise a ticket request is noreply@formsatack.com.

    • Display name & account type change

      I made a mistake and subscribed with an individual account instead of business, how can I change the account type and enter the details of the business. The other question, if I can't, then I want the display name of our email to be 'Business name' instead

    • Request to change display name in Zoho mail

      Hello Zoho Mail Support, I am experiencing an issue with changing the display name on my Zoho Mail account. My email address is: info@witchcraftproduction.rs . I have already updated the display name in Settings > Mail Accounts, where it now shows as

    • Outbound IP address SPAM problem.

      Hello Zoho Support, We noticed that one of your outbound IP addresses (136.143.188.12), which delivers our domain’s mail, is currently listed on the UCEProtect blacklist. Because of this, our messages are sometimes flagged as spam by recipient servers.

    • Answer Bot and Personalized Questions

      Hi there, I have the same problem using the SalesIQ Answer Bot and the Zoho Desk Answer Bot (which really need different names, to be honest, in order to avoid confusion...) Customers that visit our website ask questions in the form of "What do you do?"

    • Forwarding

      How can I forward my Zoho account to my gmail account? Noël

    • Add a Way to Duplicate Cards in the Same Canvas (Retain All Settings)

      Dear Zoho SalesIQ Team, We would like to request a new feature in Zoho SalesIQ: the ability to duplicate an existing card within the same canvas while retaining all of its information and settings, including conditions, configurations, and display preferences.

    • Zoho Mail CC and BCC not working

      Zoho Mail CC and BCC not working. I have tried multiple combinations amongst my domain aliases but emails sent as CC or BCC never arrive, not even to Spam. I have checked that the DNS is set up correctly in Cloudflare and have even received a DMARC report

    • Zoho Autoplay Issue

      Currently, we run our graphics on a playlist with youtube videos interspersed in our office -- however, when we go to update the playlist (since last Thursday at around 8-9am EST) it no longer saves the autoplay function.  We have tried making a new account, manually saving with cntrl+s, making a new show, etc but nothing seems to work.  Even with our old program, we can't change it off of autoplay for ones that were created in the past. Another issue is that if we change a slide transition to anything

    • Critical Issue: Tickets Opened for Zoho Support via the Zoho Help Portal Were Not Processed

      Hi everyone, We want to bring to your attention a serious issue we’ve experienced with the Zoho support Help Portal. For more than a week, tickets submitted directly via the Help Portal were not being handled at all. At the same time no alert was posted

    • Adding hyperlinks in CRM emails time automatically

      It may just be me, but when I am writing an email to a lead, I find inserting a hyperlink very time consuming. Granted, I can use templates but there are a ton of scenarios where I might want to put a link in to an website that wouldnt require me to go though the effort of creating a template.  Ideally, the crm would identify that I that a string of text is a URL and insert the hyperlink automatically, just like microsoft outlook or gmail. Has anyone else had this same experience and found a way

    • Enhance "Applications Usage" with Date Filters, Historical Analytics & App-Level Breakdown

      Hello Zoho Creator Team, We are writing to request a critical enhancement to the Applications Usage section to improve our ability to monitor, analyze, and manage our platform consumption over time. While the current view of today’s usage is helpful for

    • External File Share - Allow delete

      Hi Team, when I share an external link and give it edit rights the external user can add but not delete files and folders. what am i doing wrong?

    • How to notify all members on any updates to zoho crm?

      Hi, I am using the free version of zoho CRM and currently seeing this will work for our company. We are a small company and wanted to be more informed about all the changes in zoho. 1. How do I s et notifications that go to the team for any and all changes

    • How to change the format for phone numbers?

      Mobile phone numbers are currently formatted (###) ###-####.  How can I change this to a more appropriate forms for Australia being either #### ### ### or (#)### ### ###?

    • Unattended Access on Android without Play Store

      I'm testing Zoho Assist for remote config and maintenance of our IoT devices. The devices are running Android 8.1 and do NOT have Google Play Store installed, nor can it be installed. I've been able to install Zoho Assist on the devices and load the enrollment

    • Open Sans Font in Zoho Books is not Open Sans.

      Font choice in customising PDF Templates is very limited, we cannot upload custom fonts, and to make things worse, the font names are not accurate. I selected Open Sans, and thought the system was bugging, but no, Open Sans is not Open Sans. The real

    • Is it possible to embed Zoho Bookmarks in the Cliq sidebar?

      Is there any way that each Zoho user can access their bookmarks (that live in https://bookmarks.zoho.eu/ which is technically a part of Zoho Mail) directly within Cliq? As a widget, or an item in the sidebar? My team does not use Mail, it uses Cliq all

    • Show Attachments in the customer portal

      Hi, is it possible to show the Attachments list in the portal for the particular module? Bests.

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

    • Navigate with Ease: Announcing Improvements to Your Zoho CRM for Everyone's Setup Experience

      Hello Everyone, We’re thrilled to announce new enhancements to the Setup Menu in our Zoho CRM for Everyone system, designed to simplify your workday and streamline your overall experience. What's New? Addition of a Setup Homepage Faster Search in Setup

    • Zoho Projects Webhook fails with HTTP Error 0

      Hello Zoho Community, I am pulling my hair out over this one. I have setup a very basic http(s) server that always responds "ok" and code 200 to incoming GET requests. It will accept any parameters, and any path. Really, all it does is say "ok," and log

    • ZOHO Campaignで表のカラムの幅を調整したい。

      表を作成した際、個々のカラムの幅を調整したいのですが、方法が分かりません。 どなたかご存じの方ご教示ください。

    • Auto-upload Creator Files to WorkDrive

      Hi everyone, I’m working on a workflow that uploads files from Zoho Creator to specific subfolders in Zoho WorkDrive, as illustrated in the attached diagram. My Creator application form has two multi-file upload fields, and I want—on successful form submission—to

    • Exciting Updates to the Kiosk Studio Feature in Zoho CRM!

      Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerful

    • Kaizen #129 : Client Script Support for Blueprints

      Hello everyone! Welcome to another week of Kaizen. Today, let us discuss about how you can use Client Script during a Blueprint transtion to meet your requirements. This Kaizen post will provide solution for the post - Need non-mandatory fields in blueprint

    • Search Bar Improvement for Zoho Commerce

      Hey everyone, I've been using Zoho Commerce for a bit now, and I think the search bar could really use an upgrade. Right now, it doesn't show products in a dropdown as you type, which would make finding items a lot faster. On Shopify, for example, you

    • Making digital signatures accessible to all: Introducing accessibility controls in Zoho Sign

      Hi there! At Zoho Sign, we are committed to building an inclusive digital experience for all our users. As part of our ongoing efforts to align with Web Content Accessibility Guidelines (WCAG), we’re updating the application with support that will go

    • Account Owner Field From Accounts Module to be Displayed in Contacts module

      I have a field in the Accounts Module in the CRM called "Account Owner" i want that field to be also mapped into the Contacts Module custom single line field called "Account Manager".

    • Update a field in the ZOHO Form, basis numeric value in another field in the same form

      I am trying to create a questionnaire in ZOHO, where clients need to answer 10 questions, and basis response, values are assigned. I have created a total score field where the sum of the values is stored. But i am unable to create a rule whereby another

    • How to update "Lead Status" to more than 100 records

      Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, Jonathan

    • Meet up de Zoho en Bilbao

      Buenos días comunidad! Estamos estudiando hacer un Meet up en Bilbao desde zoho y varios Partners. Para que la experiencia sea excelente, queremos saber cuantas pesonas se vendrían a Bilbao al evento. Y para que sea lo mas útil posible, que temas dentro

    • Picklist reference value in REST

      picklist options can be configured to have a different reference value than the displayed one, should be helpful in things like multilanguage: https://help.zoho.com/portal/en/kb/crm/customize-crm-account/translations/articles/translations is there a way

    • In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."}

      In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."} this is button Function used in the Creator map Inventory.Create_Credit_note(int CRE_ID) { return_value

    • Marketing Tip #2: Recover lost sales with abandoned cart emails

      Did you know most online shoppers don’t complete checkout? Automated cart recovery emails are an easy way to bring them back. A simple reminder can recover sales you’d otherwise lose. Try this today: Enable abandoned cart emails in Zoho Commerce and set

    • Billing Management: #9 Usage Billing in IoTs

      We live in a world where connectivity has become a lifestyle rather than a luxury. From smart thermostats that adjust your home's temperature to GPS trackers monitoring end-to-end fleets and sensors that optimize energy grids, the Internet of Things has

    • {"code":1038,"message":"JSON is not well formed"}

      Today this began failing: sales_order_data = zoho.books.createRecord("salesorders",books_organization_ID,order_data); with this error message. {"code":1038,"message":"JSON is not well formed"} This code has been running for two years. Here is the input

    • How can I migrate Shared Mailbox from Zoho Mail to Team Inbox?

      I am unable to migrate mails from my shared mailbox in Zoho Mail to Team Inbox. I am the super admin of my Zoho One plan and yet I am getting an error saying only admins can do this? I don't understand the issue.

    • Remember all the ways we've posted?

      The world celebrates World Postal Day in 2025 with the theme “#PostForPeople: Local Service. Global Reach". The story of the “post” is a story of human connection itself, evolving from simple handwritten notes carried over long distances to instant digital

    • Next Page