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
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 ...Client Script: Confirmation Prompt Before Deleting Critical Data in Zoho CRM
Requirement Overview A Zoho CRM user wants to have a Confirmation Alert to ensure having a double confirmation before Clearing data from the Sensitive & Critical fields. Use-case A Bank which uses Zoho CRM to manage client interaction in an effective ...Managing cases by billing closed tasks through sales orders in Zoho CRM and creating a one-way sync between line items in sales orders and tasks powered by Kiosk
Requirement Overview: Our partner needs to generate invoices for tasks marked as "Closed" in Zoho CRM, where these tasks are linked to a "Case" record. To achieve this, they want to: Automatically create Sales Orders in Zoho CRM for each relevant ...Explore How to Sync Data between Two Zoho CRM Organizations using Self Client via API
Requirement Overview The user wants to synchronize records between two Zoho CRM organizations, so that any record created or updated in Org A is automatically reflected in Org B. i.e., whenever a record is added or modified in Zoho CRM Org A, the ...
New to Zoho LandingPage?
Zoho LandingPage Resources