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

    • Recent Topics

    • Enhancements to Zoho Meeting Annotator

      Hello Zoho Meeting Team, Hope you are doing well. We would like to share a few improvement suggestions regarding the Zoho Meeting Annotator used during screen sharing. While the current version provides helpful annotation tools, there are several limitations

    • Zoho Social/Marketing Plus - Addition to "Monitor" function

      It would be very helpful if the Monitor function would allow us to add a column to monitor hashtags in addition to pages and mentions. This is a common and very valuable function in other social listening tools.

    • Zoho forms - > Zoho desk multiple agents

      Hi! I would like to use a standard form to be used when we hiring people, so we looked at zoho forms for that. Now we would like to get that info in to Zoho desk and their different users shall take care of this ticket simultaneous . So, what would be

    • Almacenamiento

      Hola, Quisiera saber como podría hacer para bajar el almacenamiento de 5gb a mis usuarios, en otras palabras los quiero ir limitando de la cuota real, y luego ir agregando poco a poco la cantidad hasta llegar a los 5gb que me dan en el plan free. 

    • Will I Get a Refund If I Downgrade Zoho Mail?

      Hello, We upgraded an email account for our new employee. However, the employee left after one month, and now I've reduced the number of Zoho Mail users from 7 to 6. Can we get a refund for the remaining portion of our annual payment?

    • Introducing the revamped What's New page

      Hello everyone! We're happy to announce that Zoho Campaigns' What's New page has undergone a complete revamp. We've bid the old page adieu after a long time and have introduced a new, sleeker-looking page. Without further ado, let's dive into the main

    • Zoho Books - France

      L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité

    • Name autocomplete

      Hi, During searching emails the web tool does not always propose the auto-completion of the saved emails. As a result I either have to go to contacts and look up the exact email, or the exact full name including the middle name and any dots, which is very annoying. For example I have a contact that I emailed in the past that has "First M. Last" <email@email.com> type of contact. When I start typing 'First' the email may or may not pop up in the autocomplete menu. Then if I start typing "first last"

    • How do i follow up my email campaign in-thread

      Is there a way to follow up the email campaign so that it is in-thread using zoho campaigns? eg customer gets original email with subject line "hello" then 5 days later follow up would be with subject line "RE: hello".

    • Announcing new features in Trident for Mac (1.29.0)

      Hello everyone! Trident for macOS (v1.29.0) is here with new features and enhancements to enhance your business communication. Let's take a quick look at them. Access shared mailboxes. You can now view and access shared mailboxes in Trident, which are

    • Books is extremely slow again today !

      Everything is running slowly even with 500mb connection speed

    • Cyclic dependencies in many-to-many relationships...

      I have an application which includes a form for companies, and a form for contacts. Each company can be assigned 1 technical and 1 administrative contact. I have this working okay so far, but I want to copy the scripts used so far to a new empty application. When I import the scripts it fails with a message that says: Problem encountered while creating the application Error in resolving form dependency:Cyclic dependency among the forms:[Company, Contact] What can I do to resolve this? After all,

    • Zoho API to create ticket

      I'm developing an integration to create tickets via API, but, locally it works (send and recieve requests). In production it also works sending requests, but, my file don't recieve any response data. My URL is available in Zoho API Console and I have

    • Automate Timesheet Approvals with Multi-level Approval Rules

      Introducing Approval Rules for Timesheets in Zoho Projects. With this automation, teams can manage how timesheets are reviewed and approved by setting up rules with criteria and assigning approvers to handle submissions. Timesheet, when associated to

    • Labels Part 2

       Hey Zoho Mail Team, On the labels window on the left-hand pane, alphabetize label name display, rather than displaying in order created.  This one should be easy. Thanks, Drew

    • Building Toppings #1 - Serving your needs with Bigin Toppings

      Hey Biginners! We're excited to kick off our Developer Community series on building toppings for Bigin, and our goal is to provide an accessible, beginner-friendly, and relevant path for every developer. Imagine creating tiny pieces of software that unlock

    • Can we create Sprint with tasks from Multiple projects?

      Hi Team, We were using Zoho Sprints for quite sometime. Currently we have started the process of Sprint method. We couldnt create the active sprint board with the tasks from multiple projects. I would like to know whether this is possible or Any timeline

    • Tip of the Week #74– Create automated workflows in MS Power Automate

      Zoho TeamInbox now connects directly with Microsoft Power Automate, letting you streamline everyday routines tasks such as from sending emails to managing threads, with automated workflows. About the integration Zoho TeamInbox integrates with Microsoft

    • Account validation

      Hello everyone, I registered my account on ZeptoMail to use the system, but the problem is that the verification period on Zepto's end has already passed and I have limited functionality.

    • Paste issues in ZOHO crm notes

      Hi, since a week or so I have issues with the paste function in ZOHO CRM. I use "notes" to copy paste texts from Outlook emails and since a week or so, the pasting doesnt function as it should: some text just disappears and it gives a lot of empty lines/enters.....

    • Is it possible to add a gradient color to a newsletter im designing?

      From where i sit it looks like you can only choose a single color but not combine 2 colors?

    • 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.

    • Account disabled

      I have an issue I need help with. Whilst trialing ZOHO CRM I created the following: Account1 (-------------) using m__ame@m__rg___s__i__.___.__ and 2 personal emails Account2 (-------------) using a personal email and 2 users _al__1@______________._o_.__

    • Blocked Email

      We are a Zoho One subscriber and use Yahoo as our MX provider. A few times each year, for the past four years, CRM blocks one or more of my Zoho One users from receiving internal email from CRM. This includes "@mentions" in all modules, and emails from

    • message var is empty in bot mention handler

      Hi, I'm encountering a problem: in my bot's mention handler, I want to retrieve the text the user typed when mentioning the bot. Example: On the #tests-cyril channel, I send this message: “@Donna hello how are you ?” I expect the system variable "message"

    • Remembrance Day to Remember – Recalling Values

      The phrase “at the eleventh hour” refers to the 11th hour of the 11th day of the 11th month in 1918, when the hostilities of World War I came to an end—but it still holds meaning today. Remembrance Day (Veterans Day in the US) is observed on November

    • How to display two measures (sales and price) divided by categories on one line chart

      Hi everyone, I’m having trouble figuring out how to display two columns on a line chart with category breakdowns. What I need is a line chart where one line represents Sales and the other represents Price. However, the Price data is divided into around

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • Introducing the locking option for CRM records

      Last modified on 06/04/2023: Record locking option in CRM is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. Hello All, Hope you're doing well! We're thrilled to introduce our latest

    • Two new enhancements in Zoho CRM: Introducing new criteria for user fields and displaying group information in users page

      Announcement moderated on 14th June, 2023. Dear All, These enhancements are opened for all users in all DCs. ------------------------------------------------------------------------------------- Dear All, Hope you're well! We are here with two useful

    • Tip #49- Navigating the Remote Support Dashboard in Zoho Assist- 'Insider Insights'

      The Remote Support dashboard in Zoho Assist is designed to help technicians quickly access, manage, and monitor all their support sessions from a single, intuitive interface. Whether you’re starting a new session, managing ongoing connections, or reviewing

    • BMI formula

      I've been trying for hours to calculate BMI using height and weight as my only inputs. It's a simple calculation and I even went to ChatGPT to help me figure this out in Zoho Forms, but it led me down a path of "try this" and "try this". None of my attempts

    • SEO on blogs

      Hello, google is not able to find my blogs. Can you advice me if I need to change some settings or anything else to make it retrievable via SEO many thanks, hans

    • Duplicated Notebooks

      Out of the blue, almost all of my notebooks got duplicated and the different copies contain different information. Some seem like older copies than the others. I use the linux desktop app and sometimes the Android app. I assume that the sync failed at some point and was unable to merge the two versions together. But I'm afraid to add anything else to my notebook because if it can't properly sync 5 notebooks with only a handful of notes each, what will happen when I have hundreds of notes and I lose

    • Mind mapping in Zoho Projects

      Good morning,   I would like to congratulate the Zoho team for building such an inovative and responsive application that fits in the daily challenges of so many work groups. I would like suggest you another functionality that helps a lot in project planning and development: mind mapping. Mind mapping would be of great help for brianstorming, knowledge management and other needs in online collaboration.   Thanks and wish you all the best! George Maha Empresa Júnior Multidisciplinar do Instituto de

    • Retainer invoice in Zoho Finance modlue

      Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.

    • Documents don't sync properly

      Hello, My team recently moved to Zoho workDrive, some of my team, work remotely so we believed Zoho would be the best way to share and edit files as well as access files withing the team. However we are experiencing sync issues, when a file is uploaded in the file explorer and shows sync complete, same file can be seen on the Zoho web app but other team members can't see the said file because it is not syncing properly. i figured out that if i were to go to preferences in settings and resync the

    • We are looking for an experienced Zoho Developer

      Hi Everyone! We’re on the lookout for a skilled Zoho Developer with hands-on experience in the Zoho Developer Platform (The Vertical CRM Platform) and if you don't know what that is, then you are not the person we are looking for. You would also need

    • Initiate approval workflow after "on edit --> on success"

      Dear Community,  currently I am working on a initiative tracker which should handle approval workflows based on different initiative status. As far as I understand, an approval workflow can be triggered (only?) when data is entered for the input form to the database.  Example: A new initiative is created and submitted. --> Approval Workflow triggered Here comes my question: Is it also possible to trigger an approval workflow if the form was "simply" updated? (on edit --> on success) Imagine the initiative

    • Tax Deductible Donations to a Charity Organisation

      For Australia, what's the best/proper method for entering an expense that is a tax deductible donation to a charitable organisation. And thus is appears correctly in Accounts and BAS as a GST payable deduction?

    • Next Page