Launch and Sync a Custom Widget in Flyout Mode Using Client Script in Zoho CRM
Summary:
This article explains how to launch a custom widget as a flyout in Zoho CRM using Client Script, pass data from a CRM field to the widget, and update the same field based on the widget’s response.
Requirement Overview:
Certain use cases require custom interactions when a user edits a field in Zoho CRM.9 For example, launching a calculator or custom logic interface without navigating away from the record. By using a Client Script with flyout configuration, you can open widgets in a dedicated pane (flyout), pass data from the CRM record, and update fields based on the widget’s output.
Deploy Client Script in Zoho CRM:
- You will configure a Client Script to trigger when the user edits the Price field. The script will:
- Open a Flyout widget
- Send the field value to the widget
- Wait for a response from the widget
- Update the Price field with the returned value
Use Case
Scenario:
When a user edits the Price field, a calculator widget opens as a Flyout. The field’s value is passed to the widget for computation. Once a new value is calculated in the widget, it sends the result back to the Client Script, which then updates the same field in CRM.
Configuration:
Client Script – Create and Handle Flyout
Create a Client Script and run it on change of the
Price field-
Go to Setup → Developer Hub → Client Script.
-
Click New Script.
-
Select the appropriate Category and Event as shown in the screenshot (Event: On Change, Field: Price).
-
Add your script code in the editor.
-
Click Save and Publish/Activate the script.
Screenshot for reference:
Code:
- const WIDGET_API_NAME = "Calculator";
- // Step 1: Create and configure the flyout
- ZDK.Client.createFlyout('myFlyout', {
- header: WIDGET_API_NAME,
- animation_type: 3,
- height: '400px',
- width: '420px',
- top: 'center',
- right: '0'
- });
- // Step 2: Open the flyout widget and pass the Price field value
- ZDK.Client.getFlyout('myFlyout').open({ api_name: WIDGET_API_NAME, type: 'widget'});
- let response = ZDK.Client.getFlyout('myFlyout').notify({ data: ZDK.Page.getField('Price').getValue() }, { wait: true });
- // Step 3: Close the flyout after receiving response
- ZDK.Client.getFlyout('myFlyout').close();
- // Step 4: Update the Price field with the response
- ZDK.Page.getField('Price').setValue(response.incrementedNumber);
In the widget code, register the following event listener to wait for the flyout and receive data from the client script.
- ZOHO.embeddedApp.on("NotifyAndWait", function (data) {
- console.log("Client Script synchronous flyout notification", data);
- console.log("Data received:", data.data);
- // Store the incoming data (e.g., original price)
- result.value = data.data.data;
- // Save the Flyout ID for sending the response back
- FLYOUT_ID = data.id;
- }
To send a response back from your widget to the Client Script, you can use the Zoho CRM JS SDK method:
- ZDK.Client.sendResponse(FLYOUT_ID, {
- incrementedNumber: result.value // Replace with actual computed result
- });
In the widget UI, add a “Send Result” button that, on click, computes the value and calls the SDK method to return it to the Client Script.
Example Workflow :
- User edits the Price field.
- The Client Script opens the Calculator widget as a flyout.
- The widget receives the original price and performs the calculation.
- Upon clicking “Send,” the widget returns the computed value.
- The Price field is updated automatically with the new value.
Working demo:
Related Links
Custom Solution Created by Francis (Vishnu) | Zoho Partner SupportIf you need any further clarifications, please don’t hesitate to contact partner-support@zohocorp.com.
Additionally, we kindly ask all "Europe and UK partners" to reach out to partner-support@eu.zohocorp.com.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
How to Auto Populate Product List Price in Zoho CRM Subform Using Client Script
Requirement Overview The customer wants to automatically update and display the List Price of the Product in the Subform of the custom module (i.e., Pre-Orders) based on the selected Price Book (i.e., Lookup field) stored in the same module. This ...Guide: Learn How to Deploy Client Script across Zoho CRM and Best Practices to Optimizing Code
In this article, we will explore the "Client Script" features in Zoho CRM, along with detailed guidance on how users can deploy these scripts across different places within the Zoho CRM organization. Client Script Client Script is a piece of ...Learn How to Open Email Composer Automatically with Template in Zoho CRM using Client Script
Requirement Overview A Zoho CRM user wants to automate and simplify the process of sending a repetitive emails to different customers based on user's specific action, instead of manual clicking on Send Email button each time. Use-case In a Product ...Client Script: Effective way to handle Data Validation before Lead Conversion in Zoho CRM
Requirement Overview A Zoho CRM organization wants to have validation within Lead module for all Contact's mandatory fields before Lead Conversion. i.e. The Business need an easier & best way to validate lead data before Lead Conversion using default ...Client Script: How to update in Record Detail Page with One-Time Auto Refresh for OnLoad scripts
Requirement Overview A Zoho CRM user is using a Client Script to update records in the detail page. However, users often face challenges when updating fields or subforms on the Record Detail Page using default methods. Also, a sales representative ...
New to Zoho LandingPage?
Zoho LandingPage Resources