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.



      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          • 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

          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

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

                              Zoho CRM コンテンツ



                                ご検討中の方

                                  • Recent Topics

                                  • Account name not populating when importing contacts

                                    When importing a csv file to add contacts the account name is blank? Every other filed gets mapped and imported correctly, i.e contact name, phone number. However not the account name which I have mapped to "company" field in my csv file

                                  • Suggestion to improve zoho writer

                                    I am using your product, I believe it is very useful, however, i was writing a note and I needed to draw an arrow in different angles to explain a point and I couldn't. it would be helpful, to add draw functions to the zoho writer. thanks

                                  • webhook basic authentication

                                    II want to use a webhook to send out a SMS. Unfortunately Twilio does not use an authToken but basic authentication. I created the webhook as POST and get this url: https://{username}:{password}@api.twilio.com/2010-04-01/Accounts/{account}/Messages?body=<BODY>&to=+155555555&from=+1555555555

                                  • Custom function return type

                                    Hi, How do I create a custom deluge function in Zoho CRM that returns a string? e.g. Setup->Workflow->Custom Functions->Configure->Write own During create or edit of the function I don't see a way to change the default 'void' to anything else. Adding

                                  • Issue with Hour Calculation in Zoho People Attendance Module

                                    I have noticed an issue in the attendance regularization feature of Zoho People. When trying to regularize past dates, the total working hours are not calculated correctly. For example, if I enter a check-in and check-out time for a previous day, the

                                  • Push Notification for New Bookings in Zoho Bookings App

                                    when a someone schedules an appointment through the booking page, is there any option to receive a push notification in the mobile app?

                                  • Automation in Zoho Sprints

                                    Hi. I have a Sprints board with the following statuses: ToDo, InProgress, CodeReview, Testing, Preprod, Live When a ticket is moved from e.g. Testing to Preprod, the following tags should be modified: remove 'tested OK' remove 'ready for Preprod' add

                                  • Export Purchase orders as Excel

                                    Is it possible to export purchase orders as excel rather than PDF? Our suppliers don't want orders made in PDF, they need it to be excel

                                  • Draft & Schedule Emails Directly in Bigin

                                    Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to email in Bigin. We'll go over each one in detail, but here's a quick overview: Previously, you couldn't draft or schedule emails in Bigin, but

                                  • Create CRM Deal from Books Quote and Auto Update Deal Stage

                                    I want to set up an automation where, whenever a Quote is created in Zoho Books, a Deal is automatically created in Zoho CRM with the Quote amount, customer details, and some custom fields from Zoho Books. Additionally, when the Sales Order is converted

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

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

                                  • Zia’s AI Assist now helps you write clearer notes — in seconds

                                    After helping recruiters craft job descriptions, emails, and assessments, Zia’s AI Assist is now stepping in to make note-taking effortless too. Whether you’re recording feedback after an interview or sharing quick updates with your team, you can now

                                  • Shortcut to fill a range of cells

                                    Good evening: I'm writing because I haven't been able to find a feature that allows you to select a range of cells, type in one of them, and then use a key combination to type in all of them. In Excel, the keyboard shortcut is Ctrl+Enter. I haven't found

                                  • Introducing Dark Mode / Light Mode : A New Look For Your CRM

                                    Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience for

                                  • Object required error

                                    Hi, I am getting an 'Object required' error on the line Call HideColumnsOutsideRange(ws, startOfWeek, endOfWeek) when I run the ShowCurrentWeek macro but not when I run the ShowCurrentMonth macro. Any ideas? Regards, GW Option Explicit Sub HideColumnsOutsideRange(ws

                                  • Zoho CRM - Rename "Estimates" in CRM Finance Suite Integration to "Quotes"

                                    I'm not sure if it's been 2 or 3 years now since Zoho Books renamed Estimates to Quotes. I still see "Estimates" in the Zoho CRM integration. Could this be added to Translation settings so that some customisation could be made on an account by account

                                  • Its 2022, can our customers log into CRM on their mobiles? Zoho Response: Maybe Later

                                    I am a long time Zoho CRM user. I have just started using the client portal feature. On the plus side I have found it very fast and very easy (for someone used to the CRM config) to set up a subset of module views that make a potentially extremely useful

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

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

                                  • New Series Announcement - Ecommerce Marketing Tips

                                    Running an online business is more than just having a website. It’s about getting the right customers to discover you, trust you, and keep coming back. To support your growth journey, we’re launching a weekly Marketing Tips series right here on Zoho Commerce

                                  • Marketing Tip #7: Add a blog to your online store

                                    A blog is more than content. It’s a magnet for new customers. Sharing product guides, styling tips, or industry insights through blog posts builds trust and helps you rank higher on search engines. Try this today: Write one blog post answering a common

                                  • Kanban view on Zoho CRM mobile app!

                                    What is Kanban? The name doesn't sound English, right? Yes, Kanban is a Japanese word which means 'Card you can see'. As per the meaning, Kanban in CRM is a type of list view in which the records will be displayed in cards and categorized under the given

                                  • Allow Regular Users to Directly Transfer Ownership of Files & Folders

                                    Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement related to file and folder ownership management in Zoho WorkDrive. At the moment, a regular user cannot directly transfer ownership of their files or folders

                                  • Triggering rules on lead conversion

                                    There is no field on the Rule list for rule conversion to trigger an alert on liead conversion to a potential. I assigned a rule to file on any creation or update of a lead. The lead was changed a lead to a potential but no rule was fired. Rajesh Bhadra

                                  • Customised Funnel

                                    We are running the standard plan for our ZOHO CRM. I have been asked if there is a way to combine data from the Calls module, Deals module and Contact Module into 1 funnel, similar to the view you can get when viewing Deals By Stages, you can see the

                                  • Trigger Zapier on Deluge Insert Into Function?

                                    Hello, To get around the limitation of not being able to trigger a Zapier Zap on Record Update(this would be extremely useful to be able to do btw), I have created a Deluge script to copy the data from Form A to a Trigger Form B using the Insert Into expression from a Custom Action button on a Report from Form A.  This action does not trigger the Zapier Zap whereas manually adding a record or duplicating an existing record does trigger the Zap. Is Insert Into not the same as a manual Add in the context

                                  • Can you inject JS in an HML+CSS+Deluge Page?

                                    I have an HTML + CSS + Deluge page and need just a little vanilla JS functionality. However, it seems like Zoho Creator does not allow that. I'm required to create a JS widget. Is this correct? If so: 1. Won't this quickly consume my API limit if there

                                  • Display Client Name in Zoho Creator Client Portal Dashboard

                                    Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currently

                                  • Zoho unified inbox

                                    The new changes have definitely improved things for switching between accounts.  But zoho still desperately needs a unified inbox.  It sucks to have to enter filters and folders for each and every inbox.  This seems like such a simple thing, i wonder why Zoho hasn't done it?

                                  • Marketer’s Space - Multi-Channel Campaigns for the Biggest Shopping Week with Zoho Marketing Automation

                                    Hello marketers, Welcome back to another post in Marketers Space! The biggest shopping week of the year is almost here, and it’s your moment to shine without the stress. With Black Friday and Cyber Monday just around the corner, being present across email,

                                  • Is there a problem with sharing workdrive files with links since last night?

                                    As per title, we can't access folders/files through share links since last night. I created ticket but we need quick solution and didn't hear back from the support yet. The files are still accessible by the main account but all zoho files that we are

                                  • Enable Screen Recording in Zoho WorkDrive Mobile Apps (Android & iOS)

                                    Hi Zoho WorkDrive Team, How are you? We are enthusiastic Zoho One users and rely heavily on Zoho WorkDrive for internal collaboration and content sharing. The screen-recording feature in the WorkDrive web app (similar to Loom) is extremely useful- however,

                                  • Production Management Tool (MRP / BOM)

                                    Hi Guys, is there any recommended App available that works with zoho and covers the needed applications for a production? What we need is a system that covers the BOM (bill of materials), MRP (material ressources planning), MRP II (manufacturing ressources

                                  • Function #53: Transaction Level Profitability for Invoices

                                    Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.

                                  • Bug in Zoho Cliq Signup Flow – "%s" Placeholder Visible Instead of Product Name

                                    Hi Zoho Team, I would like to report a UI bug in the Zoho Cliq signup/enable flow. During the step where Cliq asks to enable the product for the company, the following text appears: Great! Your company is already available in Zoho, so you just have to

                                  • Zoho Invoice Customer Login Portal

                                    Are there any plans for a customer portal to Zoho Invoice, ala Freshbooks?  I would like customers that I invoice to be able to login to review invoices and invoice history.  I have not switched from Freshbooks for this very reason.

                                  • Exporting tickets

                                    I went to Setup -> Organization -> Import/Export in order to export tickets but found 2 issues: 1. The email body never gets exported. 2. There are some large numbers (like 5.57E+16) under certain columns of the exported CSV file. I could not find any export options. Please can you help with this?

                                  • Editing the Ticket Properties column

                                    This is going to sound like a dumb question, but I cannot figure out how to configure/edit the sections (and their fields) in this column: For example, we have a custom "Resolution" field, which parked itself in the "Ticket Information" section of this

                                  • Copy field information to clipboard

                                    I need to be able to transfer some field information in to the clipboard, so that I can then paste it in to our helpdesk system. Is there a way I could add a button to a detail report that does this?

                                  • Issuing reconciling a bank statement

                                    HELP! I'm trying to reconcile a bank statement. The prior month reconciled perfectly. Beginning balance is correct yet I'm off by the same amount each time. Both myself and my office manager, separately and together, have tried to complete this reconciliation

                                  • Unknown table or alias 'A1'

                                    I would like to create a subquery but i am getting the following error: Unknown table or alias 'A1' used in select query. This is the sql statement:  SELECT A1.active_paying_customers, A1.active_trial_customers, A1.new_paying_signup, date(A1.date_active_customers), 

                                  • Next Page