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

    • Bad User: Authenticated but not connected

      Zoho CRM cannot send/receive emails and it appears as if it may be an api configuration change either via Zoho or MS. Does anyone have information on how to fix this error message? I am admin on all my accounts. Zoho and MS are blaming each other.

    • Edit email address that appears on invoice

      Hi How do I change the email address that appears on invoices, it is showing the email address that i used to sign up to zoho with but I want to change it to another email address that we use for accounts. also is there a way to edit the position of a

    • Zoho Tasks - Add Sorting by Priority

      We are able to Group by and Filter by Priority but for some reason we can't Sort by Priority on the Task lists. Please allow for sorting by priority if the current view is not grouped by priority.

    • customize payment page

      Is there a way to customize, other than the theme colour, the payment page that customers are taken to from invoices? I can't seem to find a way. I just don't like the formatting of the current page and would like to make it look better. I've looked at

    • Zoho People > Candidate Form > error Editable Primary Lookup is needed to set add permission

      Hello All I have try to turn on the add feature in the candidate form It show the error Editable Primary Lookup is needed to set add permission What is missing from my side?

    • 6 time-saving tips for working with tables in Zoho Writer

      Tables have always been the best way to represent data. They help you structure and categorize information systematically and present them in a simpler way. While tables in Zoho Writer are easy to implement, some tasks might not be that obvious.  Here are some time-saving tips to help you work better with tables in Zoho Writer:    1. Insert Multiple Rows / Columns in a Table Adding more rows and columns is the most common action performed while working with tables. Instead of using the Table tab,

    • Add Built-in "Partner Finder" / "Contractor Directory" Tab to Zoho Desk Help

      Hi Zoho Team, We hope you're doing well. We would like to request a new feature for the Zoho Desk Help Center: A built-in, configurable "Partner Finder" / "Contractor Directory" tab or section, similar in concept to your own Zoho Partner Finder at: 🔗

    • Can't get sender adress to work

      Hi, I am having some trouble getting the sender adress to work for responses on tickets. I would like to configure a sender adress that is different from the zohodesk emailadress that is normally used. These are the steps I have followed: 1. Add a new

    • Question Regarding Deleted Reports in Zoho Desk Analytics

      Dear Zoho Desk Support Team, I hope this message finds you well. We have a question regarding the Analytics module in Zoho Desk, specifically related to deleted reports/dashboards. We would like to understand the following: Is there a recycle bin, recovery

    • Add an option to start zobot when user clicks the Chat with Us button

      I would like to have an option to start the zobot when user clicks on "Chat with us" button when chat widget is maximized that way visitors could see first the homepage and decide which channel they would like to use to connect, or to see the quicke help

    • Zoho Books - Feature Request - Provide "Show PDF View" toggle on Invoice records

      I have noticed it is possible to activate or deactivate the PDF preview on some records but not all. This would be very helpful on Invoices when a custom template is being used and the PDF preview does not represent the output file. Not available on:

    • Incorrect Handling of XLSX data

      Trying to import an XLSX schedule of bills into Zoho Books I ran across the problem of date formatting. To replicate: Build a CSV file with bill dates in whatever format you like and import it - this should work if you match the "dd/MM/yyy" etc. format

    • Disable Smart Filters By Default

      The smart filters "feature" is causing confusion for Zoho Mail users. New emails should be delivered to the inbox unless they have specifically opted to redirect them somewhere else. People don't understand that new emails might be waiting in a random

    • Adding Columns to Reports

      Hi, Is it possible to choose fields to be added as columns in the reports? Thank you.

    • How do I automatically assign the project owner for all tasks in Zoho Projects?

      I have been researching for days on how to automatically assign all the tasks to the project owner on creation of the project in Zoho Projects. I have been having to go in and manually change all the task owner from 'unassigned' to the owner of the project

    • CRM Kiosk - Action for GetRecords

      I have a Kiosk screen with GetRecords and want to use the selected records in a custom function. My particular case is to set a lookup value on the selected records. Generally speaking though, I want to work with the selected records in a function. I

    • Extract Archived Projects using Zoho Projects API

      In my organization we archive the projects when they are already completed, charged, invoiced, so that only those that are still pending process remain active. I need to access all projects (active and archived) from an external system, but the API v3

    • Email for customer to provide payment information

      Is there a way for customers when you set up a subscription to get an email that prompts them to put in their billing information to start their subscription? Also, can you show the subscription in their portal?

    • Unable to display field label from a hidden Single Line Textbox in Description

      Hi folks, I'm unable to display my hidden field, e.g. ${zf:SingleLine4} , in my description. I'm pre-filling this hidden Single Line Text box via "Field Alias - Pre-fill URL" settings. I noticed that my decimal form fields work, e.g. ${zf:Decimal}, and

    • Lookup fields

      Is there any way to add Lookup fields to Zoho FSM -- I do not see the option but I see default lookup fields in different modules

    • Zoho Analytics - Bill Table

      Hi I am new to Zoho and mainly work in Books. Recently learned of Zoho Analytics and am exploring it to create reports that would be useful for me. For example, I want to create a bills cash forecast by week for cash flow planning. When I start to create

    • Creating a tax - amount table in Analytics

      Hi everyone, I would like to create a report in Zoho Anayltics that creates the tax and amounts in a table. I have been able to create a report that shows me all the tax accounts, but I can't get it combined with the amounts of the accounts. Is there

    • Is it possible to do custom domains on test accounts that use saml setups?

      In Zoho Billing, Is it possible to do custom domains on test accounts that use saml setups for the customer portal?

    • I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API.

      Hi Zoho Team, I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API. I am able to manually upload a PDF into this field through the UI. I am also able to upload files as attachments

    • No chat option

      Chat option is not available in Android app.

    • How to add custom templates in zoho sheets mobile

      How can I add custom templates in Zoho spreadsheet mobile?

    • Order Items

      Hi .. We have to implement orders with line but each line should have a separate record and not as a subform, does anyone have experience with that kind of solution what is the best practice for that kind of thing Thanks

    • Trello: Invalid Client - Client ID passed does not exist

      Hello, I am trying to authorize the Zoho CRM power-up in Trello but always land on the following page: I tried adding a trello client to the Zoho API console but this generated a different client ID to the one in the link of the page in the above picture.

    • Zoho Sprints - Q2 updates for 2025

      Hello everyone! We’re excited to share the latest updates from Zoho Sprints for Q2 2025! This quarter, we rolled out a few highly-requested features designed to enhance collaboration and time management across your projects. Here's a look back at the

    • CRM Email Insights Not Working - Status not Changing

      I used to be able to see if a customer opened/read an email in CRM, but I no longer get those status changes inside their record. I have everything enabled and I am sending the email from CRM. The experience center has the status' enabled as well. Any

    • The use of Ticket statuses

      When your support team mark a ticket "Closed" before I had a time to check what your team has done on the ticket - I have to consider this as you consider the ticket closed even if I dont consider it closed. Which automatically produce a negative sentiment.

    • "Replace" an existing version of CRM

      Hi all, I have a question, I saw an article about this once, but I now cannot find it. I am working with a client who has had their CRM in Zoho One built and extensively modified. But it is non-functional now, and rather than try and unpick the system,

    • Data Import From a private PostgreSQL RDS Instance

      Hello All, I feel like the problem I am experiencing has been seen before; however, I am having a difficult time finding any solutions. Hoping the community has some insights. I am trying to import data from a PostgreSQL RDS instance that is behind an

    • Assistance Required: Authentication Error When Sending Credit Application Form

      Hi, I'm encountering an error message that states: "Authentication unsuccessful – the user credentials were incorrect." This occurs when I attempt to send the credit application form to our customers. I've attached the form I’m trying to send for your

    • Missing Fields in Lead Conversion Mapping

      I’ve been using Zoho CRM since 2013 to manage leads and convert them into contacts and jobs. When I convert a lead to a customer, I create a new contact and a job. Previously, this process automatically transferred key information from the lead to the

    • Allow selection of select inactive users in User data fields

      Hello, We sometimes need to select a previous employee that has an inactive account in the User data field. For example, when doing database cleanup and indicating actions are done by a certain employee that weren't filled out when they were part of the

    • Connection to Zoho One

      My org has a Zoho One account, which includes Zoho Social. We are wanting to try linkthread. However, I want to make sure it is set up properly from an account perspective, as I have accidentally created Zoho accounts separate from Zoho One when I didn't

    • Ticket Automatically Created from Closed Chat

      Is there a way to prevent a ticket being create for every chat.... or at the very least have it automatically closed.

    • IMPORT INVOICES CSV

      Hi, Impossible to import invoices in Zoho books with a csv file. I have also tried with the template. My topic keeps getting closed but I did not get any answer Is there an issue with this fonctionnality ?

    • Related Lists in Email Templates

      Hi Zoho team, I would love to see a feature where related list information can easily be added to an email template (instead of mail merge). I have a client who books flights for their customers. They do this through a Flights module so all booked flights

    • Next Page