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

    • Transferring CRM Attachments to Workdrive

      relatedrecords = zoho.crm.getRelatedRecords("Attachments","Conditions",conId); attachid = List(); for each ele in relatedrecords { attachementId = ele.get("id"); attachid.add(attachementId); } for each ele in attachid { counter = 1; downloadFile = invokeurl [ url: "https://www.zohoapis.com/crm/v2/Conditions/" + conId + "/Attachments/" + ele type: GET connection : "work_drive" ]; resp2 = zoho.crm.attachFile("Deals",dealId,downloadFile); resp3 = zoho.workdrive.uploadFile(downloadFile, dealWD, "PlaceHolder"+counter+"",

    • Turn Decision Box to a button

      Dear all, I need your help on CSS to turn a Decision Box to a Button. I have a Decision Box like: Turn on/off to refresh the information. (on User Input, either True or False, will refresh the information) Now I want to simulate to treat it like a Refresh

    • How to restrict user/portal user change canvas view

      Hi , I would like to restrict user / portal user change their canvas view because I hide some sensitive field for them. I dont want my user switch the canvas view that do not belong to them But seems Zoho do not provide this setting?

    • New Customization options in the module builder: Quick Create and Detail view

      Hello everyone, We have introduced two new components to the module builder: Quick create and Detail view. The Quick Create Component It is a mini form used to create a record and associate it to the parent record from a lookup field. For example, if you have a Deals lookup in the Contacts module, then you can associate existing deals or create a deal and associate it with the contact. You can customize this Quick Create form by adding standard as well as custom fields. There is no limit to the number

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • unblock my zoho mail account. outlines@zoho.com

      please unblock my zoho mail account, outlines@zoho.com

    • SMTP email sending problem

      Hello, I've sent emails before, but you haven't responded. Please respond. My work is being disrupted. I can't send emails via SMTP. Initially, there were no problems, but now I'm constantly receiving 550 bounce errors. I can't use the service I paid

    • Mailk got blocked / Inquiry About Email Sending Limits and Upgrade Options

      Dear Zoho Support Team, My name is Kamr Elsayed I created this account to use for applying for vocational training in Germany. As part of this process, I send multiple emails to different companies. However, after sending only 8 emails today, I received

    • Forwarder

      Hi, I tried to add a forwarder from which emails are sent to my main zoho account email . However, it asks me for a code that should be received at the forwarder email, which is still not activated to send to my zoho emial account. So how can I get the

    • Less clicks, more connection – the usability edge of Zoho Desk

      Imagine joining a new workplace, eager to prove your skills, partner with peers, learn new tools, and build a strong foundation for your career. The standards you've set could drive pressure into your head. You now discover the organization is using Zoho

    • No chat option

      Chat option is not supported.

    • Direct “Add to Google Calendar” Option in Zoho Meeting

      Hello Zoho Meeting Team, Hope you are doing well. We would like to request an enhancement related to the “Add to Calendar” functionality in Zoho Meeting. Currently, when we open Zoho Meeting and view our meetings under My Calendar, there is an Add to

    • Multi-currency and Products

      One of the main reasons I have gone down the Zoho route is because I need multi-currency support.  However, I find that products can only be priced in the home currency, We sell to the US and UK.  However, we maintain different price lists for each. 

    • Default Tagging on API-generated Transactions

      If one assigns tags to an Item or Customer, those tags get auto-populated in each line item of an Invoice or Sales Order when one creates those documents. However, if one creates the Sales Order or Invoice via the API (either directly coding or using

    • DKIM cannot be enabled for the domain as no verified default selector present

      Hi Support Team, For Domain DKIM record trying to enable status. but showing error "DKIM cannot be enabled for the domain as no verified default selector present" So, please resolve the issue. Thank you.

    • unable to send message reason 554 5.1.8 Email outgoing blocked

      unable to send message reason 554 5.1.8 Email outgoing blocked

    • I can't log in to my account on Thunderbird

      I've just had to rebuild my PC (calamitous mess from Microsoft with Win10/Win 11 'upgrade' - they confirmed I had to start with a new build). I have used Zoho mail for years via Mozilla Thunderbird, but now I've had to download the latest version of TBird,

    • Should I Use DMARC?

      When I configure Zoho Mail's DMARC settings, it's mandatory to fill in the RUA and RUF (Aggregate notification email address*, Forensic notification email address*) addresses. When we enter an email address in these fields, we receive reports from the

    • Introducing Profile Summary: Faster Candidate Insights with Zia

      We’re excited to launch Profile Summary, a powerful new feature in Zoho Recruit that transforms how you review candidate profiles. What used to take minutes of resume scanning can now be assessed in seconds—thanks to Zia. A Quick Example Say you’re hiring

    • Books API Receiving an Error that Doesn't Make Sense when Creating Credit Note - trying to use 'ignore_auto_number_generation' argument

      Hello, I'm working on a newly created routine and I'm getting an error that doesn't make sense when trying to create a new Credit Note. Here is my POST request. Endpoint: https://www.zohoapis.com/books/v3/creditnotes?organization_id=########## Body:     {

    • How do i move multiple tickets to a different department?

      Hello, i have several tickets that have been assigned to the wrong department.  I am talking about hundreds of automatically generated ones that come from a separate system. How can i select them all at once to move them to another department in one go? I can select them in "unsassigned open tickets view" but i can't find a "move to another department" option. I also can't seem to assign multiple tickets to the same agent in that same view. Could somebody advice?

    • Zoho Desk API Documentation missing a required field

      We are trying to create a section using this information. Even after preparing everything based on that page, we still get an error. The error we get is this: {"errorCode":"INVALID_DATA","message":"The data is invalid due to validation restrictions","errors":[{"fieldName":"/translations","errorType":"missing","errorMessage":""}]}

    • How to move emails to Shared Mailbox?

      Hello, I created a Shred Mailbox instead of using a distribution group. But I cannot move previous emails to certain shared mailbox. Is it possible move some emails from inbox to shared mailbox?

    • Collaboration with free plan user.

      Hello. Do both users need to be on Pro plan to collaborate? Or can a Pro user share a note with a free plan user with the ability to edit?

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Latest update

    • Send email template "permission denied to access the api"

      Hello, Per the title, I'm trying to send a Zoho CRM Email template based on the advice given here: https://help.zoho.com/portal/en/community/topic/specify-an-email-template-when-sending-emails-in-custom-functions (I'd prefer to send right from Deluge

    • Zoho sign and creator error message {"code":9043,"error_param":"Checked by","message":"Extra key found","status":"failure"}

      Good day, I receive the error message: {"code":9043,"error_param":"Checked by","message":"Extra key found","status":"failure"} when running below code from creator to sign, void TestForSign(int ID) { //Fetch Template Details (Optional, for dynamic mapping)

    • Zoho Inventory Now Supports VeriFactu for Businesses in Spain

      Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia Estatal

    • Connection to other user

      Zoho Cliq handles sharing of Custom OAuth Connections that require individual user logins.

    • Issue in Annual Leave

      We created a policy to credit 21 days at the Start of the Year An employee has taken 16 days of leaves thought the year, so we expect to see 5 Leaves remaining right? But Zoho People is Showing 12 Days of Leave Balance Available If we check the Leave

    • Missing information data Zoho inventory

      there some missing data in Zoho inventory connection. pick list stock counts bin location we have requested it via mail and the support team doesn’t gove feedback. has anyone achieve to get these info or to ask other ya les

    • In arattai received message can't be deleted

      The issue has been noticed in following: arattai app (Android) arattai app (Window) arattai web While the message posted by me may be deleted, the ones received from others can't be. The item <Delete> change to <Report> when the message is a received

    • Enhance productivity with the revamped Zoho Sheet View

      Hello folks, For some time now, you've been able to use the Zoho Sheet View to quickly edit multiple records or to insert a batch of new records. Its tabular interface allows users to engage in these tasks productively. Despite this, the existing Sheet

    • Analytics Portal

      I have the "standard plan" and want to explore the portal option; I activated the 15-day trial but do not see the pricing for the add-on. How can I get the price under "Upgrade add-ons." Thanks Rudy

    • Can I filter a Lookup field to only show related records from another Lookup in Zoho CRM?

      In our Leads module, we have two Lookup fields: Recruitment Agency – the agency that the lead came from Recruiter – the individual contact from that agency who sent us the lead Both fields link correctly to their respective records in CRM. However, our

    • Zoho Books API invoice email bouncing with 'relaying-issues' error

      I have waited over 30 days for zoho books uk to assist with the following and i have had no replies or tickets erronously closed. The service has been terrible - very unlike zoho! So i am raising this here hoping that a community member can assist: Hello,

    • How do I filter contacts by account parameters?

      Need to filter a contact view according to account parameter, eg account type. Without this filter users are overwhelmed with irrelevant contacts. Workaround is to create a custom 'Contact Type' field but this unbearable duplicity as the information already

    • Zoho Writer to Zoho Sign Template Misalignment – Request for Community

      We are currently facing a critical issue impacting our live business operations due to a misalignment problem between Zoho Writer templates and Zoho Sign output. Issue Summary: We have an automated workflow in Zoho CRM using Deluge scripts that generates

    • Account blocked

      Yesterday I got my Zeptomail account blocked due to too many hard bounces. My account is used exclusively for sending transactional emails (eg. your order has been shipped, a form has been filled, etc) and the sudden blocking impacted hundreds of websites

    • IF Formula

      Hi, I'm having trouble setting up a custom formula in a field. Can you help me with it? The formula should do the following: If the created date is less or equal to 30 days the field should display a string New in pieline or Exisitng pipeline if above

    • Next Page