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
New to Zoho Recruit?
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
Kaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.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! Commands
New to Zoho TeamInbox?
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
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
Office-365-agenda and Microsoft Teams Integration
Dear, I have a trial version of Zoho Recruit and trying to evaluate the Microsoft Teams Integration in Zoho Recruit. After registering with my Office 365 account and checking the result of the registration/sign-in at https://mysignins.microsoft.com/ (whichDelegate Access - Mobile iOS/iPad
We’re over the moon that delegate access is now available in Zoho Mail as we were nearly ready to switch platforms because of it! Is there a timeline on when delegate mailboxes will be accessible from the iOS and iPad OS applications? Thanks, JakeHow to add Connector in developer platform zoho?
Hi, I am working on creating an Extension, and part of the development is to retrieve Email templates. In my CRM instance I can invokeURL by creating Zoho OAuth connection and get the template. But developer platform does not provide Zoho OAuth or anyHow to archive Lost/Junk Leads so sales reps don’t see them, but keep them for reporting?
Hi everyone, In our Zoho CRM we have two Lead Status values: Lost Lead and Junk Lead. What I want to achieve is: When a lead is marked as Lost or Junk, it should disappear from my sales reps’ Lead views (so they only see active leads). At the same time,Zoho CRM Canvas Copy Original Layout
Hello all, I want to use Canvas to make small changes to certain views, not to make huge changes. Is it possible to copy the original Zoho layout and set-up and start from there? I checked and all I can find are some templates which are far from the originalIs there a way to request a password?
We add customers info into the vaults and I wanted to see if we could do some sort of "file request" like how dropbox offers with files. It would be awesome if a customer could go to a link and input a "title, username, password, url" all securely and it then shows up in our team vault or something. Not sure if that is safe, but it's the best I can think of to be semi scalable and obviously better than sending emails. I am open to another idea, just thought this would be a great feature. Thanks,Revenue Management: #5 Revenue Recognition in SaaS
If you're building or running a SaaS business, you've probably encountered this. You get paid upfront for a subscription and a one-time onboarding fee, but you end up with confusion about when to consider it revenue. Can I book all of it now? Should IMS Teams for daily call operations
Hello all, Our most anticipated and crucial update is finally here! Organizations using Microsoft Teams phone system can now integrate it effectively with Zoho CRM for tasks like dialling numbers and logging calls. We are enhancing our MS Teams functionalityZoho Learn Course Access Issue
One of the learners in a specific course can't see any lessons. They are registered as both a user and learner for this course in Zoo Learn. What could be the reason?ZOHOLICS Japan 2025 開催のお知らせ（再投稿）
【コミュニティユーザーの皆さまへお知らせ】 Zoho 最大のユーザーイベント「ZOHOLICS Japan 2025」を9月19日（金）に開催します。 AI活用に関する特別講演、ユーザー事例、Zoho 製品の活用例のご紹介など、Zoholicsならではのセッションをご用意しています。 Zoho コミュニティ開催のMeetupとはまた違った雰囲気のイベントです。 ご都合のつく方はお気軽にご参加ください✨ 詳細はこちら https://events.zoho.jp/zoholics2025#/?affl=forumpost2Phone Number format for Bulk Upload via csv for Zoho Sign
What is the phone number format that we need to use for a bulk recipient upload via csv in zoho sign, should the country code be included for ex if its US should it be +18889007865 ior 18889007865 or without country code 8889007865? the sample csv providedFilter Page Elements By Selectable Date Range
I have created a basic Page that will serve as a client dashboard with elements that will provide simple counts & sums of data in reports. There are no reports or forms added to the page, just elements. It currently functions as needed, but shows theCan’t Enter my Notebook is Locked
I’ve been using Notebook for taking notes at my college for a month and I never signed in and I never established a password. Today I tried to enter the app after the update and it asked me for a password. I need to access to my notes urgently and I can’tSend Email Directly to Channel
Hi, We are coming from Slack. In Slack each channel has a unique Email address that you can send emails too. I currently forward a specific type of email from my Gmail InBox directly do this channel for Verification Codes so my team doesn't have to askSecure your external sharing process with OTP Authentication
For any business, it's crucial to share files externally in a way that is both secure and controlled. Let's say you want to share confidential data with your partners and vendors. You must ensure that only your intended recipients can access the sharedItems attribute questions
Many of my items have attributes, such as size and color. How can I add new fields to the "New Items" screen to capture that in my Purchase Orders, Items, and Sales Order pages? I only see these attribute fields when adding an Item Group. Also, on theIs there a way to search mail for items you haven't yet responded to?
I'm trying to create a search to show emails that haven't been responded to and that have also been assigned a tag or label. Is there a way to search for the inverse of replied?Zobot and Sales IQ
What will happen to the Zoho Sales IQ being integrated to the website after creating the Zobot on the website tooSubtotals per Header
Hey, we would like to display subtotals per header in our invoices:upgrade storage
how to upgrade my storageLinking items from books and subscription
Linking books and subscription It is a pity that it is not possible to associate with a product an article present in ZohoBooks This would make it possible to manage products composed of a nomenclature of articles of booksAdd the ability to view number of hours planned for a workorder while in the Dispatch Console
Hi Zoho, When dispatching a work order through the Dispatch Console, there's currently no way to view the number of planned hours for the service tasks associated with that specific work order. Having to click into the details each time to check plannedUploading Files from uploads api
I tried uploading the image from the API call but its giving me unauthorized error even i have given valid token in header. After uploading i need that id to pass in create ticket api uploads but its not uploading that file. Please help me out in thCategorize Items with Item Headers
Hello customers, Did you ever want to classify items based on specific categories to help your customers understand your invoice better? With the new Item Header feature, you can easily categorize items in your invoices and estimates and give them a common title. Item Headers are available in the Invoices, the Recurring Invoices and the Estimates module. It can be carried forward from estimates to invoices at the time of converting the estimates. To add an item header: Go to the Estimates, InvoicesURLs being masked despite disabling tracking
Hey, We had disabled click tracking from an email update we are sharing with our users. Despite this, the URL the end user is receiving is masked, and looks like "https://qksyl-cmpzourl.maillist-manage.net/click/1d8e72714515cda6/1d8e72714515ca70" insteadChange format of quantity format
Hi, I would like to change the qunatity format from 1,00 to 1. Is this possible? thanks!square up and Zoho books
Since we set up the app connection between square up and Zoho books we have realised that when the amounts are getting transferred Zoho is adding VAT again making the numbers 20% more than they should be. We have checked our settings and they VAT/ TaxHow to provide Access rights to specific Bank accounts
We have several bank accounts. I want to provide certain members access to only 2-3 accounts. It appears that when I give permissions, they are for ALL bank accounts. How do I do that?Errors Getting a Bank Transaction
Using Postman(for testing), I am receiving errors when attempting to get a single bank transaction. I am able to receive the list of bank transactions with https://www.zohoapis.com/books/v3/banktransactions/?organization_id={org_id} but when I try toSubscriptions Plans and CRM Products Integration?
Is there any way to set up plans and pricing in Zoho Subscriptions and have those available as Products in the CRM? We are trying to set up the CRM and the Products seem to be more geared toward selling products that are not subscription based. So if we sell annual or monthly contracts which are $10/seat/month, I can set this up as a plan in Subscriptions, but how can I set the same thing up in the CRM for the salespeople to sell/quote? What is the best practice for setting up the CRM Products toMapping Zoho Subscription Plans and Products to CRM and Books
We have products that are one time products and subscription products. 1) We would like to have the ability to create an opportunity in CRM that includes both one-time charge products and subscription products. Currently the only way of creating a subscription product is by defining a "Product->Plan" hierarchy in Zoho Subscription. It appears that the only SYNC between Subscription and CRM is around contacts and the Product->Plan hierarchy doesn't sync to CRM, thus, you would need a duplicateZoho People Attendance Module - Split Shifts
Hello, Our business employs a number of college students who often split their workdays between work hours and class schedules, resulting in split shifts. For example: Employee 1 works 9am to 11:30am and then leaves for class, returning to work at 3pmBulk update fields based on date
Hi! I need all the quotes with "Quote Stage" set to "Next Year" to update to "Draft" every January 8 (every year). Can you help?Target for a campaign
Hi, Hope you can help me. I need to create a report (for a marketing campaign) that combines Deals and Contacts to export all the contacts with closed deals. I can easily do that, what I cannot do is to remove from the target the contacts that have moreZoho Desk + Jira integration - Email notifications and comments posted by administrator instead of real user
Dear All, I set up the integration under my admin account, and now when users leave comments in Jira (to created tickets in Zoho Desk), the email notifications show that the ‘Administrator’ left a comment, not a real user. The same happens in the ticketCelebrating the power of visuals
On World Photography Day, we would like to highlight the power of visuals in customer service. Visuals promote learning and understanding in less time. A photograph can rekindle a memory, convey more than words, and give a fresh perspective. How doesCustomer 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 bookingBlocking / black listing customers
Hi, We have a situation, we observed that certain customers are blocking multiple appointments with our advsiors but not showing up. Some of these are repeat offenders. This leads to those service hours getting blocked and not available for genuine customers.Option to block bookings from specific email address or ip adresss in zoho booking
Sometime few of our client keep booking irrelevant booking service just to resolve their queries and they keep booking it again and again whenever they have queries. Currently its disturbing our current communication process and hierarchy which we haveFeature Request: Email Templates for notifications accross all services
Currently in Zoho Bookings, email notifications (such as booking confirmations, reminders, and cancellations) must be customized individually for each service. This becomes time-consuming and error-prone when managing multiple services that require consistentNext Page