Trigger Flyout Widget in Zoho CRM using Client Script for real time field updates

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:  

  1. You will configure a Client Script to trigger when the user edits the Price field. The script will:
  2. Open a Flyout widget
  3. Send the field value to the widget
  4. Wait for a response from the widget
  5. 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
  1. Go to Setup → Developer Hub → Client Script.
  2. Click New Script.
  3. Select the appropriate Category and Event as shown in the screenshot (Event: On Change, Field: Price).
  4. Add your script code in the editor.
  5. Click Save and Publish/Activate the script.
Screenshot for reference:



Code:

  1. const WIDGET_API_NAME = "Calculator";

  3. // Step 1: Create and configure the flyout
  4. ZDK.Client.createFlyout('myFlyout', {
  5.   header: WIDGET_API_NAME,
  6.   animation_type: 3,
  7.   height: '400px',
  8.   width: '420px',
  9.   top: 'center',
  10.   right: '0'
  11. });

  13. // Step 2: Open the flyout widget and pass the Price field value
  14. ZDK.Client.getFlyout('myFlyout').open({ api_name: WIDGET_API_NAME, type: 'widget'});

  16. let response = ZDK.Client.getFlyout('myFlyout').notify({ data: ZDK.Page.getField('Price').getValue() },  { wait: true });

  18. // Step 3: Close the flyout after receiving response
  19. ZDK.Client.getFlyout('myFlyout').close();

  21. // Step 4: Update the Price field with the response
  22. 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.

  1. ZOHO.embeddedApp.on("NotifyAndWait", function (data) {
  2.   console.log("Client Script synchronous flyout notification", data);
  3.   console.log("Data received:", data.data);

  5.   // Store the incoming data (e.g., original price)
  6.   result.value = data.data.data;

  8.   // Save the Flyout ID for sending the response back
  9.   FLYOUT_ID = data.id;
  10. }

To send a response back from your widget to the Client Script, you can use the Zoho CRM JS SDK method:

  1. ZDK.Client.sendResponse(FLYOUT_ID, {
  2.   incrementedNumber: result.value  // Replace with actual computed result
  3. });

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 : 
  1. User edits the Price field.
  2. The Client Script opens the Calculator widget as a flyout.
  3. The widget receives the original price and performs the calculation.
  4. Upon clicking “Send,” the widget returns the computed value.
  5. The Price field is updated automatically with the new value.


Working demo: 



 
The source code for the widget used in the example above is available here.


Related Links  
QuoteCustom Solution Created by Francis (Vishnu) | Zoho Partner Support

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