Flyouts in Client Script

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. });

  8. ZDK.Client.getFlyout('EMIlyout').open(
  9.     { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
  10.     { data: loanDetails }
  11. );

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.


    Access your files securely from anywhere







                        Zoho Developer Community





                                              Use cases

                                              Make the most of Zoho Desk with the use cases.

                                               
                                                

                                              eBooks

                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                               
                                                

                                              Videos

                                              Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                               
                                                

                                              Webinar

                                              Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                               
                                                
                                              • Desk Community Learning Series


                                              • Meetups


                                              • Ask the Experts


                                              • Kbase


                                              • Resources


                                              • Glossary


                                              • Desk Marketplace


                                              • MVP Corner




                                                        Manage your brands on social media



                                                              Zoho TeamInbox Resources



                                                                  Zoho CRM Plus Resources

                                                                    Zoho Books Resources


                                                                      Zoho Subscriptions Resources

                                                                        Zoho Projects Resources


                                                                          Zoho Sprints Resources


                                                                            Qntrl Resources


                                                                              Zoho Creator Resources



                                                                                  Zoho CRM Resources

                                                                                  • CRM Community Learning Series

                                                                                    CRM Community Learning Series


                                                                                  • Kaizen

                                                                                    Kaizen

                                                                                  • Functions

                                                                                    Functions

                                                                                  • Meetups

                                                                                    Meetups

                                                                                  • Kbase

                                                                                    Kbase

                                                                                  • Resources

                                                                                    Resources

                                                                                  • Digest

                                                                                    Digest

                                                                                  • CRM Marketplace

                                                                                    CRM Marketplace

                                                                                  • MVP Corner

                                                                                    MVP Corner







                                                                                      Design. Discuss. Deliver.

                                                                                      Create visually engaging stories with Zoho Show.

                                                                                      Get Started Now


                                                                                        Zoho Show Resources


                                                                                          Zoho Writer Writer

                                                                                          Get Started. Write Away!

                                                                                          Writer is a powerful online word processor, designed for collaborative work.

                                                                                            Zoho CRM コンテンツ






                                                                                              Nederlandse Hulpbronnen


                                                                                                  ご検討中の方




                                                                                                        • Recent Topics

                                                                                                        • Cannot associate event with other objects when creating?

                                                                                                          I am attempting to associate an Event with one or more other objects when creating it via the API. According to the API docs, the "Related_To" property is a jsonobject even though the description says "Provide the details about the entities the event
                                                                                                        • Missing Payload Details

                                                                                                          Hi All, Does anyone know how to fix missing webhook payload data in the next step of the flow? Payload comes into the webhook -- All details here When i go to use the webhook data in the next step -- the majority of the payload data is missing
                                                                                                        • Zoho Projects API 100 requests/2 min. Limit

                                                                                                          Hi Requesting clarification on the API documentation. "You can invoke or call an API for 100 times in a span of two minutes. If you invoke more than 100 times, the particular API request will be locked for the next 30 minutes. " Does this limit apply
                                                                                                        • Customer address in Zoho Bookings

                                                                                                          Hello,  Is it possible to add customer address information to the Zoho bookings appointment screen? Or have it pull that information automatically from the CRM? We are wanting to use this as a field management software but it is difficult to pull the address from multiple sources when it would be ideal to have a clickable address on the appointment screen that opens up the user's maps.  It would also be advantageous for the "list view" to show appointment times instead of just duration and booking
                                                                                                        • AutoScan Not Working Since April -Support says it with engineering

                                                                                                          Hi there, Autoscan has not been working on my account since April. Without this feature, completing expenses reports is laborious and error-prone. I keep asking for updates seeing as this is a critical feature, but told that it's being looked into and
                                                                                                        • Calendar Connection Enhancement

                                                                                                          Hello everyone, Greetings from the Bookings team. We're here to announce an important Calendar enhancement that will roll out soon. Let's take a look at what's being changed. Improved and more straightforward UI The Calendars UI is undergoing a complete
                                                                                                        • Bookings to CRM - New Events and Contacts

                                                                                                          Hello, I have an issue with appointments taken by clients from a Zoho Bookings page. Previously when an appointment was reserved, if there were no client created in Zoho CRM, it would create it in the CRM through the integration between both platform.
                                                                                                        • Generating Discount Coupons for Zoho Bookings

                                                                                                          Hi, Is there provision to generate Discount Coupons for appointment bookings? I could not see that in the settings and this is very much needed. Please suggest us. Thanks
                                                                                                        • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

                                                                                                          Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals
                                                                                                        • When will Sales Order and Invoice Synchronisation with Zoho CRM be Available?

                                                                                                          When will Sales Orders and Invoices, created in Zoho Books or Inventory be made available in Zoho CRM? John Legg Owner: The Debug Store
                                                                                                        • In the Blue Print Transition requirement received it will show 8 check field in pop up if they any one of this field then only move to next stage Ist quote

                                                                                                          In the Blue Print Transition requirement received it will show 8 check field in pop up if they any one of this field then only move to next stage Ist quote Pls help how i fix this
                                                                                                        • Multiple Products on Ticket

                                                                                                          Good morning. We will classify all tickets based on the product. Users sometimes send different requests on the same ticket, so we are facing some challenges. Is there a way to add more than one product to the ticket, or is there a way to tie the product
                                                                                                        • Desk - CRM Integration: SPAM Contacts (Auto Delete)

                                                                                                          SPAM contacts is a useful feature, but when the CRM sync is used, it is very frustrating. When a contact is marked as SPAM on Desk, I wish to do the same on CRM. When a SPAM contact is deleted, I would like it deleted from CRM. The feature looks half-baked.
                                                                                                        • Date Import Problems

                                                                                                          I'm trying to import products from csv/xls files, but I can't get the Sales Start Date field to import. I know the import is working because all the other information is imported, but the Sales Start Date field is left empty. I think it must be a format problem. The date format I am trying to import is DD/MM/YYYY. This is also how my date preferences are set up in Zoho CRM. Do I need to use a different format to import the date field?
                                                                                                        • Surely it's time Inline editing from views

                                                                                                          I think the first request I found for in-line editing from grids was approximately 12 years ago - that post was locked because it was suggested Zoho sheetview solved the problem. However, it's now 2024, and in-line editing from grids is just a basic expectation.
                                                                                                        • How to work with getFieldNames formdata functions ,Any Examples

                                                                                                          I don't find any example showing usage of getFieldNames. Where do i find .is there any Help documents available
                                                                                                        • Allowing subqueries in FROM clause

                                                                                                          When building a Query table in Zoho Reports, I encountered an error when attempting to put a subquery in the "FROM" clause of my statement.  Why isn't this currently supported?  Is there a plan to implement this functionality in the future?
                                                                                                        • New features and improvements in Desk's integration with Zia powered by GPT 

                                                                                                          Hi everyone, We’re pleased to announce several new enhancements in Zia Powered by GPT integration. These updates bring more customization options, improved response generation, and additional language support. Below is an overview of the enhancements
                                                                                                        • Is Zoho Shifts included in the Zoho One plan?

                                                                                                          In case the answer is no: there's any plan to make it available via One? Thank you
                                                                                                        • Feature Request: API Access for Managing Deluge Functions (with OAuth & Change Tracking)

                                                                                                          Hi everyone, I wanted to share a thoughtful request that came in from one of our Zoho clients this week. I believe many of us as partners and developers might relate to it. “One quick item to flag: we’d love an official way to manage Deluge functions
                                                                                                        • No more IMAP/POP/SMTP on free plans even on referrals with NO NOTICE

                                                                                                          Outraged. Just referred a colleague to use her domain (not posting it publicly here) to Zoho, just as I have other colleagues, clients, friends. Expected the exact same free plan features as I have and as everyone else I ever referred got. I was helping
                                                                                                        • Mac Thunderbird zoho e mail account issues

                                                                                                          I have issues with a user account on thunderbird e mail client who suddenly does not receive emails, when you click get messages we get an error "sending of password for user ......did not succeed, mail poppro.zoho.com responded service unavailable" after
                                                                                                        • PASSWORD

                                                                                                          Hello, I'm Joyce, my client used zoho for password sharing, he did share the canva but once I clicked on it it will not automatically log-in, instead I need to log-in again. My question is my boss log-in first to his gmail and use his gmail to log-in
                                                                                                        • Products in time entry

                                                                                                          Morning, Is there a way to add the product field to the time entry layout? Giving us the ability to identify a product per time entry. Thanks Rudy
                                                                                                        • Kaizen #195: Frequently Asked Questions on Bulk Read API and Bulk Write API

                                                                                                          We are thrilled to be nearing the 200th post in our Kaizen series. As we approach this exciting milestone, we would love to hear from you. Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your input helps us
                                                                                                        • admin problem

                                                                                                          i can't to reach for the panel that i will create another mail to our company account i have admin access but i can't reach the panel our Company name Scale point my mail asmaa@dcalepointhub.com please can you help me Thanks
                                                                                                        • 554 5.7.1 : Recipient address rejected: user [username] does not exist

                                                                                                          Hi, I mistakenly altered my shopify email settings (where my domain is managed), but immediately reverted them, however now I have a strange email issue. I can send emails just fine, but cannot receive them. I have tried all troubleshooting steps but
                                                                                                        • Problema para enviar y recibir correos

                                                                                                          Buenos días, mi cuenta de correo secretaria@construccmauro.com presenta problemas y no me permite ni me envía ni recibe correos, me sale este error.No fue posible enviar el mensaje; Motivo: 554 5.1.8 Correo electrónico bloqueado saliente.  Aprende más., Agradezco
                                                                                                        • Agent working hours

                                                                                                          Hi, I know it is possible to set company business hours but is it possible so that agents can have different ones? I.e. some agents cover later hours on specific weeks - can these be set so those agents that are "working" get notified about tickets etc. 
                                                                                                        • Legit email address?

                                                                                                          Hello, I received emails from zohoadmin@biznetvigator.com with a password expiry notice. is that a legitimate email?
                                                                                                        • SMTP Authentication Fails with App Password – “535 Authentication Failed” Error

                                                                                                          Hello, I'm trying to send transactional emails from my WordPress website using the WP Mail SMTP plugin with Zoho Mail (smtp.zoho.com on port 465 with SSL). I've created and used a Zoho Mail app-specific password for SMTP, and verified that: The email
                                                                                                        • Deluge script issue : Mismatch of data type expression. Expected BIGINT but found STRING

                                                                                                          I'm building a Zoho Creator form to take inputs for Email, Bootcamp Name, and Tag. If a record with the same Email + Bootcamp exists in a custom module (bootcampattendence), I want to update it by adding a new tag. If it doesn’t exist, I want to create
                                                                                                        • how to integrate zoho bigin to wordpress website ?

                                                                                                          hello , i want to integrate zoho bigin to wordpress webiste , can anyone help me with the tutorial ?
                                                                                                        • Survey end date extension

                                                                                                          Hi, Is there any way to extend the end date of my survey? I needed more time in finding respondents that is why I need to extend the end date of my survey. Help. Thanks
                                                                                                        • Problem with signature in a forwarded mail

                                                                                                          Dear All, In my email account I created a signature and I unchecked the 'Place signature above the quoted text for relies and forwards' My question is, when I am trying to forward an email, sometimes I need to insert my signature so I select it from the
                                                                                                        • Out of Office not working

                                                                                                          I have set up out of office on zoho mail, however, it does not reply to every mail sent to it. I have tested it by sending several test messages from multiple different email accounts, I will get a response to some of them, but not all of them this is
                                                                                                        • Error message that says only images and no text

                                                                                                          I filled out a template for a weekly newsletter with text and images throughout but when I click save and next an error message comes up that says "Campaign content has only images and no text" which is not true at all. I have no idea how to fix this issue and don't know where the problem is. 
                                                                                                        • Link project invoices to sales orders

                                                                                                          As a business owner and project manager I create estimates with my clients which then become sales orders. When billing for project work I want to invoice against the agreed sales order. I see that I can create invoices and link them to sales orders in
                                                                                                        • Contacts Don't Always Populate

                                                                                                          I've noticed that some contacts can easily be added to an email when I type their name. Other times, a contact doesn't appear even though I KNOW it is in my contact list. It is possible the ones I loaded from a spreadsheet are not an issue and the ones
                                                                                                        • Cannot add zoho email to gmail acc

                                                                                                          I'm trying to set up my zoho mail to connect to my gmail acc but no matter what I try I always get this problem. What should I do now? Password is up-to-date. Authentication failed. Please check your username/password. [Server response: 535 Authentication
                                                                                                        • Next Page