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.


    • Recent Topics

    • How to create knowledge base article from api?

      How to create knowledge base article from api?

    • Disabling Smart Writing Assistant

      Hello, I've found this article when looking to disable the Zoho Smart Writing Assistant in our Zoho Desk environment. I appreciate that the article is for another Zoho solution, however, I was still unable to disable this feature! Could we please have

    • Append tags to records on import

      Dear Customers, We hope you're well! Tags in Zoho CRM are humble labels you can earmark your records with for quick classification and recognition. You can tag records one by one when you have only a few records to update; you can automate tagging when

    • "Recently Changed Payload Format" for webhooks in Zoho Billing

      We are seeing a message about recently changed payload format for webhooks in zoho billing. I cannot find any notification about this change can you give me more information on this?

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

    • Zoho People Created a UBO/Group CEO Profile to view all employees

      Hello All I have created a specific role UBO/ Group CEO Profile that is able to access to view all employees information Applicability i have input all the legal entity, business unit and division which most employees are added. I have also given access

    • We've updated the webhook payload format

      We’ve updated the default payload format for webhooks as part of our ongoing efforts to standardize the webhook format across Zoho Finance suite of applications. Note: This change is also applicable for the webhooks configured from the Developer Portal.

    • Zoho People > Access of Left Menu

      Hello All May I check how do i activate or de-activate of the left menu for users do i control via role or specific role? I have assign a user to Team member

    • Custom Button - Location Choice is not changeable in creation

      I created a custom button for the Tasks module that calls a function to streamline mass updates of closing tasks as "complete". I want to place it in either the utility menu or the mass action menu, but when I create the button the "select page" field

    • Workflow on Clone

      Hello. I'm interested on creating a workflow on a clone of a record in the Price_Books module that will clone also all the related Products and associate the new ones with the new Price_Book. My problem starts with that there's no On Clone event, only

    • How can I create a button in a widget that pops up a form created in ZOHO Creator when clicked?

      I know that using HTML snippets, clicking the button can pop up the form. However, the same code does not work in the widget. <button><a href="#Form:form2?zc_LoadIn=dialog">Add</a></button>

    • Introduce an option to hide the form title

      My feature request is to include an option to hide the form title. At the moment it is possible to hide the header. In some cases I do want to show a logo image in the header but not the form title. As a workaround I have tried disabling the header and

    • 関連トピックから配信リストをつくる

      ZOHOキャンペーンの既存の連絡先リストを関連トピックで絞り込んで、配信リストを作成する方法があれば、教えてください。

    • Zoho Mail not working

      Anyone else had the issue where emails wont send from either the desktop CRM or the mail app? It just says "syncing" then "failed". I deleted it and tried to access emails through the CRM on my phone (fold) but they dont show. It seems it is impossible

    • Shorten one URL but not all

      I have read that I should be able to click on the shorten link button at the bottom of the post window and shorten just one URL. But it does all of the URLs in my post. I want only one shortened. Not sure what I'm missing. Any help appreciated.

    • What is Zoho Marketing Plus?

      As if there wasn't enough confusion with SalesIQ, CRM, Campaigns and Marketing Automation, now we have Marketing Plus too. Can somebody from Zoho please give us a comparative list of features that are in Marketing Plus compared to what's in Marketing

    • I didn't receive my domain verification mail

      I didn't receive my domain verification mail 

    • Creating a new deal with specific layout and pipeline

      I am trying to create a button which creates a new deal for a particular account. It needs to be assigned a specific layout and pipeline. It seems like it should be really simple but I've been struggling to get this to work all day, can anyone help?!

    • Announcing New Features in Trident for macOS (v.1.21.0)

      Hello everyone! Trident for macOS is here with interesting features to elevate your workplace communication and productivity. Let's take a quick look at them. Get better visibility for concurrent events. Quickly compare and manage simultaneous events

    • Modifying Product Details

      I am in the process of setting up new products in Zoho Commerce and have encountered a few problems: 1) Tabs It seems that Product Details pages do not have the ability to create Tabs. eg:  https://www.thedebugstore.com/tp240141-aardvark-usb-i2c-spi-host-adapter-total-phase.html

    • Zoho Commerce B2B

      Hello, I have signed up for a Zoho Commerce B2B product demo but it's not clear to me how the B2B experience would look for my customers, in a couple of ways. 1) Some of my customers are on terms and some pay upfront with credit card. How do I hide/show

    • Creating a custom CSV file using deluge script/

      I have an application I have developed and the client wants us to place an export file in csv onto an ftp server daily. Now I don't see au options in creator to change the separator to anything else. The client wants the separator to be the pipe symbol "|"  I think i would be able to create schedule with some code to create the appropriate data in a string using deluge script but I haven't seen any functionality that would allow me to deposit that data as a file anywhere or attach it to an email

    • How can I get a nested value attributes inside a key par?

      Hello! Im getting the following output when reviewing a record I am after. I am trying to put some conditions based on a data value that is inside another data. For example, lets grab the below output. Info {"Account_Name":{"name":"Liberty Construction

    • Invoices not arriving and mail server settings

      I am having an issue where some clients are not receiving invoices. I have configured Zoho Books to send on my behalf and configured the appropriate SPF, DKIM and DMARC settings on my mail server and tested these as working. I get the CC'd copies so I

    • Multi Line Text Character Limit

      I want to export my Help Center articles but I realized that the text in the Answer column is being cut off. I'm guessing there is a character limit for multi line text fields. How can I get around this?

    • Emails bouncing to Hotmail / Outlook.com

      Today I have seen multiple emails bouncing all to Hotmail and outlook.com mailboxes, all other emails are being delivered. Is it just me or is this a widespread issue with Zoho Books ? Bounce Reason : uncategorized-bounce

    • Be careful if you want to purchase zoho one

      Hi, just to add one more complain to the other similar complains. When I purchased zoho one, Divith, my account manager told me (by email) that I would be able to keep different emails that I have inside the company (contact, privacy, etc.). During the

    • Schedule Timeout 5 minutes vs. stated 15 minutes

      I am running into a function run timeout error after 5 minutes for my schedules. The Functions - Limits documents states it should be 15 minutes: Functions - Limits | Online Help - Zoho CRM. What should it actually be? Due to the 5 minute timeout, I'm

    • Importing invoices in bulk using the xls file template - still posting as draft - Is there a way to skip "mark as sent" and post it directly?

      Hello everyone, as the title say, is there a way that when I upload from the template file, it will post automatically? I tried changing the "Invoice Status" from draft to approved but it is still appearing as draft and is making me go to invoices so

    • How to set Sales Order Payment Terms when creating a Sales Order via the Zoho Books API

      I am creating Sales Orders via the Zoho Books API. I would like to set the Payment Terms to a particular value from the list of allowed values. Is that possible? I was able to get the list of payment terms via this API call: https://books.zoho.com/api/v3/settings/paymentterms?organization_id=XXXX"

    • Function and workflow to create customer payment and send receipt

       I am attempting to set up a workflow/custom function for the automatic creation of a customer payment and sending the email receipt, but am receiving the error "Improper Statement Error might be due to missing ';' at end of the line or incomplete expression" I've been over everything several times and cannot see where the error is (code is copied into the attached document).  I haven't used custom functions before with Deluge, so it's very likely something very simple, or I've completely mucked

    • How to rename the Submit Button by using deluge script

      Hi everyone, As we know, the Submit button can be renamed in the form builder setting. But I have scenario where I need the Submit Button to be renamed differently according to condition. Anyone knows how to do it? Thank You

    • Banking: Transfer from another account without base currency

      Scenario: A banking line item shall be categorised as an "internal transfer" from another bank account. This is a USD to EUR transfer. Our base currency is CHF. What we tried: Category: "Transfer from another account" From: Our USD account To: Our EUR

    • Item cost price - How to accomodate changing cost prices

      I am in urgent need of assistance with how to accommodate changing cost prices for items, not manually. We import items so their landed cost is always changing. This cost is NOT reflected however in the item cost price. This is going to cause us some

    • Marketer's Space: Targeted messaging : Leveraging Zoho Campaigns for Effective Communication

      Hello Marketers, Welcome back to Marketers’ Space! Targeted messaging ensures your communication reaches the right audience - boosting engagement, conversions, and overall campaign success. In this post, we’ll be looking at targeted messaging to create

    • :between: conditions in search?criteria

      Hello, please help solve problem I try to select deals by Creater_Time between dates i send this GET request /crm/v4/deals/search?criteria=(Created_Time:between:(2024-02-01T18:52:56,24-02-17T18:52:56)) encoded to /crm/v4/deals/search?criteria=%28Created_Time%3Abetween%3A%282024-02-01T18%3A52%3A56%2C24-02-17T18%3A52%3A56%29%29

    • Zoho Creator : Updating Records via Import. Can't use Autonumber or ZohoRecordID ?

      Hi, I am trying to use the function to update a report with an import. I'm running in to the error : "unable to update because the form has no column with unique values" In the release notes it says Only field with unique values can be used to compare

    • 💡 Feature Request: Custom App Bundle Plan (Pick Only the Apps You Need)

      Request: Allow Users to Build a Custom App Bundle (Choose Only the Apps They Need) Hi Zoho Team, I appreciate the value that Zoho One and the Plus Bundles (CRM Plus, Finance Plus, etc.) offer. However, I’m finding it difficult to get the best fit for

    • Search Feature Now Broken

      I have many hundreds of notes on Zoho Notebook but now when I search for a keyword, I only get 30 results maximum. This is unacceptable and yet another feature that has become broken on this quickly deteriorating software. Please fix immediately.

    • Restrict Zoho One Account Notifications to Admins

      Hi Zoho One Team, I hope you're doing well. We recently noticed that end users are receiving administrative pop-ups in Zoho One, such as the DKIM configuration notice (screenshot attached). This type of notification is only relevant to administrators

    • Next Page