Kaizen #157: Flyouts in Client Script

Kaizen #157: Flyouts in Client Script




Hello everyone! 

Welcome back to another exciting edition of our Kaizen series, where we explore fresh insights and innovative ideas to help you discover more and expand your knowledge!In this post, we'll walk through how to display Flyouts in Client Script and break down the key differences between Flyouts and pop-ups in Client Script, including when to use each one.

In this Kaizen post, 

1. What are Flyouts in Client Script?
2. Flyout- ZDKs and functions in Client Script
3. Use Case
4. Solution
        4.a. Create a Widget for EMI Calculator.
        4.b. Create a Client Script to render the Widget as Flyout.
5. Difference between flyout and popup in Client Script
6. Summary
7. Related links

1. What are Flyouts in Client Script?

Flyouts are floating User Interface that can be moved around and controlled using Client Script. Widgets can be used to render a flyout. The flyout can run independently, and any Client Script can communicate with it. 

2. Flyout- ZDKs and functions in Client Script :

  • createFlyout(name, config) - Creates a flyout. You can specify the heading, dimensions, and animation type using the config parameter.
  • getFlyout(name) - To Fetch the details of a flyout.
  • open(config, data) - Opens the created flyout.
  • notify(data, options) - Notifies and waits for data in a flyout. The options can be wait: true (Client Script execution will wait for a response from the widget) or wait: false - (Client Script execution will not wait for a response from the widget)
  • close() - Closes the active flyout.

Click here for more details about the ZDKs and functions related to flyouts.

3. Use Case :

Sales Advisors in a Finance Consulting Company regularly rely on an EMI calculator to help customers with loan queries. To improve their efficiency and eliminate the need to switch between different windows, the admin manager intends to integrate the calculator directly into CRM. The EMI calculator should appear on the Create Page of the Loans module and remain active until the user closes it.

4. Solution: 

To achieve this in Zoho CRM, we can use Widgets to create an EMI calculator and render them using flyouts in client script whenever the create Page of Loan page loads.

4.a. Create a Widget for EMI Calculator
Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <div class="loan-calculator">
  12.       <div class="top">
  13.         <h2>EMI Calculator</h2>
  14.         <form action="#">
  15.           <div class="group">
  16.             <div class="title">Amount</div>
  17.             <input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
  18.             <div class="slider-label">$<span id="loanAmountValue"></span></div>
  19.           </div>
  20.           <div class="group">
  21.             <div class="title">Interest Rate</div>
  22.             <input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
  23.             <div class="slider-label"><span id="interesRateValue"></span></div>
  24.           </div>
  25.           <div class="group">
  26.             <div class="title">Tenure (in months)</div>
  27.             <input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
  28.             <div class="slider-label"><span id="tenureMonthValue"></span></div>
  29.           </div>
  30.         </form>
  31.       </div>
  32.       <div class="result">
  33.         <div class="left">
  34.           <div class="loan-emi">
  35.             <h3>Loan EMI</h3>
  36.             <div class="value">123</div>
  37.           </div>
  38.           <div class="total-interest">
  39.             <h3>Total Interest Payable</h3>
  40.             <div class="value">1234</div>
  41.           </div>
  42.           <div class="total-amount">
  43.             <h3>Total Amount</h3>
  44.             <div class="value">12345</div>
  45.         <div class="right">
  46.           <canvas id="myChart" width="400" height="400"></canvas>
  47.         </div>
  48.       </div>
  49.     </div>
  50.     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
  51.     <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
  52.     <script src="main.js"></script>
  53.   </body>
  54. </html>
  • Click here to view the complete code.
  • Once you have added the code, upload the zip file by following the below steps.
  • Go to Setup > Developer Space > Widgets.
  • Click Create New Widget and Fill in the details.

The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.

Note: 
The widget should be of "button" type in order to render through a Client Script.

4.b. Create a Client Script to render the Widget as Flyout

Configure a Client Script for Create Page(Standard) Loans module, that triggers during onLoad event as shown below. Click Next. Click here to know how to configure a Client Script.



Enter the following script and click Save.
  1. ZDK.Client.createFlyout('EMIFlyout', {
  2.     header: 'EMI Calculator',
  3.     animation_type: 1,
  4.     height: '400px',
  5.     width: '450px',
  6.     close_on_exit: false
  7. });

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

In the above script, createFlyout() will create a new flyout with header.
Below is the syntax and parameter detail.



Now Open the flyout and render the Widget in the flyout using open() method and specify the api_name of the widget.



Here is how the Client Script renders the flyout.



5. Difference between flyout and popup in Client Script

Flyout
Pop up
A flyout can be moved around the page.

A pop-up cannot be moved anywhere on the page.


It can run independently in a separate thread. The user can interact with the background interface without closing the flyout.

The user cannot interact with the background without closing the flyout.

Use flyouts, when you need to exchange data to and fro between a Widget and Client Script. You can use ZDK.Client.sendResponse() to pass data from a widget rendered as a flyout to the Client Script.


Use popup, when you need to interrupt the screen to gather input from the user or display a message before proceeding. Use $Client.close() to pass data to the Client Script, which will also close the popup.



In the scenario discussed in this post, if you want to make it mandatory for the user to read or interact with the EMI Calculator before entering any value in the create Page(Standard), then you can use pop-up instead of Flyout. Both pop up and flyout can be used to display widgets, and their dimensions can be altered.
Refer to this post to know how to render widgets as pop up using Client Script.

6. Summary
  • In this post, we have seen,
  • Flyouts in Zoho CRM.
  • ZDKs and methods to render a Flyout(Widget) using Client Script.
  • When to use a Flyout and when to use a pop up.


    • Sticky Posts

    • Kaizen #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    Nederlandse Hulpbronnen


      • Recent Topics

      • How to install Widget in inventory module

        Hi， I am trying to install a app into Sales Order Module related list, however there is no button allow me to do that. May I ask how to install widget to inventory module related list?

      • HTML Tags added to Reports with Notes

        Recently Zoho added the ability to markup text within notes. That way, users can change font size, colors, etc. It's a great change. However, since the change, reports that include a column for "Note Content" are printing HTML tags within the report.

      • 10GB Email Storage Limits in Zoho CRM

        We’ve had Zoho One for almost 5 years and have always synced our emails from Gmail via IMAP… As of late, we’ve run into issues with our emails not syncing, due to being over the 10GB storage cap… What’s very odd is that we haven’t changed a thing? I know

      • New Feature: Audit Log in Zoho Bookings

        Greetings from the Zoho Bookings team! We’re excited to introduce Audit Log, a new feature designed to help you track all key actions related to your appointments. With Audit Log, you can maintain transparency, strengthen security, and ensure accountability.

      • Deleting unwanted ticket replies

        Hello, In a Zoho Desk Ticket thread, sometimes one of the recipients has auto-reply activated. This creates a new message in the Ticket thread that not only pollutes the thread, but most importantly cannot be replied properly because usually auto-reply e-mails don't do "reply all", so the other recipients are not included. I want to delete such a message in the Ticket thread. I searched the help of Zoho Desk, but only found a way to mark as Spam (https://help.zoho.com/portal/kb/articles/marking-support-tickets-as-spam)

      • Bill automation in Zoho Books

        Hi I am looking for 3rd-party options for bill automation in zoho which are economical and preferably have accurate scanning. What options do I have? Zoho's native scanning is a bit pricey

      • Zoho CRM Analytics - Allow To Reorder Dashboards

        I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can go

      • Restrict Payment Methods

        Allow us to restrict certain payment methods specific for each customer.

      • Introducing the Zoho Projects Learning Space

        Every product has its learning curve, and sometimes having a guided path makes the learning experience smoother. With that goal, we introduce a dedicated learning space for Zoho Projects, a platform where you can explore lessons, learn at your own pace,

      • Alert if a field is ticked.

        Hi There, We have two modules named Opportunities (Deals) and End Users (CustomModule1), as per the image below. Within Opportunities, we have a lookup field that looks up from the End Users Module. We are looking to get an alert either via email or another

      • Passing the CRM

        Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine when

      • Add Domain

        Hello Zoho Support, My Zoho Sites project accidentally auto-added domains with http:// prefix and duplicated domain entries. Current domains list shows: http://www.kinhtethethao.com.vn (Primary – cannot be removed) http://www.kinhtethethao.com.vn (verification

      • Kaizen #221: Workflow & Actions Reports APIs

        Over the last few weeks, we have joined Zylker Cloud Services as they restructured their automation ecosystem using Workflow APIs and Actions APIs. Along the way, we discovered how to audit workflows, update old rules, create new ones, and manage associated

      • Having an Issue with the Entity ID

        I'm having an issue when trying to use Zoho Flow and the notes function. I currently have it set up when a new response comes into a particular form, all of their responses will go into the notes section of their contact on the CRM. I'm currently mapping

      • For Each Loop in Zoho Flow

        I am using Zoho flow to create rows in an google sheets for every new order in Shopify but the issue is that it is creating one row per order and all line items are comma separated values but I want separate rows for each line item. Is there a way to

      • Zoho API - ticket creation - Validation failed for the condition : Ticket Status Info should not be empty

        Hi ! I'm trying to create ticket through Zoho API, and I'm getting a 422 response : "Validation failed for the condition : Ticket Status Info should not be empty" My request looks like this : curl --location 'https://desk.zoho.eu/api/v1/tickets' \ --header

      • Debug and Test not receiving updates

        Hello, I've been trying to debug two of my simple flows between Zoho Projects and Clockify but it seems like the Debug and Test feature is not working for me. When I click the Play button on any of the flows and then perform the trigger actions nothing

      • How do people handle using Outlook and Zoho Project calendar at the same time?

        We have an ongoing problem in our organisation where we use Zoho Projects to plan all of our projects tasks and that also allows us to look forward using the workload report to see which of our consultants are overstretched etc and which are available.

      • Attendance, Reimagined: Smarter Views for Teams and Individuals

        Tracking attendance shouldn’t feel like a chore. With the revamped Attendance module UI, Zoho FSM makes it easier than ever to monitor work hours, check-in activity, and team availability—whether you’re managing an entire workforce or just keeping an

      • How do I associate pricebooks to a customer?

        I setup a few pricebooks, that worked fine. But now the only thing I can do with it, when I enter a quote or sales order, I can select which pricebook to use, but I have to do this product by product every time I add one. Is there a way to connect a pricebook

      • Checking client unsubscribe details

        Hi team, Can you please let me know where we can check if a client has unsubscribed, along with the date and time it was done? If this information is not available at our end, please help confirm the unsubscribe date for the below email ID from the backend:

      • Logistics Industry: Learn to create amazing appointment scheduling sites

        In the logistics industry, the quality of service is something that cannot be shown to others unless they experience it.  Sure, there are metrics that show how you fare when compared to your competition, but then, it only communicates little with respect to quality. The usual route which firms in logistics took are advertisements, to which the internet has opened alternatives in today’s digital age like websites and appointment scheduling sites. A great online presence can help you communicate with

      • Please, make writer into a content creation tool

        I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather than

      • Customer Management: # 1 Pick a Convenient Way to Onboard Customer

        When Meera opened her bookstore, onboarding customers was effortless. A customer walked in, picked a book and left with a handwritten bill. As the store gained popularity, things changed. " Can I place an order over the phone?" a customer asked one day.

      • Tracking Emails sent through Outlook

        All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But

      • Fetch ALL items from Inventory and send to Google Sheet using Flow

        The title says it all -- I want to fetch the Item name, SKU, Purchase rate, and Sales rate for ALL items in Zoho Inventory and have them populate a tab in an existing Google Sheet. I have already successfully made this work for one item, so the flow is

      • CRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users

        Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storage

      • Zoho CRM Email Templates 100% Width No Background How?

        Hi, On the Zoho CRM Email Templates in setup > customization > templates > new templates > I choose blank template, but still it puts in a gray background and a max width for the email. I just want to make an email that looks like an email I would send from gmail that has no background or max width. How do you do this? 

      • Why Document Integrity Matters at Every Stage of the Contract Lifecycle

        Contracts are legal records that must stay authentic and traceable from creation to expiry or termination. In Zoho Contracts, several design decisions focus on protecting the integrity of every document. These measures ensure that no important details

      • affichage pièces jointes impossible

        Bonjour, aujourd'hui je n'arrive pas à afficher ni à télécharger les pièces jointes dans ZOHO CRM. J'utilise Chrome, j'ai vidé les caches et les cookies. Mais cela ne change rien. Merci de votre aide

      • Reminder to renew subscription.

        Whenever I try to add to one of my notes a " renew your subscription" window pops out and won't Close disallowing me to edit. Why should I renew my subscription on an application with at best such bugs and at worse such underhanded ways to force ren

      • Fields not coming through, not pulling data

        Forgive the noviceness of my vocabulary. I am in Zoho flow connecting CRM and Projects. When an opportunity hits a certain stage, it will create the project in Projects, and bring in data from the opportunity. Everything is working, except for two fields

      • Smartsheet Integration

        Has any in the community been able to integrate Zoho Desk with Smartsheets using Zoho Flow? I am trying to get the Smartsheet Row ID based on ticket data and cannot find documentation on the Get Row function for Smartsheet. It is asking for a Query String

      • CRM Campaign - how to mass remove contacts?

        Does anyone have a solution for removing all contacts from a CRM campaign. Seems that one by one is the only option. 

      • Send out follow-up email in the same thread (threaded conversations in individual emails) from Zoho CRM

        Hi, I'm new to Zoho. I'm trying to send individual emails to my leads one by one. And I'll send out follow up email if I don't hear back from them later. However, instead of sending a new email, I want to reply in the same email thread so that the recipients

      • Cadence Support in Zoho Vertical Studio

        We would like to know whether it is possible to create and configure Cadences in Zoho Vertical Studio, similar to the Cadence feature available in Zoho CRM. Please confirm if Vertical Studio supports creating cadences for modules and users, and whether

      • Removing "Products" as mandatory field from Sales Order creation page

        Hello, friends According to our workflow, we should: 1) create Sales Order (Stage "New") 2) call and discuss the Products with a customer (Stage "Communication") 3) add the Products to the Sales Order during the call However, "Products" is mandatory to

      • Zoho Books says "The customer "Hakimuddin P A Ali" already exists. Please specify a different name.""

        One of my transaction is not getting posted from Stripe to Zoho books. I already checked in Zoho books that there is no customer already present in Zoho books with the same name (as the error mentions) I already raised this complaint on Zoho flow portal,

      • Is it possible to automate a file to be directly uploaded to a specific subfolder in Zoho Workdrive?

        I am establishing a workflow so that when a new task is marked "complete", the document submitted in the task (under the "Documents" tab) is automatically uploaded to a specific subfolder in the associated WorkDrive for the project. However, the dilemma

      • Steuerberater der Zoho benutzt in Deutschland

        I write in English because the issue is related to German regulations. Wir sind ein Unternehmen, welches aktuell keine Pflicht zur doppelten Buchführung hat. Aktuell bucht unser Steuerberater jeden Beleg, auch unsere Auslagen. Wir würden dies gerne selbst

      • Next Page