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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Tip #3: How to change your booking page language

        Displaying your booking page in your target audience's language can greatly increase customer satisfaction. By speaking their language, you will help customers feel more comfortable scheduling with you and create a stronger connection with them. Let's

      • Bigin Android app update: Alerts while creating tasks outside of working days, conflicting events and calls.

        Hello everyone! In the most recent version of the Bigin Android app, we have brought in support to display an alert if task is being scheduled outside of the working days. Also, when scheduling an event or call in the Activities module, a conflict alert

      • Bigin update: Link email messages to pipeline records.

        Hello everyone! In the latest version of the Bigin iOS(v1.11.9) and macOS(1.8.9) app, we have brought in support for an option to link email to pipeline records. This helps you to view emails specific to a deal, especially when a contact is associated

      • Bigin Android app update: Custom buttons and widgets

        Hello everyone! We are excited to introduce custom buttons and widgets on the Bigin Android app. Widgets: A widget is a customizable UI component in Bigin that improves efficiency and user experience. It lets businesses embed components, streamline interactions,

      • Zoho Sheet for Desktop

        Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

      • Zoho Sheet - Desktop App or Offline

        Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.

      • Collective-booking event not added to all staff calendars

        We assign two staff to certain events. When the client books this event, it adds it to one staff calendar (the 'organiser') but not the other. How can I ensure all staff assigned to a collective booking get the event in their calendar? (A side note: it

      • Project Management Bulletin: October, 2025

        Every need leads to innovation. Project Management tools were developed out of sheer necessity to drive large projects. With wide usage, the specifications grew precise, and so did the refinement. Over years we’ve crafted one of the best project management

      • Zoho Sheets saying locked when not locked

        Zoho Sheets won't let me add more rows to sheet because it's saying the sheet is locked, but the sheet is not locked. I tried using a different browser but I still have the same issue.

      • Identifying and Merging Accounts with Similar (Non-Exact) Names

        Hello everyone, I’m aware of the built-in deduplication feature in Zoho CRM that allows merging records with exactly matching values for selected fields. However, I’m running into a situation where our migrated data contains multiple variations of the

      • Option for super admin to recover the deleted chats in Zoho Cliq

        Currently, in Zoho Cliq, if a user accidentally deletes their chats, there is no option for the Super Admin to recover or view those deleted messages. I believe it would be helpful if Super Admins had a recovery option, perhaps within a certain time frame,

      • Zoho CRM iOS app updates: the Homepage, Zoho Survey integration, and support for multiple file uploads in subform

        Hello everyone! The Zoho CRM mobile app continues to evolve to bring you a smoother and more powerful CRM-on-the-go experience. We're excited to share some important updates now available in the iOS app. Here's what's new: Homepage support Zoho Survey

      • I am trying to integrate my module in sandbox environment to add data via API

        I went through the documents and tried to setup the API for adding the module via the api but the problem is the token setup is done on "https://accounts.zoho.in/oauth/v2/token" domain and the bulk write is done on "https://content.zohoapis.com/crm/v8/upload"

      • Setting up primary mobile number.

        Hi Sir Earlier I joined IIFL team and got an organizational email of zoho services. Later i quit and now my account is deactivated with IIFL but i am unable to link my mobile number to my own email id with zoho.

      • Tables for Europe Datacenter customers?

        It's been over a year now for the launch of Zoho Tables - and still not available für EU DC customers. When will it be available?

      • Guided Conversations - Ticket Creation

        Hi there, Using Guided Conversations to Take Customer Data and apply it into a Support Ticket for internal use, Is there a way to take multiple Textual Variables Inputs (A series of questions), and have the answers all appear in the Description of the

      • How to send certain invoices for Approval based on condition?

        To streamline operations, I need the invoices to go for approval when certain conditions are met. For example, if my staff gives a discount of x amount, it must go for approval. If there is no discount, then the invoice will be approved automatically.

      • Unable to continue payment

        Hi, I want to make a payment for my email subscription, but I cannot proceed with the payment because my NITKU is invalid. In Indonesia, the NITKU consists of 22 digits, but Zoho only provides 20 digits, causing my NITKU to be invalid. Please help me

      • Is there a way to show contact emails in the Account?

        I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail

      • Massive spam pretending to come from our address – is this a Zoho security issue?

        Hi, We’ve been receiving more and more suspicious emails lately — many of them clearly look like scams. But yesterday, we got an email that appeared to be sent from our own address, which was very concerning. We're starting to wonder if this might be

      • Cant recieve mails

        I’m having an issue with my external IMAP account not fetching any emails into Zoho Mail, even though the connection test says “Success”. I can send, if someone sends an email to me. my original directory (home.pl host) recieves it in their portal but

      • Zoho Sheet Autofit Data

        While using Autofit Data function in Zoho Sheets with Devnagri Maratji or Hindi Fonts, a word or a number, it keeps couple of characters outside the right side border.

      • Enhancements to finance suite integrations

        Update on the migration (October 28, 2025): Starting this week (October 29 tentatively), we’ll begin migrating Zoho CRM users to Zoho Books as integration users. This means actions will now run under each user’s own Zoho Books access, instead of the admin’s.

      • Edit 'my' Notes only

        The permissions around Notes should be more granular, and allow to user to be able to edit the notes he created only. The edit Notes permission is useful as it allows the user to correct any mistakes or add information as needed. However, with this same

      • Job Alerts for Candidates

        hi All, I have 2 questions relating to sharing job details with candidates. 1. is there a way to notify candidates that meet certain criteria of current jobs available? eg. I run a candidate search, and identify 50 candidates that might be suitable. Can

      • Add multiple users to a task

        When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesman

      • Enhancing Task Accuracy: Automatically notify the owners upon Task duplication.

        Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. The requirement

      • Nodemailer not working with Zoho

        Hi All, I'm having issues with Zoho working with Nodemailer. It works as expected when using gmail as the service. Below is the code I get when using zoho. Error sending email: Error: connect ECONNREFUSED 127.0.0.1:587 at TCPConnectWrap.afterConnect [as

      • desktop app for TODO

        Is there a desktop app for Zoho TODO?

      • Show/ hide specific field based on user

        Can someone please help me with a client script to achieve the following? I've already tried a couple of different scripts I've found on here (updating to match my details etc...) but none of them seem to work. No errors flagged in the codes, it just

      • Where are Kanban swimlanes

        So i've been playing with Zoho Projects Kanban view a bit more. It appears that task lists are being used as the Kanban columns, which makes sense from the implementation point of view but not the logical one.  Kanban columns are statuses that a task can flow through, while a task list has been a logical way to organize related tasks and relate them to a mislestone. In other words a task in a particular task can go through several stages while remaining in the same task list. After doing some research

      • Tip 19: How to display images in Pages using ZML snippets

        Hi folks, We're back with another tip on how to use Zoho Markup Language (ZML) to create interactive pages in Zoho Creator. You can use ZML snippets to add various kinds of components to your pages and structure them in meaningful ways. That's not all, though—using ZML you can ensure your application is automatically compatible with all kinds of devices without any inconsistencies. We often get questions from users about how to invoke Deluge scripts within ZML code. Here's a simple use case for adding

      • Can zoho swign format block text spacing automatically when prefilled from zoho crm?

        I'm sending zoho sign template from zoho crm, so that zoho crm pre-populates most fields. I have existing pdf documents that i am having signed. I have no ability to change the pdf documents, they are standardized government forms. The problem I am facing

      • Zoho Inventory / Finance Suite - Add feature to prevent duplicate values in Item Unit field

        I've noticed that a client has 2 values the same in the Unit field on edit/create Items. This surprised me as why would you have 2 units with the same name. Please consider adding a feature which prevents this as it seems to serve no purpose.

      • Reference lookup field values in Client script

        hello all, I'm using a "ZDK.Apps.CRM.Products.searchByCriteria" function call, which is returning the matching records correctly; however, one of the fields is a lookup field which I need the associated data. I believe there is a way to get this data

      • In App Auto Refresh/Update Features

        Hi,    I am trying to use Zoho Creator for Restaurant management. While using the android apps, I reliased the apps would not auto refresh if there is new entries i.e new kitchen order ticket (KOT) from other users.   The apps does received notification but would not auto refresh, users required to refresh the apps manually in order to see the new KOT in the apps.    I am wondering why this features is not implemented? Or is this feature being considered to be implemented in the future? With the

      • Every time an event is updated, all participants receive an update email. How can I deactivate this?

        Every time an event is updated in Zoho CRM (e.g. change description, link to Lead) every participant of this meeting gets an update email. Another customer noticed this problem years ago in the Japanese community: https://help.zoho.com/portal/ja/community/topic/any-time-an-event-is-updated-on-zohocrm-calendar-it-sends-multiple-invites-to-the-participants-how-do-i-stop-that-from-happening

      • How can I filter a field integration?

        Hi,  I have a field integration from CRM "Products" in a form, and I have three product Categories in CRM. I only need to see Products of a category. Thanks for you answers.

      • How to implement new online payment gateway?

        Hello, Can you tell me how to proceed to implement my local payment gateway? DIBS has an open avaiable API that should be easy to implement into ZOHO BOOKS. http://tech.dibspayment.com/dibs_payment_window

      • Zoho CRM - Portal Users Edit Their Own Account Information

        Hi Community, I'm working on a client portal and it seems like the only I can make the Account record editable to the Contact, is if I add another lookup on the Account to the Contact record. Am I missing something as the account already has a list of

      • Next Page