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

    • Recent Topics

    • Zoho CRM Participants Automatic - Invite Using Deluge

      Hi Zoho! Is there a way to make the invitations automatic via API? I'm using this one but it doesn't work or reflect in the CRM: participantUser = Map(); participantUser.put("type","email"); participantUser.put("participant",email); participantUser.put("invited",

    • Numbered / bullet point List in Zho Cliq

      Hi, is there a way to format chat messages in Cliq like this Topic 1 Hey, I finished this project yesterday etc... Topic 2 I am still working on this etc...

    • Cannot Access Subform Display Order in Deluge

      As highlighted in this community post, we still have to deal with the significant limitation of not being able to access the user-sorted order of subform rows through Deluge. This creates a major disconnect between the UI capabilities and backend automation,

    • ZOHO Blueprint and Workflow

      Hi, Correct me if i'm wrong, Blueprint triggers when a record that meets the criteria is created. It follows a specific transition that you will be setting up. Does blueprint work if the first state was triggered by a workflow? For example, In my custom module 1, I have a field named status. The statuses are 1, 2, 3 and 4. As soon as I create a new record, a workflow triggers that updates the status field to 1. Can a blueprint start from 2? My other concern is, can blueprint transitions work at the

    • Creating multiple CRM leads from a Zoho Forms subform

      Hi all, We have a heavily used intake form that is used for new leads as a part of our intake. There is a subform that allows the lead to add additional team members, their titles and other basic info. That form submission creates a new Lead and the subform

    • How many groups in Zoho Mail can I make?

      I'm currently on the free plan, which has a limit of 10 users. Does that limit includes groups too? If not, what is the limit for groups? Thanks!

    • Feature Suggestion for Zoho Social: Auto-reply to Comments or Keywords

      Hi Zoho team, I'd like to suggest a very specific feature that would be extremely helpful for customer engagement: the ability to automatically send a reply to comments on posts — either all comments or those containing specific keywords. For example,

    • My domain did not activate

      Hi, my domain (apsaindustrial.com.ar) did not activate, and the phone verification message never arrived. Please would you solve this problem? Thanks.

    • Already have Zoho account. Not letting me log in

      I already have a Zoho account that is associated with my Google email and my phone number. Even though I'm already logged in to Zoho, when I click on the mail icon to access my email, it takes me to the pricing page. When I click on the free option, it

    • ZOHO Mail App Not working

      There seems to be an issue with Zoho Mail App today. It is not connecting to server, internet is working fine, tried uninstalling app and reinstalling, loading circle keeps spinning round. Is there an update on the way?

    • facing error 550 5.4.6 while sending emails

      Please help me fix this issue

    • Allow Itemization for Recurring Expenses

      For whatever reason, one cannot itemize a Recurring Expense. This capability should be added. The use cases to support this are largely the same as what they were to allow for itemization in Expenses. Anything that would need to be itemized for a regular

    • Zoho reply to not working. just reply to my self

      Hello. i using on my wordpress website a contact form from Wsform. i can set the reply to email there. normally it works. but since i am using your wordpress plugin zoho mail it doesn`t work. its not using the reply to (email from customer). I just can

    • Painfully Slow Zoho mail

      Since yesterday Zoho Mail seems to have starting functioning very slowly and having a few bugs. It's slow to open mails, slow to send, slow to change between email accounts. Sometimes clicking on a particular folder (eg Sent folder) stops working and

    • Can't receive any email from other platform

      Hello,everyone, i'm just join zoho and create two email accounts for my own business. I was using it to get a verified email from stripe, but can't receive it. and I use my private gmail account to send test email twice, first time show below reply, but

    • Weekly Tips: Secure your attachment downloads with Zoho Mail

      Safety is one of our main concerns, whether it’s about device security or online protection. We use tools like fingerprint scanners, facial recognition, and two-factor authentication to keep our devices and email accounts secure. We use methods like OTP

    • Printing from Zoho Creator hosted on my own server to printers hosted on my clients local network

      Hello. Fairly new to Zoho Creator and looking for best options to be able to print from my application hosted on my own server to any printer hosted on my clients own local network. Any advice is welcome. Thank you.

    • Your Incoming has been blocked and the emails will not be fetched in your Zoho account and POP Accounts

      Can some on help me regarding our account . thank you so much

    • Zoho Creator integration with Sage 50

      Hi, Wondering if anyone has had any experience connecting Zoho to Sage 50 and could share any information on this matter. Thank you.

    • Dropshipping Address - Does Not Show on Invoice Correctly

      When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company being

    • Conditional Email Forwarding

      How can I set conditional email forwarding of the users? For example: Mail should be forwarded to a address only if it comes from a particular sender. So, I want such email forwarding, which forwards mails based on particular conditions, like the incoming

    • Series Label in the Legend

      My legend reads 'Series 1' and 'Series 2'. From everything I read online, Zoho is supposed to change the data names if it's formatted correctly. I have the proper labels on the top of the columns and the right range selected. I assume it's something in

    • Dependent drop-downs... how?

      Good day. I have 2 different situations where I need a dependent drop-down field. First is for a subform, where I want to show related fields for a specific customer on the main form. In my case it is a parent whose children make use of our school transport

    • Add System Pre-Defined Lookup Field to Subform?

      Hi there! New to using Zoho, so this may already exist, but I'm having trouble figuring it out. Is there a way to get the system pre-defined Account Lookup field (in our case, renamed to Company Name), as the starting point for a subform? In our company,

    • Incoming emails not appearing in Inbox

      Hello, I have an issue with incoming emails sent from my website (domain: h2ostop.si). Emails are visible in the Sent folder, which means they are successfully sent through Zoho SMTP, but they never appear in my Inbox. Nothing arrives in Inbox, Spam,

    • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

      Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

    • Automatic Matching from Bank Statements / Feeds

      Is it possible to have transactions from a feed or bank statement automatically match when certain criteria are met? My use case, which is pretty broadly applicable, is e-commerce transactions for merchant services accounts (clearing accounts). In these

    • Is there any way to send an Excel received by email to Dataprep?

      Every day I receive an email alert with an Excel file that I want to process through a Dataprep pipeline. To do this, I need to: -Save the file to disk -Open the pipeline -Run the pipeline -Update the source -Several clicks to select and open the saved

    • Email Opt Out Question

      Has the problem where if a customer is emailed opt out prevents you sending standard emails? For me this feature is simply to stop any email marketing and should not block people from receiving emails via Zoho mobile, which makes no sense.

    • Can No Longer Access Zoho Email Accounts from iPhone or iPad Apple Mail Apps ,.

      Keeps asking for password, Says ID or password incorrect. Tried creating a new app specific password. Same result. Is this possibly related to the server maintenance. Have verified all email settings, userid and password. This has worked for years until

    • Latest update caused issue in using marathi typingzoho

      With latest update now marathi typing does Not work in zohonotebook. I preferred zoho over other because it was supporting marathi font without any distortion.. But after new update,keyborad simply does not work

    • Login verification emails never received.

      I can't login to my account. You send a verification email, but it never arrives. This is a common problem, frequently caused by some relay point out there classifying the sender as a spammer. Is there anything I can do to bypass this? Maybe get a text

    • Zoho Bigin - should be able to link a "contact" to multiple "companies"

      Hello Support, I called into telephone support and was told that a contact can only be linked to one company. We have situations were director are contacts of and directors of multiple companies so that seems a basic weakness in Bigin. When go to add

    • CRM: hosting a single html file in Zoho and displaying it as a widget

      I have seen that CRM offers the option of uploading a web project to Zoho itself and displaying it as a widget in CRM. The instructions then talk about setting a development environment with Node and developing an application to upload to Zoho. But I

    • Global lists for Multi select

      It would be great if I could select a global list to use for a multi select dropdown filed.

    • Hotmail is blocking the zoho mail IP

      Greetings, Since last Tuesday (5 days ago today) I wrote to Zoho support and I still haven't received a single response (Ticket ID: 2056917). Is this how you treat people who pay for your email service? I am making this public so that those who want to

    • Yahoo is rejecting e-mails sent from a Zoho server

      Diagnostic-Code: 4.7.0 [TSS04] Messages from 136.143.169.51 temporarily deferred due to unexpected volume or user complaints - 4.16.55.1; see https://postmaster.yahooinc.com/error-codes Remote-MTA: dns; mta5.am0.yahoodns.net

    • Yahoo blocks e-mail sent from Zoho servers

      Getting this for a bunch of Yahoo addresses. Do you know if some of your servers got blacklisted? Diagnostic-Code: 4.7.0 [TSS04] Messages from 136.143.169.51 temporarily deferred due to unexpected volume or user complaints - 4.16.55.1; see https://postmaster.yahooinc.com/error-codes

    • Working with dates and Function Field

      Hello friends! I'm trying to add days to a date, however the field function will always shows 00:00:00 after the resultant date. How can I display only the date, whithout the time? toDate(input.request_date.addDay(input.Prazo_acordado),"MM,d,yyyy") The code above will result something like "11-Feb-2020 00:00:00", but I want to display only "11-Feb-2020"

    • What's New in Zoho Analytics - November 2025

      We're thrilled to announce a significant update focused on expanding your data connectivity, enhancing visualization capabilities, and delivering a more powerful, intuitive, and performant analytics experience. Here’s a look at what’s new. Explore What's

    • Next Page