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. });

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

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

    • Inquiry Regarding Image Display Issue in Campaign Duplication

      We are currently using Zoho Campaigns for email distribution to our clients. I would like to inquire about an issue we encountered. When duplicating a previously created and sent campaign from the "All Campaigns" section, the images used in the header
    • New integrations for Bigin: Zoho Sign, SalesIQ, and Marketing Automation

      Greetings, We're excited to share new integrations that make Bigin more powerful and useful for your business! Zoho Sign for Bigin Zoho Sign now integrates seamlessly with Bigin, enabling you to sign, send, and manage contracts or agreements without leaving
    • Add multiple users to a task

      When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesman
    • What is Attendee Status 0 and 1?

      Hi there, I recently stumbled upon the API to get the attendee list and in the return value, there is a parameter called "status", and 0 supposed to mean not_attending, and 1 means attending. I cannot find this representation anywhere in the attendee
    • ZOHO BackStage

      How to get list of events, using ZOHO BackStage APIs. Is it possible OR not?
    • How to Customize Task Creation to Send a Custom Alert Using JavaScript in Zoho CRM?

      Hello Zoho CRM Community, I’m looking to customize Zoho CRM to send a custom alert whenever a task is created. I understand that Zoho CRM supports client scripts using JavaScript, and I would like to leverage this feature to implement the alert functionality.
    • Zoho Meeting iOS app update - Join breakout rooms, access polls, paste links and join sessions, in session host controls

      Hello, everyone! In the latest iOS version(v1.7) of the Zoho Meeting app, we have brought in support for the following features: Polls in meeting session Join Breakout rooms Paste link in join meeting screen Foreign time zone in the meeting details screen.
    • Calculate hours between 2 date/time fields

      Hi, Does anyone know if it is possible to get the number of hours between 2 date/time fields in a zoho crm custom function? Thanks, Michael
    • External ID validation.

      I added an external ID field as below in one of my custom modules: When creating records via the API using some value (eg: 762115b2-097e-43b2-bdba-f3924a5371a6) for this field, it works without any problem. I can create and even see the records on the
    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files
    • Create a button that executes a customized function

      Hello, I have created a summary view in which I combine the data from my items table and suppliers table. I would like to know if there is the possibility of adding a button somewhere in the view to be able to execute a function when clicked on it. I
    • Custom field doesn't fill when converting sales order to invoice

      Hi, When I convert a Sales Order to an Invoice one of the custom fields on a product line names "Subsidie" does not seem to fill in automatically. I manually have to select the product again by clicking on the product name in the order line en re-select
    • Can I use ZOHO calendar to schedule a Youtube video that is already in my youtube account, but listed as private or unlisted?

      I am creating Youtube videos and shorts and then uploading them to our Channel so others can view and approve. Once approved I would like to just schedule them over the next few days within Zoho. So far it looks like I have to re-upload the video to Zoho
    • How to Display a Logo Image on a Public Form?

      I would like to display a logo image in the header of a form. To achieve this, I added an Add Notes field to the form. The code below works perfectly for Zoho users accessing the form. However, when the form is made public, the image does not load properly:
    • Advice for my first project in Zoho

      Hello, how can I design and implement a customized ERP and CRM system using Zoho to automate and manage core business functions, including customer relationship management, property inventory, sales tracking, and financial processes. This is one of my
    • Associate Email API Internal Error

      I am trying to associate an already existing email within a function using the Related Emails API. To provide more context, I also have admin permissions and have ensured that the fields are correct and that I have admin permissions when associating the
    • Profit on Sales order

      Hi, would it be possible to implement a column at the Sales order overview of Purchase amount? So a field with the amount of all purchase related to this Sales order? This is very usefull so you will see the profit you made on this deal. I tried to get
    • Subform Data in v2 REST API

      What is the mechanism for adding subform data in the Creator v2 REST APIs?  There is nothing documented in the Data APIs documentation (https://www.zoho.com/creator/help/api/v2/).   I was able to determine how to GET the subform data by adding it to the
    • Is the filename of an attachment restricted to only certain languages?

      Hi, I tried to create a file card in a notebook, but I encountered an issue: when the filename of an attachment is in languages other than the main ones (such as English, Japanese, or Simplified Chinese......), syncing stops or the filenames become garbled
    • How to create comparison time periods like these examples

      In a Pivot Report I would like to be able to select any date range and show a set of metrics for that date range e.g. revenue, orders, units sold. I would then like to be able to compare to the previous period based on the amount of days on the selected
    • Overwrite Option for custom modules

      Hi Team, I noticed that the overwrite option is unavailable in Zoho Books when importing data for custom modules. This limitation makes it challenging to bulk update old data, as the only option is the 'bulk update' feature, which is restricted to 25
    • Zoho Creator - Zoho Analytics

      I am facing an issue in Zoho Analytics where I am still seeing deleted data from the Zoho Creator form I created. Could you please look into this and let me know what needs to be done?
    • Unable to send emails

      I have this email parth@mrcolumbus.in, but I couldnt send outgoing email. Can you please help?
    • Notifications push : Encourager le réengagement et renforcer la fidélité des utilisateurs efficacement

      Vous avez déjà souhaité engager et communiquer de manière proactive avec les utilisateurs, y compris lorsqu'ils utilisent votre application de manière peu active ? Zoho Apptics vous offre déjà des fonctionnalités qui vous permettent d'évaluer la performance,
    • Easy way to delete attachments

      I've reached my data limit and would like to run a view/report, and mass delete attachments. Is there an easy, fast way to do this? Moderation Update: Post Summary: There are two features the post discusses a) Easy way to remove Email attachments Will
    • How to add new deal to existing contact

      Hi, I want to add new deal to existing contact.
    • Domain verification is in progress... (How long do I need to wait?)

      Trying to setup my first email domain by connecting with GoDaddy. Have been here for quite some time and the screen is not changing. How long should this take?Send DataSend Data
    • email address autocomplete

      Is there a way to eliminate certain addresses from showing up in auto complete when entering an address? Many old and unused addresses currently show up, many of which I would like to get rid of. Thanks
    • Linking an email to a Contact when the email is sent in deluge via sendmail

      The "to:" address in this code is a CRM Contact. Email address is forced unique in CRM This sendmail gets sent via a workflow which is in a custom module. It works, except that the outbound email does not appear (i.e, get linked to) the Contact such that
    • How to restore deleted Field

      I edited a field in zoho form and by accident I deleted a field (email address). The form is ongoing to be filled by respondent. Then, when I checked to the all entries and report, the email address is gone. I checked in audit log, there is a record that
    • How to select multiple notes at once in the PC client?

      In the PC client, you can select notes using ctr+LMB. But why can't you use shift+LMB? PC version 3.2.0
    • How I can add customized Invoice

      Hi, I wanna use a customized Invoice, how i can add that
    • Zoho Analytics Pivot Table - How to compare month vs last year same month

      Hi, I had created a pivot table with setup as below: Column: - Delivery Date Row: - Customer Group Data as column - Total amount (sum > normal) (show data of the month) - Total amount (sum > % difference from previous value) (compare between this month
    • Recorded imported goods

      I have imported some goods from a foreign vendor called ABC. to Bahrain. My Customs duty and VAT are paid by an agency called XYZ to authorities. I have paid the amounts to XYZ and they have paid to authorities in behalf of us using our TRN Number. Now
    • Notes created in mobile app not syncing with web notebook

      I have created certain notes in a new notebook in mobile app. The new notebook is also created using mobile app and when I logged in through web I am unable to see notebook that I have created using mobile app. there is no trace of notes in which i have created in mobile app on the web even after days of creating in mobile app This is not the case vise-a-versa. the notes and note book created on web are accessible on mobile app on real time.  this is very inconvenient and big demotivating factor
    • Match Transaction > Filter | Allow wildcards in search

      The Filter function is useful for narrowing down to a specific set of transactions. It would be useful to have the ability to use wildcards in search. e.g. customer name "starts with" or " * " as a placeholder. e.g. "National * " instead of "National
    • Marketing Automation Emails Going to Spam

      Google is trapping all the marketing automation emails in spam. My domain has a perfect reputation and it looks like Zoho has a low reputation which is sending it to spam. When I pull the email out of spam and click on a link in the email, I get this
    • Convert Request to Forum Topic

      I know you can convert a forum topic to a request and a request to a solution in the knowledge base, but how do you convert a request to a forum topic?  Is this possible?  If not is this a feature coming down the pipe in the near future? Thanks!
    • Zoho Sign / Prefill By You - Editable by Them!

      Zoho Sign seems to have two field options available - an empty field for signer(s) to complete or a field that has been prefilled by you, that becomes read only once sent.  What I would like is an option on the pre-filled by you fields, to leave them
    • Is the Contacts sync between Campaigns and CRM bi-directional?

      Is the Contacts sync between Campaigns and CRM bi-directional?
    • Next Page