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.

Notes
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 pop up.

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 #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • 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

    • Recent Topics

    • Some emails are not being delivered

      I have this problem where some of my mail just seems to disappear. When I send it, it appears as sent with no mention of any problem, but my recipient never gets it, not even in the Spam folder. Same for receiving, I have a secondary e-mail address, and

    • New in Zoho Chat : Search for contacts, files, links & conversations with the all new powerful 'Smart Search' bar.

      With the newly revamped 'Smart Search' bar in Zoho Chat, we have made your search for contacts, chats, files and links super quick and easy using Search Quantifiers.   Search for a contact or specific conversations using quantifiers, such as, from: @user_name - to find chats or channel conversations received from a specific user. to: @user_name - to find chats or channel conversations sent to a specific user. in: #channel_name - to find a particular instance in a channel. in: #chat_name - to find

    • Template modifiactions

      Hello, I am struggling with the templates in ZOHO Books. Especially with the placement of some items, like company address, ship to, bill to etc.  For example: One item I like from template X (placement of ship to and bill to next to each other in the

    • Aggregating the First Value in the Group By of a dataset

      Hi I am trying to get the following Aggregate Formula to work in my chart, but cannot seem to get the right format. I have a series of data that I am running an include_groupby and want to SUM only a column in the first row of each group. So for example.

    • Track Zoho Campaign and Workflow sales impact

      I am attempting to measure the performance of our marketing workflows and campaigns by comparing the date each campaign was sent to a contact with the purchase date of the contact. For example, if Contact A was sent Email A on 9/1 and made a purchase

    • What is a line break code for zoho?

      Hi, I am archiving data by adding values from a single line field from one form to a multi-line field in another form. So I need a code/function that starts a new line on that multi-line field so it does not just keep adding it on the same line. Example, doing something like this means that it will be on a same line. archive.field1 = archive.field1 + input.Field1 I need a code so the input.Field1 can just start on the next line. Instead of "value 1, 2,3,4,5" It will be: "1 2 3 4 etc.".  something

    • Automatic Project Owner change

      Is there a way to change Project Owner automatically once a specific Milestone in a project is marked as completed. Different Teams are working on projects in our Org, they have their own Milestones to complete and so we transfer the project from team

    • Button to add product to cart

      Is there a way to have a button on a page, that when clicked, will add Qty 1 of a product to the cart?

    • Problem with Submit Button Design

      I have made a template to apply to my forms and under the button controls, I have it set to "standard" and yet it's still filling the container. This is super frustrating and looks weird. Why do we not have full control over button size? How can I fix

    • Zoho CRM- Authorize your Microsoft Teams account issue

      Hi, I tried to link Zoho CRM with Teams and I got the following message: Clicking "Authorize now" sent me to the following page, Microsoft tried to start a session but, after 3 seconds the page closed and nothing happened. I get the same message each

    • Is there a way to associate an email in ZOHO Main to a Vendor record in ZOHO CRM

      My situation is as below, I have a vendor in ZOHO CRM lets say "Vend A" and an associated contact, "Cont A" If Cont A sends me an email using the email I've registered in the contact record the standard OOTB email sync will work. But the vendor has some

    • Kaizen #207 - Answering your Questions | Advanced Queries using COQL API

      Hi everyone, and welcome to another Kaizen week! As part of Kaizen #200 milestone, many of you shared topics you would like us to cover, and we have been addressing them one by one over the past few weeks. Today, we are picking up one of those requests

    • Présentation de SecureForms dans Zoho Vault

      Soyons francs : demander à quelqu’un de transmettre un mot de passe ou des informations sensibles n’est jamais une tâche facile. On attend, on relance, parfois de nombreuses fois. Et quand l’information arrive, elle se retrouve souvent dispersée dans

    • Granular Email Forwarding Controls in Zoho Mail (Admin Console and Zoho One)

      Hello Zoho Mail Team, How are you? At present, the Zoho Mail Admin Console allows administrators to configure email forwarding for an entire mailbox, forwarding all incoming emails to another address. This is helpful for delegation or backup purposes,

    • Kaizen #190 - Queries in Custom Related Lists

      Hello everyone! Welcome back to another week of Kaizen! This week, we will discuss yet another interesting enhancement to Queries. As you all know, Queries allow you to dynamically retrieve data from CRM as well as third-party services directly within

    • Need the ability to have read only fields on a form.

      There needs to be functionality in Creator that allows a field on a form to be read only. Most screen building software applications have this capability. I know you can hide certain fields from specific users and that you can also make the whole form read only but that's not the functionality I need. I want to be able to create a form where certain fields are editable and other are for display purposes only (read only). For example if the form was displaying information on an item that the user

    • Reverse payment on accidentally closed invoice.

      An invoice was closed accidentally with the full payment added. However, only partial payment was paid. How can I reopen the invoice and reverse this to update it to show partial payment?

    • New integration: Track booking page appointments in Google Analytics 4

      Hello all, Greetings from the Zoho Bookings team! We’re excited to introduce our new Google Analytics 4 (GA4) integration designed to help you track booking activity, understand customer behavior, and measure marketing performance, all in one place. What

    • How to list emails in a folder, e.g. Inbox, on multiple pages when using Zoho mail webpage?

      Something as shown in the figure. There are totally 50 emails in Sent folder. If "Mail per page" equals 20, then the Sent folder is split into 3 pages. When I wander through Sent folder, I can just select a specific page to jump to. BTW, it seems that

    • Zoho Calendar soft bounce on @hotmail.com and @yahoo.com email addresses

      Hello, our Zoho calendar recently does not send the calendar invites to emails with hotmail and yahoo domains and comes back with a "soft bounce". other domains like Gmail works fine. Also sending "email" to the same emails to the above domains work well

    • ERROR CODE :512 - 5.4.4 DNS error:NXDOMAIN.

      Suddenly we cant send mail, we are getting this error for all outbound mail to multiple domains.

    • Unveiling Cadences: Redefining CRM interactions with automated sequential follow-ups

      Last modified on 01/04/2024: Cadences is now available for all Zoho CRM users in all data centres (DCs). Note that it was previously an early access feature, available only upon request, and was also known as Cadences Studio. As of April 1, 2024, it's

    • customer data security

      We are exploring ways to enhance our within Zoho CRM. Our Goal: We want to fully integrate RingCentral with Zoho CRM to enable click-to-call functionality for our sales team. However, to comply with data privacy regulations and protect customer contact

    • Sync CRM inventory data with Zoho Books

      I just switched everything over to ZoHo books, but I am trying to find out why the CRM Estimates, Invoices, and Sales Orders created in ZoHo CRM are not then duplicated in ZoHo Books? I had Quickbooks before, and had to do everything twice, I thought

    • mask Customer phone number and agents cant see customer phone number

      Is there any way we can integrate Zoom Phone with Zoho CRM while ensuring that customer phone numbers remain masked? We need a solution where agents can make outbound calls but cannot see customer phone numbers. Please let us know if there is any solution

    • Email Reminders on Shared Calendars

      How do we turn off the setting that emails reminders to everyone who has accepted or declined a calendar invite? If 8 of us have been invited to the same meeting, we receive 8 notifications for every step of the process, from invitation to decision.

    • How to refresh a ticket view ?

      I am doing a widget where I send a rest api call to make a new draft to the ticket I am viewing. The issue is sometimes it refresh a ticket view and I can see inserted draft right away, but sometimes I do not see it even if it is inserted correctly and

    • Ugh! - Text Box (Single Line) Not Enough - Text Box (Multi-line) Unavailable in PDF!

      I provide services, I do not sell items. In each estimate I send I provide a customized job description. A two or three sentence summary of the job to be performed. I need to be able to include this job description on each estimate I send as it's a critical

    • Supervisor Rules - Zoho Desk

      Hi, I have set up a Supervisor Rule in Zoho Desk to send an email alert when a ticket has been on hold for 48 hours. Is there a way to change it so that the alert only sends once and not on an hourly basis? Thank you Laura

    • ResponseCode 421, 4.7.0 [TSS04] Messages from 136.143.188.51 temporarily deferred due to user complaints

      Had email bounce. Let me know if you can fix this. Thanks. Michael

    • New Zoho triggers Google Dangerous flag due toabnormal charcters

      Just signed up and doing my first email test. I sent it to my google email account but it got flagged as Dangerous" due abnormal characters. My DNS setup looks ok. Page snips attached Help Please Thanks, Rick DC PowerWorld

    • Is there a API to fetch tasks in a Board/Section

      I am writing a scheduled function that retrieves all the tasks and send an reminder on cliq. I cannot seem to find a API to fetch tasks (by user / board / section) What are the way to fetch tasks?

    • Having trouble fetching contents of Zoho Connect Feeds using the API, requesting alternative API documentation.

      I'm trying to retrieve feed/post data from Zoho Connect using the API but facing challenges with the current documentation. What I've tried: OAuth authentication is working correctly (getting 200 OK responses) Tested multiple endpoints: /pulse/nativeapi/v2/feeds,

    • Adding an Account Name to Tasks/Reminders

      Does anyone know how to add the related account name to a task?  When we look at the list of activities and when the reminders pop up, there is no way of quickly seeing who the account is. 

    • Triggering Zoho Flow on Workdrive File Label

      Right now Im trying to have a zoho flow trigger on the labeling/classification of a file in a folder. Looking at the trigger options they arent great for something like this. File event occurred is probably the most applicable, but the events it has arent

    • SendMail to multiple recipients

      Hi, I'm trying to send an email to a list of recipients.  Right now the "to" field is directed to a string variable. (List variables won't work here). In the string variable, how can I make it work? trying "user@app.com;user2@app.com" or "user@app.com; user2@app.com" just failed to send the emails. Ravid

    • Populate drop down field from another form's subform

      Hello, I found how to do that, but not in case of a subform. I have a Product form that has a subform for unit and prices. A product might have more than one unit. For example, the product "Brocoli" can be sold in unit at 3$ or in box of 10 at 25 $. Both

    • Usar o Inventory ou módulo customizado no CRM para Gestão de Estoque ?

      Minha maior dor hoje em usar o zoho é a gestão do meu estoque. Sou uma empresa de varejo e essa gestão é fundamental pra mim. Obviamente preciso que esse estoque seja visível no CRM, Inicialmente fiz através de módulos personalizados no próprio Zoho CRM,

    • Signup forms behaviour : Same email & multiple submissions

      My use case is that I have a signup form (FormA) that I use in several places on my website, with a hidden field so I can see where the contact has been made from. I also have a couple of other signup forms (FormB and FormC) that slight differences. All

    • getting error in project users api

      Hello, I'm getting a "Given URL is wrong" error when trying to use the Zoho Projects V3 API endpoint for adding users to a project. The URL I'm using is https://projectsapi.zoho.com/api/v3/portal/{portalid}/projects/{projectid}/projectusers/ and it's

    • Next Page