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

      • Unify Overlapping Functionalities Across Zoho Products

        Hi Zoho One Team, We would like to raise a concern about the current overlap of core functionalities across various Zoho applications. While Zoho offers a rich suite of tools, many applications include similar or identical features—such as shift management,

      • Zoho Desk Domain mapping / Cloudflare CNAME not recognized

        Hello, my website is behind Cloudflare and SSL. From the Cloudflare control panel I added a CNAME record such as support.mydomain.com pointing to desk.cs.zohohost.com but I'm stuck with the message "Make sure you've mapped the CNAME entry..."

      • Create an Eye-Catching Announcement Widget for Your Help Center

        Hello Everyone! In this week’s edition, let’s explore how to keep your customers updated with exciting news in the Help Center. See how ZylkerMobile wowed their customers by bringing updates right to their portal. ZylkerMobile, the renowned brand for

      • I want to add my other zoho account in same pc

        why does zoho restrict me doing many things as i also want to add my second mail account bit its not allowing me to do that

      • Search in Zoho Community Not Working

        I realize this is a bit of a meta topic, but the search for the various Zoho Communities appears to not be working. I'm under the impression that they run on some version of the Zoho Desk platform, so I'm posting this here.

      • Capture Stripe’s Customer ID

        Does anyone know of a way to capture Stripe’s customer ID that is created when the form/payment is processed? I would like to have the customer ID stored in our CRM so we could utilize in some custom functions down the road.

      • Custom Modules - Where are Comments??

        In the standard ticket module and in the tasks module, we have an interactive comment box that we can post important details/notes and can tag others if needed. Where is this functionality for Custom Modules? Ideally, custom modules would have very similar,

      • Zoho Mail will not set up in Thunderbird

        I am using Thunderbird 13.0.1 in Linux Mint 13 64-bit.  I cannot set up my Zoho IMAP email in this client.  This is evidently a common problem as evidenced by these postings in the Thunderbird forum: thunderbird can't seem to "find the settings" I cannot configure it for my zoho.com email account I can not get ZOHO to configure. Any suggestions? The best T-bird seems to be able to do is to refer these users to the Zoho forum. I believe the instructions in the Zoho help wiki are correct, although

      • Zoho ShowTime: Certificates of Completion - Award your learners with a sense of achievement

        In our increasingly competitive market, professional trainers need to differentiate themselves if they are to survive. One way to do this is to focus on innovation and deliver an ideal learning experience. By developing a renowned certificate program that provides learners with a specialized skill set for a particular industry, both trainees and future prospects will recognize the trainer's leadership in that field. This can help with long-term growth, revenue generation, and even marketing and branding.

      • IMAP Migration from Gmail

        I have been trying to import my email from a Gmail server and keep receiving the following error. I have reduced the security, activated imap and no improvement. The link to the Google support item has not helped. Unable to connect to your account. Please

      • Your Incoming has been blocked and the emails will not be fetched in your Zoho account and POP Accounts Click here to get unblocked.

        When entering my account, this error is thrown at me, and I deleted a good part of my deleted messages, but I still can not unblock it, I would appreciate your help. reservas@lineasperutravel.com

      • Request for Creating Multiple Email Accounts on One Mobile Number

        Dear Zoho Team, I am planning to shift all my work-related communication to Zoho Mail because of its reliability and features. For my work, I need to create 3–4 separate email accounts for different purposes. Could you please confirm if it is possible

      • Signature issue

        Problem: The signature does not appear when replying or forwarding an email. solve issue: settintgs/Signature Check option place a signature above the content with quotation marks

      • mail admin not loading

        i am trying to login to mailadmin ... gears keeps rotating forever... its not a password issue whats so ever ... not cookies issues whatsoever from android app i can login but there so few things to do from there .. i changed ip address the same... i

      • Unify All Zoho Video Meeting Experiences into One Standardized Platform

        Hi Zoho Team, We would like to share an important user experience concern regarding the current state of video meeting functionality across the Zoho ecosystem. The Problem Within Zoho, there are multiple ways to initiate or schedule a video meeting: Zoho

      • Changing Account in Quote form does not update address information.

        I am trying to update the address information in a quote I've created. I corrected the address in the "Account" but that did not change in the quote. If I re-enter the Account Name in the Quote form, nothing updates. How do I fix this?

      • Zoho One Backup of entire account

        Hello, When using Zoho one is there a way to backup your entire account of all apps that you are using \ activively using in a single step or do you have to backup each applications data individually? Thanks,

      • Issue with “CC” and “Subject Details” of the initial mail when reply / replied all / forward using Zoho Mail Client (Desktop / Web Mail / Mobile App)

        It is observed that when I reply / reply all / forward a mail using Zoho Mail Client (Desktop / Web Mail / Mobile App), the “CC” and “Subject Details” are omitted from the mail which was replied/forwarded. However this is not the case with outlook mail

      • Unable to send Emails - 452 4.3.1 Temporary System Error

        Whene ever i request smtp server to send the email (without attachment). i recieve error "452 4.3.1 Temporary System Error"

      • I can't receive email

        I cannot receive any email sent to my Zoho email after the free upgrade plan trial is finished.

      • Help for the alisa adding

        Sorry, I would like to add a paypal alias on my domain email address. However, the system blocked it. How can I do it?

      • Lite plan attachment said 250mb but actually 25mb ?

        Lite plan attachment said 250mb but actually 25mb ? I can't attach over 25mb files, and can't receive mails has attached files over 25mb too

      • Any update on much requested feature, to delete attachments without deleting the e-mail body?

        People have been requesting the ability to delete e-mail attachments without deleting the e-mail for more than ten years now. The latest I see is marked "Working On It" and a year ago it was supposedly being added, see here: https://help.zoho.com/portal/en/community/topic/is-there-a-way-to-delete-mail-attachments-without-deleting-the-text

      • Old vs New Value for Deleted Lookup Values

        Suppose the following scenario, where a value in a lookup is deleted: 1. User has countries form 2. Form A has a lookup to countries form 3. User selects Italy in Form A and saves it with the Italy ID 4. Form A report shows Italy 5. Italy is inadvertently

      • Zoho email using a python or html template

        # main.py import smtplib import csv from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart from config import SENDER_EMAIL, APP_PASSWORD, SMTP_SERVER, SMTP_PORT # email Subject email_subject = "🎉 Python + Zoho Mail HTML Email

      • 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

      • Solution: How to send email using a python follow up this

        # Step One Setup Your App Password For this url {https://accounts.zoho.in/home#security/app_password} #How to genarate App password {https://help.zoho.com/portal/en/kb/bigin/channels/email/articles/generate-an-app-specific-password#To_generate_app_specific_password_for_Zoho_Mail}

      • Are Environments Worth It?

        In concept, Environments in ZC is a great idea. I think the flow is pretty smart when you compare it to GitHub, especially for a low code audience. However, in practice, I've found it to be unpredictable, and I've only used it a few times. Aside from

      • Enhanced duplicate check for Leads in CRM

        Hello Everyone, We are excited to announce that you can now check for duplicate entries in leads by comparing them with similar records in the Contacts Module. Previously, when you added a lead, only the converted leads were checked for duplicates. This

      • Pause(1);

        I'm using scheduler to invoke an interaction via http post with an external service. The schedule code uses a for-each loop that runs so fast my external application's log files get messed-up (they are named by date-time stamp). What I'm suggesting is

      • Integration Request: Elementor

        Integrating Zoho CRM forms with Elementor, the most popular page builder on Wordpress, would be great. I use it for our site, goenergylink.com, and I have had to use Zapier webhooks to be able to connect it with Elementor. The one issue I have run into

      • Ability to Change Visibility of Published YouTube Videos

        Hi Zoho Social Team, How are you? We would like to request an enhancement in Zoho Social regarding the management of already published youtube videos. Currently, after publishing a youtube video through Zoho Social, there is no option to change its visibility

      • Adding anchor links in Zoho CRM email templates

        I know you can add anchor link in Campaigns, but I dont see the option to that in the CRM email template. Am I missing something?

      • openUrl in blueprints

        My customer wants to open a URL at the end of a blueprint transition. Seems this isn't possible right now but it would be very useful. In this thread, https://help.zoho.com/portal/en/community/topic/openurl-not-working the Zoho agent said that it's logically

      • Ability to Add YouTube Video to Playlist During Publishing

        Hi Zoho Social Team, How are you? While publishing YouTube videos through Zoho Social, we noticed that the platform currently does not allow selecting a playlist at the time of publishing. Instead, we can only add the video to a playlist after it has

      • Introducing Zoho Creator's 2025 Release Projection 2

        Hello Creators! I'm Prakash, from the Creator product management team, and today I'm delighted to unveil our next set of features as part of Release Projection 2 for 2025. With thoughtful analysis and planning, we've curated powerful new capabilities

      • Sharing Form Ownership Among Multiple Users

        I would really like the ability to share form ownership among multiple users. It's frustrating to me that if a co-worker wants to make an edit to a form, I have to transfer ownership to them. It would be great if forms could act like google forms, where multiple people can edit a form and view responses. 

      • Marketer’s Space - Ace Your Spooky-Season Marketing with Pre-designed Templates in Zoho Campaigns

        Hello marketers, Welcome back to another post in Marketer’s Space! We’re in Q4, which means that you have endless opportunities to connect with your audience, starting with Halloween campaigns! In this post, we’ll show you how to design the perfect Halloween

      • Zia expands to China with native features and DeepSeek-powered generative AI features

        Hello everyone, We are glad to support Zia native features and Zia generative AI features for our customers in China. From hereon, all AI-features in Desk will be accessible in China data center with the integration of DeepSeek generative AI model. DeepSeek

      • Email in each module

        We have a contact ,module which then has a link to customer assets which in turn the asset has a multiple link to service visits. When we link assets to customers we choose by name and it brings over the associate email via the lookup. Great feature.

      • Next Page