Flyouts in Client Script

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.


    • Recent Topics

    • Top Menu Disappeared from Blog Page

      Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

    • Managing Prepaid Hours for Consulting

      We are a consulting firm that bills clients a flat upfront annual fee plus an hourly rate and offer a discount for pre-paying a block of hours. Hours that surpass the pre-paid block are billed monthly at the normal rate. If there are any pre-paid hours remaining at the end of the project they are banked for future use. I'm not seeing a method of doing this in Projects/Books/CRM... thoughts?

    • ZOHO Widget SDK not loading in html

      I have this code below, I have imported the widgetsdk however I get the error shown in the image, I have tried many different ways of importing and initiating the function ZOHO but nothing is working. can someone explain what I'm doing wrong, if I am

    • Enhancements to Zoho Corp Help Center "Team Requests" View

      Dear Zoho Team, I hope this message finds you well. The ability to view both my tickets and my team’s tickets in the Zoho Corp Help Center is a fantastic feature, especially as the focal point for Zoho in our organization. However, we’ve encountered a

    • Allow Multiple Scheduled Appointments with Zoho Support

      Dear Zoho Team, I hope you're doing well. First, thank you for introducing the option to schedule support calls via the Zoho CRM booking link. This has been a fantastic enhancement, eliminating the need for back-and-forth coordination when scheduling

    • Projectwise budget ---

      Can we have a Project wise subject in addition to the Monthly, and quarterly ACCOUNT LEVEL budget?

    • WorkDrive API Documentation

      WorkDrive provides users and developers an extensive set of APIs to help integrate functionalities of Zoho WorkDrive with other Zoho applications and third-party tools. We have published the official WorkDrive API Documentation page for all external users.

    • Error 403: Forbidden When Updating Email Signature via API

      Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

    • Who can see draft replies on tickets?

      We have noticed that we are able to see draft replies made by other agents. Which settings can limit this visibility? It makes sense to me that admins and the agent who created the draft would be able to see the draft, but no one else. How can we make

    • Serious question: Are there actually "solo-preneurs"/small business owners who made Zoho-one work well for them?

      L.S. After already many years of continued struggle with Zoho-One, I am seriously wondering if there are actually solo-preneurs (one person small business owners - without a large, dedicated IT dept.) who got it (Zoho-One) to work well for their businesses.

    • Major iOS issues when accessing forms via the browser

      Hi, We have been using forms for some time, while the office staff are accessing the forms via the app on Android mobiles, we have a fleet of sub contractors that we would not like them having access to the main app as some of the forms are confidential

    • All notes disappeared

      I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,

    • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

      Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

    • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

      Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

    • Work Orders / Bundle Requests

      Zoho Inventory needs a work order / bundle request system. This record would be analogous to a purchase order in the purchasing workflow or a sales order in the sales cycle. It would be non-journaling, but it would reserve the appropriate inventory of

    • Zoho Books API Limit Is RIDICULOUS!!!!!!!!!!!!!

      The 2,500 API call limit in Zoho Books is about as useful as AOL dialup.  Seriously Zoho, not only can I use up 2,500 API calls in no time with my own app but YOUR OWN STUPID IPAD APP blows through them super fast too, so if any one of my clients wants

    • QR codes in templates

      I'm excited about the new QR code generator. I have included a QR code that contains the record ID setting "${ID}" as input data. In the report detail it works perfectly but when printing it in a template the code is not shown.

    • Button Display Conditions

      Hi Guys, Is it at all possible to have extra button conditions? Context: We have data in our deals module which has a custom button which converts the deal into contacts + set up relationships between them. At the end of the conversion we set a field

    • Knowledge base: The nitty-gritty of SEO tags

      A well-optimized knowledge base with great SEO can benefit your company by allowing customers to find help articles and support resources using search engines. This enables customers to quickly and efficiently find the information they need without direct

    • Social Media Simplified with Zoho Social: Make the best out of the publishing calendar

      Are you a marketer who likes visualizing your plan of action before you start social media posting? Are you part of a team that works on social media on a rotational basis, so the most important task is to collaborate to avoid overlap and confusion? Or

    • Custom function daily limit and procedural programming

      Dearest Zoho Today, support confirmed that if I call a custom function from another custom function then I will use up two, with regards to my daily limit. A few times, we have blown our daily limit and that means that ordinary business processes don't run for the rest of the day. I have to mop these up the following day and there is no guarantee that I will get it right. Therefore, I can't afford to waste any. Procedural programming has been around for over 50 years now and it greatly simplifies

    • Unified customer portal login

      As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is that

    • Welcome Link Expired

      Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>

    • New enhancements: Changing portal users' email addresses and new customization options for templates

      Dear All, Portals have enabled organizations to extend access to various CRM modules to their customers, vendors, partners, and end users, per their business requirements. When a portal is created, an invitation email is sent to portal users with a link

    • Granular Time Frame Settings for Message Deletion and Editing in Zoho Cliq

      Dear Zoho Team, I hope you're doing well. Currently, the settings for message deletion and editing in Zoho Cliq are configured globally under: Admin Panel > Organisation > Configurations > Conversations Delete messages: Time frame to allow message deletion

    • New Built In QR/Barcode Generator Print Settings

      I'm trying out the new QR/Barcode generator field in Creator. I would think most people will want to print these, like I do. I am not seeing any way to control the height or width of the barcode for printing (inside the print/pdf template builder). The

    • Zoho One. Client Script

      Hi, I would like to know if the Client Script feature is available in Zoho One. If it's, how can I enable it?

    • Calendar View for Zoho Tickets

      Is there a way to view your tickets with due dates on a calendar view? I can not find a way to merge my Zoho Calendar and Tickets. This would be extremely helpful to my team.

    • Delete / Modify Default Career Site - Zoho Recruit

      Hello, It would be very useful if we could delete a default career site or change which of our career site is the default. Our Career site was created when there were issues with Zoho Recruit creating English CTA buttons on French Career sites. The only

    • Workflows for Timesheet

      Good day, Any way to have timesheet as triggers? I looked into Zoho Flow and into Zoho Project automation but no where can I have timesheet as a trigger. Basically, I would like to trigger something upon timesheet approval. Right now, the only way to

    • Is it possible to hide Developer Space for all user in Zoho Projects

      Hello! I am Zoho admin in a company and we want to use Zoho Project to manage projects, but after a few days of testing we are not able to "hide" the Developer Space from all kind of users except the admin. To sum up, I want to hide this for all users.

    • Introducing automation and utility conversations in WhatsApp marketing

      We’re excited to announce the addition of two new features to our WhatsApp integration: Automation and Utility conversations. These enhancements will allow you to streamline your marketing efforts and engage with your customers more effectively by automating

    • Extracting data from cells in zoho sheets for zoho books

      I am currently uploading my bank statment in excel format to zoho workdrive. I would like flow to extract certain data and send it to zoho books. Would scripting in zoho flow be able to help me with this? By this I mean should I attempt this in zoho flow

    • Within the Basic KPI component in Analytics, it is impossible to set "next" day range as a filter

      Hi there, I am currently setting up a deal dashboard for the Sales team. While it is possible to filter deal records to show records that were created LAST X days only, it looks like a NEXT X days Closing date filter is not available. Would it be possible

    • Pulling Specific Products from Sales Orders in Books to a CRM Record

      We currently process orders directly through our website (woocommerce) as well as through manual sales orders in zoho books. When an order comes through the website, all of the individual products from that order show up in the CRM record of that customer.

    • Você já viu os cursos do Zoho Mind?

      Pessoal, Tem uma plataforma da Zoho chamada Zoho Mind, muito interessante os cursos e vídeos tutoriais que lá possui. Para a turma do Zoho Creator, tem uma dica de Buscar dados em Formulário, segue o link e clique em Zoho Creator. https://www.zohomind.com.br/#/videostutoriais

    • Como gerar gatilhos para pagamento de impostos no Zoho Books?

      Olá Pessoal, boa tarde! Gostaria de saber como vocês estão escriturando os impostos a pagar no Zoho Books. Vi que temos a opção de Bills, porém se eu escriturar nesta aba do Zoho Books para gerar lembretes de tempo de vencimento por exemplo vai refletir

    • Subform Time field to string.

      Good afternoon All. I have a Subform 'Delivery_Receiving_Hours' that captures Day (Dropdown), Time_Open (Time), and Time_Close (Time). I need to capture this data and send it to a multiline field in the CRM. The code, posted below, below will capture

    • workflow for bounced email gets triggered, but email is status = opened

      Hello, I have a workflow that sends me an email if outgoing email are bounced. Now I got some kind of this emails, but the corrosponding contacts have status = open at the email. Why this bounce-workflow is triggered? Reports > Email Reports > Bounce

    • Data export

      I need to export our customer's data and projects' data for our purpose but am unable to export full data i only get around 3160 projects and around 2k customer can you please help me to get full data, please

    • Next Page