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 #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 FAQs

    • Kaizen #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

    • Recent Topics

    • Create online meetings for Booking Pages with Zoho Meetings and Zoom

      Greetings, We hope you're all doing well. We're excited to share some recent enhancements to Bigin's Booking Pages. As you know, Booking Pages let you create public pages to share your availability so that your customers can easily book time slots with

    • Filters in audit logs

      Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to Bigin. We'll go over each one in detail. Previously, there were no filters available to narrow down data in audit logs. Now, we've introduced

    • Enhanced help options in Bigin

      Greetings, We're excited to introduce a new enhancement to Bigin's Help section: a comprehensive Help Options panel that brings together all your support resources in a single, well-organized space. Previously, the Need Help? menu provided only a limited

    • Zoho FSM API Developer Needed

      Hi, I’m looking for a developer with experience using Zoho FSM APIs. Scope: Connect WordPress website booking form to Zoho FSM Check availability (date, time, region) Create Work Orders + Service Appointments automatically Notify both customer and scheduler

    • Revenue Management: #4 What if there are uncertainties in project or service delivery?

      Our previous post taught us how Zoho Billing makes life easy for businesses with its automated revenue recognition rule. However, certain businesses have more challenges that an automated system cannot handle, and there are certain situations where automated

    • This mobile number has been marked spam. Please contact support-as@zohocorp.com

      Bom dia, estou tentando colocar o número 11 94287-6695 e esta com erro "This mobile number has been marked spam. Please contact support-as@zohocorp.com" pode me ajudar, por favor?

    • Items Serial Tracking Issue

      We enabled Zoho Items inventory tracking then disabled it after some time now we want to enable it again When I check the missing serial number reports I see one item But I cant see any option to Add the serial numbers Where and how to add the serial

    • Composite Services and Account Tracking

      I am looking to garner support/request the ability to make composite services. A quick search in the forums brings up multiple requests for this feature. I fail to see why an item is mandatory while services are optional. I also would like to see the

    • Zoho Payroll integration with Zoho Books - unable to match multiple bank feeds to one wage payment

      For one employee's wage, I make two partial payments. Those bank feed transactions come into Zoho Books via bank integration. I make one pay-run for the month in Zoho Payroll and that comes into Zoho Books via the Zoho integration. Zoho Books doesn't let me match multiple bank feed transactions against a single wage item. Please fix urgently. I can't complete my books because of this.

    • Add Checkbox Selection & Bulk Actions to Delivery Challans Module

      Hi Zoho Team, I’ve noticed that in the Sales Orders module, there are checkboxes beside each entry that allow users to select multiple records for bulk actions such as print, email, or delete. However, in the Delivery Challans module, this option appears

    • Can't be able to check-in in laptop

      even after giving location access still i can't be able to check-in in laptop.

    • Compensation Cess on Coal ₹400 per tonne. ?????

      The compensation cess rate varies by the type of product. And the cess is calculated based on the value of the product without GST. Coal, for example, comes with a cess of ₹400 per tonne. That means that if you sell 2 tonnes of coal that have a value

    • 7 month over zoho book purchase but still not immpliments Golive

      7 month over zoho book purchase but still not immpliments Golive one problems zoho team short out then other problems come still very poor mangments and immliments team . struggling with the templates in ZOHO Books. Especially with the placement of some

    • Average Costing / Weighted Average Costing

      Hello fellow maadirs. I understand Zoho Books uses FIFO method of dealing with inventory costing, but do you guys have any plans to introduce average costing? We indians need average costing. It's part of our culture. Please. I beg thee. Thanks.

    • SMS to customers from within Bigin

      Hi All, Is there anyone else crying out for Bigin SMS capability to send an SMS to customers directly from the Bigin interface? We have inbuilt telephony already with call recordings which works well. What's lacking is the ability to send and receive

    • How to update/remove file in zoho creator widgets using javascript API

      Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

    • Parent & Member Accounts (batch updating / inheritance)

      Hello, I find the Parent Account functionality very useful for creating custom views and reports, but was wondering if I can also carry out batch editing on all members (aka children) of a Parent Account at the same time. Alternatively, can I set members to automatically inherit the values of the parent? For example: We have a chain of supermarkets that buy our products. These supermarkets are all members of a Parent Account in our CRM. We release a new product and all of the member stores wish to

    • Edit Legend of Chart

      I would like to edit the legend of the chart. Every time I enable the legend, I get a very unhelpful (1), and when I try to type to change to what I would desire, nothing happens, which is very frustrating. I've gone through your online tutorials and nowhere can I find a legend settings button. This seems a simple fix, where can edit the legend? Thanks.

    • Extended timeouts for APIs beyond 40secs for to accomodate LLMs

      A 40 second max response time for API calls is fine when connecting to most services, however is unsuitable when dealing with LLMs (ChatGPT/Claude/Gemini) where the response timing is very uncertain. Is there any way to increase this? It would be great

    • Deletion of Zoho Account

      To whom it may concern, Good day, My account has been created incorrectly in Zoho and I am not able to join my Company's Zoho account - attached screenshot for your kind reference Alphatronmarine - Portal Kindly advise procedure to delete this current

    • Workflow for deposit to bank account

      Hello, Is it possible to make a workflow when a deposit is made to your bank account which is coupled to Zoho books? I want Zoho to sent an email each time a deposit is made to our bank account via a workflow. Regards, Steven

    • Marking Retainer invoice paid through Deluge

      Hey Everyone, We have a scenario where we are collecting deposit payments on our website. Now, in zoho books, we need to create a retainer invoice and mark it as paid automatically using deluge just like we can mark normal invoices as paid. I have tried

    • Create a new record in custom module vi custom button

      I have zoho books premium plan . I have 2 custom modules in zoho books. 1. Goods Receipt 2. Delivery Order, I need to select multiple records from Goods Receipt and create a new Delivery order from these multiple records. (like multilple sales order into

    • Profile date settings

      At present I have "EEE, MMMM dd, yyyy" but this takes an exessive amount of column space, we should be able to input our own format. I would like to use "EEE, MMM dd, yy" - a much shorter version of the above but with the same abbreviated info, requiring

    • Delivery Method Field in Sales Order Module

      In Books and in Sales orders, the "Delivery Method" field seems to allow for anything to be entered and it seems to store those entries for future use.  When you chose to convert a sales order to a purchase order, the related field is now called "Shipment

    • Editing / Removing stages for pipeline

      Hello, I'm trying to create a new pipeline. I created a new stage and made an error when entering the probability. How can I edit fields in stages that I created? Can I delete these stages from "Add Stages" list?

    • Dynamically Filter User Lookup in CRM Subform

      We have a subform called Pricing Calculator in the Zoho CRM Opportunity module and need some assistance. Current Setup: First column: Picklist (Level) Second column: User Lookup field When a Level is selected, we want the User lookup to display only users

    • change time zone

      can't seem to figure out how to change the time zone of the project

    • Bigin iOS app update: Built-in telephony and RingCentral support

      Hello everyone! We are excited to introduce Built-In Telephony and RingCentral support in the latest iOS version(v1.11.13) of the Bigin mobile app. Once the integration is completed on the Bigin desktop site(bigin.zoho.com), you can choose the Built-In

    • Add Image or Update Image API - for Items Module

      I am trying to add new Items to Zoho Inventory from Zoho Creator. I achieved this using Zoho Inventory Create Item API, but how to add or update the item image from Zoho Creator to Zoho Inventory Item Module?

    • Introducing Booking Pages—a topping for your Calendar Scheduling needs!

      Greetings, We're here with a new topping for Bigin! Let's dive into the details. What does this topping do? Scheduling appointments with customers is one of the most common challenges small businesses face on a daily basis, as it often involves frequent

    • Debugging `try` blocks : Tip

      I find it annoying that if one line inside a `try` block has an error, the Deluge arser points the beginning of the block to the location of the error. BUT, if you temporarily comment out the initial `try {`  The parser goes through the whole block and

    • [Product Update] TimeSheets module is now renamed as Time Logs in Zoho Projects.

      Dear Zoho Analytics customers, As part of the ongoing enhancements in Zoho Projects, the Timesheets module has been renamed to Time Logs. However, the module name will continue to be displayed as Timesheets in Zoho Analytics until the relevant APIs are

    • Use approval workflow comments in record scripts

      Greetings, i'm running an approval workflow for my records, during approval/rejection there is a step where comments are entered. i want to add there comments to the record and to use them in various deluge scripts like sending emails and so on.  how

    • ZOHO Store

      Not able to make a payment We are using Zoho One, and we are from India. The payment currency, which shows for us, is in USD. But the system says we can choose Country/Region India if it shows INR only. Attaching screenshots for more info.

    • Support Migration into Aliases in Zoho Mail

      Hello Zoho Mail Team, How are you? We are in the process of migrating some of our users from Google Workspace (Gmail and Google Drive) to Zoho. During this process, we noticed that Zoho Mail currently only supports migration into a primary mailbox and

    • API for Z Workdrive Flow Make-Integromat ?

      We are zoho workdrive fans Also we would like to have an api to work with Zoho Flow or with Make better known by its old name INTEGROMAT Is it planned and when? 3 months -6 months or more?

    • Apps Pane no longer visible

      I have read all the info and help and nothing works, I do not have a "show apps" anywhere and I can no longer see my Apps pane in the left hand side of mail, please advise how to get this back

    • Canvas View - Print

      What is the best way to accomplish a print to PDF of the canvas view?

    • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ(8/21)

      ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 8月開催のZoho ワークアウトについてお知らせします。 今回はZoomにてオンライン開催します。 ▷▷参加登録はこちら：https://us02web.zoom.us/meeting/register/eVOEnBsSQ2uvX4WN5Z5DeQ ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho

    • Next Page