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 Script3. Use Case4. Solution4.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 Script6. Summary7. 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
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- <link rel="stylesheet" href="style.css" />
- </head>
- <body>
- <div class="loan-calculator">
- <div class="top">
- <h2>EMI Calculator</h2>
- <form action="#">
- <div class="group">
- <div class="title">Amount</div>
- <input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
- <div class="slider-label">$<span id="loanAmountValue"></span></div>
- </div>
- <div class="group">
- <div class="title">Interest Rate</div>
- <input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
- <div class="slider-label"><span id="interesRateValue"></span></div>
- </div>
- <div class="group">
- <div class="title">Tenure (in months)</div>
- <input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
- <div class="slider-label"><span id="tenureMonthValue"></span></div>
- </div>
- </form>
- </div>
- <div class="result">
- <div class="left">
- <div class="loan-emi">
- <h3>Loan EMI</h3>
- <div class="value">123</div>
- </div>
- <div class="total-interest">
- <h3>Total Interest Payable</h3>
- <div class="value">1234</div>
- </div>
- <div class="total-amount">
- <h3>Total Amount</h3>
- <div class="value">12345</div>
- <div class="right">
- <canvas id="myChart" width="400" height="400"></canvas>
- </div>
- </div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
- <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
- <script src="main.js"></script>
- </body>
- </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.
- ZDK.Client.createFlyout('EMIFlyout', {
- header: 'EMI Calculator',
- animation_type: 1,
- height: '400px',
- width: '450px',
- close_on_exit: false
- });
- ZDK.Client.getFlyout('EMIlyout').open(
- { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
- { data: loanDetails }
- );
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.
7. Related Links
Previous Post: Kaizen #156 -Enhancing Mass Communication in Zoho CRM with a Custom Button Widget | Kaizen Collection: HomeAccess your files securely from anywhere
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Maadhari M
Jeremy Nagel - www.smooth.tel
Sticky Posts
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho DataPrep 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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Zoho Workdrive file versions
Hello. I have Workdrive setup to sync files offline to an external hard drive. The off line sync folder currently shows at 1.42 TB. I have a 5 TB storage limit in Workdrive. The cloud version of Workdrive says that I have used all 5 TB! I have 27, 285Visual Sync Status Indicator
I think I've see in documentation that WorkDrive had the industry standard of indicating a sync status for individual files and folders. I'm just starting with WD and synced my first test folder, but there was no way to tell what's happening by just lookingIntegration with Zoho CRM?
Will it be possible to integrate WorkDrive with CRM similar do Zoho Docs?How to control the # of version of files to keep?
Currently most of the WorkDrive Storage comprise of the many versions of files saved. How do I save some space and reduce the number of version of date or files saved in WorkDrive? ThanksShould I Use Zoho Mail Calendar, or Zoho CRM Calendar, or Zoho Calendar?
After a couple of dozens Zoho solopreneur products that I transitioned to after becoming a Zoho One enthusiast 5 years ago, I am finally preparing to conquer the remaining two bastions: Mail and WorkDrive (using Google Workspace at the moment). A NYCAdd comments to a form
Hello, I'm trying to add comments to a form using a subform with one field named comment, but I don't want prior comments to be editable or deleteable by anyone (except the admin). Is there a way to only display prior comments (with a datetime, user and comment field preferably) but still be able to add new ones when editing the main form? I'm not tied to subforms if there is an easier was to do this?Zoho Books | Product updates | March 2025
Hello users, We have rolled out new updates in Zoho Books to enhance your accounting experience. These include the ability to create workflow rules for manual journals and Multi-Factor Authentication (MFA) for customer and vendor portals. Explore theseTrying to export a report to Excel via a deluge script
I have this code from other posts but it gives me an error of improper statement, due to missing ; at end of line or incomplete expression. Tried lots of variations to no avail. openUrl(https://creatorapp.zoho.com/<username>/<app name>/XLSX/#Report:<reportname>,"sameWork Drive Tray Icon Missing
How can I get the tray icon back? The app froze, had to restart PC and then it's been gone since... I've re-installed the windows program and restarted my machine twice now.cant receive emails
I have checked the Dns and everything seems to be fine pls check the print screens attached below help me cause i need to solve this fastRetainer invoice in Zoho Finance modlue
Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.iOS Widget Not Working
It appears that the iOS widget is not working, displaying a blank white screen instead of a selected note. I’m using app version 6.5.12 and iOS 18.3.1.Two Problems With Data Imported to Notes
Occasionally I want to create a note by copying and pasting a few paragraphs from an article on line. When I create a new note and paste in the section the newly created note winds up with each paragraph in white text on a dark background rather thanWorkdrive on Android - Gallery Photo Backups
Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. EmmaGenerate a link for Zoho Sign we can copy and use in a separate email
Please consider adding functionality that would all a user to copy a reminder link so that we can include it in a personalized email instead of sending a Zoho reminder. Or, allow us to customize the reminder email. Use Case: We have clients we need toHow to associate a document sent in Zoho Sign with an deal in the CRM?
Hi, often documents are loaded in Zoho sign and sent for signature. These sometimes are linked to a deal in the Zoho CRM and would be nice to see the status of the document within the CRM. I am aware of the integration, but that assumes that the documentPreventing auto-redirect to Parent Record on Save...
Our users often create records from the related list on th left side of the screen. They click the blue "plus" button to create the record. This is handy, but for some modules, or situations, they would like to remain on the record AFTER clicking "Save",CRM Portal Help
Hello, I am trying to set up a portal to connect with our referring doctors to keep patient cases organized. I set up the accounts module as office, the contacts as doctors, the leads as patients, and the deals as treatments. Everything seems to workZoho Books (UK) needs to be able to submit a CT600 CTSA return
As well as a VAT Return, most (if not all) small businesses have to submit a CT600 Corporation Tax Self-Assessment. There are many providers who do this (like Xero) bujt not Zoho. Can you add this to the request list please? Many thanks SteveNo image image comes out in the recipient when I sent an email
Hello to the entire forum, when I send an email from Zoho, my profile picture does not come out. On the other hand, if you do, using Gmail accounts. How is it configured to leave ??? Thank you Greetings !!Zoho Desk & Tasks
Hi, I'd like to be able to create a set of tasks each time a customer request comes in, as I understand it, currently each would need to be create manually. Project is too much of an overhead for what we want to use. Effectively in various use cases wezet pack not working
We are using the zet pack command to package our Zoho extension. However, after running the command, the extension gets packed, but the resulting package is empty. We've attached a screenshot for reference. Could you please assist us with resolving thisWhile retrieving the Balance Sheet Report, there is always this "COST OF GOODS SOLD", This is not editable.
Hi Zoho & Readers, While retrieving the Balance Sheet Report, there is always this "COST OF GOODS SOLD", which is reduced from the Sales to arrive at the gross profit. The issue I face here is that Service Oriented Companies don't incur any COGS, henceChanging salesorder_number via zoho flow
For some reason updating salesorder_number via zoho flow does not stick. Flow is triggered by new sales order filtered by sales channel update sales order: PO#: CX${trigger.reference_number} Salesorder_number: CX${trigger.reference_number} PO# successfullyWorking with Products that are non-tangible
How does one create a 'service' in products? Is there a way to disable inventory functions for things like Sofware as a service? The services module doesn't look to be much help either. Not sure how to do this in CRMLoop in Blueprint but it works. Why? How should this be set?
see pictureZoho Error: This Operation has been restricted. Please contact support-as@zohocorp.com for further details
Hello There, l tried to verify my domain (florindagoreti.com.br) and its shows this error: This Operation has been restricted. Please contact support-as@zohocorp.com for further details. Screenshot Given Below - please check what went wrong. ThanksBulk Delete Images
How do I bulk Delete Images from Zoho Campaigns. We have been using the Zoho since 2019 and can still only see the option to delete images one by one and we have a lot of old Campaign imagery we don't need anymore. Thanks!Tip #5: Setting access rights at the subfolder level
Hello everyone, We hope you're finding our WorkDrive Tips and Tricks series useful. For today's tip, we'll teach you how to assign higher subfolder permissions to Team Folder members. Team Folders helps you avoid the drawbacks of traditional file sharing.I want to update the photo from the mobile app to the product tab product.
I want to update the photo from the mobile app to the product tab product. Because I want to use the CRM product tab for inventory management Contact registration can save photos from the mobile app. Attached screenshot.Setting default From address when replying to request
At the moment, if I want to reply to a request, the From field has three options, company@zohosupport.com, support@company.zohosupport.com, and support@company.com. The first two are really internal address that should never be seen by the customer andEnable Image and Hyperlink Sync in Zoho Desk - Jira Integration
Hi, We are using the Zoho Desk - Jira integration, which allows comments to sync automatically between a Zoho Desk ticket and its linked Jira issue. However, we have noticed a limitation: When adding a hyperlink or image in a Zoho Desk comment, it isDeluge Function to Update Custom Field
I'm trying to get a Deluge function (which will run as part of a Schedule in Desk) that retrieves all tickets with the status "Recurring" and updates the custom field checkbox "cf_recurring" to "true". Here's what I have, which doesn't work: searchValueImplement Date-Time-Based Triggers in Zoho Desk
Dear Zoho Desk Support Team, We are writing to request a new feature that would allow for the creation of workflows triggered by specific date-time conditions. Currently, Zoho Desk does not provide native support for date-time-based triggers, limitingHow many ZOHO-Sites does the ZOHO-One Suite allow for?
The free version of ZOHO-Sites allows for two sites, but it seems that the professional version (which is included in the ZOHO-One Suite) only allows for two websites. Is that correct? How many sites can I have within one ZOHO-One account?Zoho desk Spam Folder
Dear Zoho Support Team, We are experiencing an issue with Zoho Desk, where all emails sent to our customers are being marked as spam. As a result, they are not receiving notifications for new ticket replies. Please assist us in resolving this issue.Is Zoho Tables part of Zoho One
Cant seem to add the app as part of my Zoho One Subscription?Canva Integration
Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,Possible to filter out contacts that hasn't opened emails in Cadence?
We use Cadences in various outreach - is it possible in analytics or reports to filter out the contacts that have not opened their emails?On Duty Requests using API
Currently we can only do attendance entries using API, we need to make on Duty Requests using API Use Case We are using different on premise devices to track meetings, we want to sync this data with Zoho People Currently we are manually making on dutyNext Page