Handling modal boxes to enhance user experience

Handling modal boxes to enhance user experience

In our previous post, we explored creating custom graphical user interfaces using widgets. In this post, we'll learn about enhancing user experience through modal boxes.

What is a modal box, and where is it used?

A modal box is essentially a widget interface that appears over the currently active UI or screen and deactivates all other page content until the modal box is closed. The modal box becomes the active focused screen. It can be used to prompt the user to enter information or to display information to the user on a new UI that pops up from the current UI.



Support for modal boxes

Zoho Sprints offers support for opening and closing a modal box widget, and it also allows data communication between these widgets as part of the extension development process. See the supported methods for handling modal boxes in Zoho Sprints extension development in our documentation.

How do the supported methods work?


The above image lists the methods supported in Zoho Sprints for handling modal boxes and illustrates their behavior. Now, let's have a quick overview of how the modal box is invoked and how data flows from the parent UI to the modal box UI.

1. The sdk.dispatch("zs-modal", {url,options}) method is invoked from the parent UI to open a modal box UI.

2. Once the method is invoked, a widget app ID is returned. The modal box is opened and an instance (WidgetApp) is created using the returned widget app ID.

3. A trigger event is set in the modal box by providing a name for the event using the sdk.trigger method. This sdk.trigger method is used to notify the parent widget that the modal box has opened and is ready to receive data.

4. In the parent UI, the WidgetApp.on method is invoked to listen to the trigger event set in the modal box. This method is invoked using the following parameters: trigger event name (set in the modal box widget) and a callback function.

Note: When the sdk.trigger method (mentioned in step 3) is invoked in the modal box widget, it searches for the widget instance that listens to it (based on the trigger event name), and, if found, it executes the function associated with it the parent UI.

➤ Inside this executed function, the widgetApp.emit method is invoked to emit the required data from the parent UI to the modal box widget.

5. In the modal box widget, the sdk.on method can be invoked to listen to the data emitted from the parent UI.

6. When the modal box needs to be closed, the sdk.dispatch("zs-destroy") method can be invoked to close the opened modal box.

This is a generic flow of how the modal box methods are utilized and handled in a Zoho Sprints extension. To understand these in detail, let's check out a use case involving a modal box.

Use case
In the previous post, we demonstrated widgets with a connection between Zoho Sprints and Zoho Bookings that allowed users to book an appointment with a team member allocated to a work item directly from the Zoho Sprints work item page. The output is attached below for reference.



Now, let's use a modal box to enhance this. We'll provide a modal box to allow the user to reschedule the booked appointment if they want to modify the staff or the time of the appointment they booked.

Steps to update the extension

To achieve the above-mentioned extension functionality, along with the other components (creating extension, configuring plugin-manifest.json and creating connection) discussed in the previous post, few other components are required.

1. Add an additional button called Reschedule Appointment as part of the existing Book an Appointment widget on click of which the new modal box will be opened.
2. Create and open a modal box widget to reschedule the appointment by changing the staff and time if needed.

➤ Reschedule Appointment button code in the Book an Appointment widget - This is the code snippet for the Reschedule Appointment button in the Book an Appointment widget.

//Functionality of reschedule appointment button widget
Util.rescheduleappointment = function() {
var message = "Do you want to reschedule the appointment you booked now?";

//Construct and pass the URL and data to open up the modal box
function SuccessHandler(response) {
var url = "/app/reschedule.html";
var data = {
"staffid": staffid,
"serviceid": serviceid,
"selecteddate": selecteddate,
"bookingid": bookingid
};
var width = "800px";
var height = "500px";
sdk.dispatch("zs-modal", {
url,
options: {
width,
height
}
}).then(widgetId => {
const widgetApp = sdk.getWidget(widgetId);

//To open a modal box and emit data to it
widgetApp.on("model.open", () => {
widgetApp.emit("model.view", data);
});
});
}
function FailureHandler(error) {
console.error("Error:", error);
}

//Confirmation message that appears on click of Reschedule Appointment button
sdk.dispatch("zs-confirm-message", {message })
.then(SuccessHandler)//If Yes, SuccessHandler function will be invoked
.catch(FailureHandler);//If Cancel, FailureHandler function will be invoked
}
  1. In the above Book an Appointment widget code, when a user clicks the Reschedule Appointment button, a confirmation message asks if they want to proceed or cancel rescheduling the appointment. This confirmation message is prompted to the user using the zs-confirm-message method.
  2. If they choose to proceed, then the SuccessHandler method is invoked where the URL and data (staff ID, service ID, selected date, and booking ID) are passed to the modal box for rescheduling the appointment. Once these details are constructed, the zs-modal method is used to invoke and open the modal box.
Using the instance of the modal box widget that was created, when the modal box widget is opened, it is captured using the modal.open() method. The model.emit() method is used to emit and pass the constructed data to the modal box.

➤ Modal box widget to reschedule appointment - The modal box UI allows the user to change the staff and time of the appointment and reschedule the appointment.

Reschedule Appointment - Please find the widget code attached in the post.
  1. In this code snippet, the data passed from the Book an Appointment widget is received using the sdk.on method.
  2. The Zoho Bookings API to get staff members is invoked using the request method. Similarly, the fetch availability API is invoked using the request method. For both cases, the connection created for Zoho Bookings is passed as a parameter to request method.
  3. Next, using the Reschedule Appointment button, based on the staff and the time slot chosen, the appointment is rescheduled by invoking the reschedule appointment API. The booking ID parameter received from the Book an Appointment widget is sent as a parameter to the book appointment API along with the staff ID and the time slot chosen by the user in the modal box widget.
  4. The zs-destroy method to close the modal box widget is invoked as part of the Reschule Appointment button functionality in order to close the modal box once the appointment has been rescheduled.
Note: You can customize the height and width of the modal box to your requirements. If you need to access the primary widget alongside the modal box widget, you can customize the size of your modal box accordingly.

Now that we have explored both the widgets, let's go ahead and test the extension functionality.

Testing the extension
  1. You can test the widget using the Run option in the Sigma cloud editor. For detailed guidance on testing the extension, read our post here.
  2. Once you enter into the test environment, install the extension and authorize the connections.
  3. Next, enter into the work item and access the Book an Appointment widget. Choose the staff, service, and date, and click Check Availability. The available time slots will be displayed. Choose a time slot and click Book Appointment. An appointment will be successfully booked in Zoho Bookings.
  4. If you want to reschedule the appointment, click Reschedule Appointment. You will be prompted with a confirmation message if you want to reschedule.
  5. If you choose to proceed, it will open the modal box where you can change the staff and time slot. Once done, click Reschedule Appointment in the modal box. The appointment will be successfully rescheduled.

In this post we have explored the advantages of using modal boxes to enhance the end-user experience. We hope you found this information useful. Keep following this space for more updates. Stay tuned!


SEE ALSO

Next>>

      • Recent Topics

      • [IDEA] Bring Layout - Conditional Rules and Client Scripts to Zoho Books

        The problem We run Zoho Books with two e-invoicing integrations: myData (Greek tax authority, AADE) and PEPPOL (EU e-invoicing). Between the two, our Invoice form carries a large number of custom fields — document type codes, VAT exemption categories,

      • Last four Digit field in Zoho Payment Received

        One of our client's payment received doc has Notes, Last four digit and Transaction ID fields set, I couldn't find api parameter for these fields in the documentation... when I checked the site, it's not custom fields as well. where do i find it, any

      • Automatically remove commas

        Team, Please be consistent in Zoho Books. In Payments, you have commas here: But when we copy and paste the amount in the Payments Made field, it does not accept it because the default setting is no commas. Please have Zoho Books remove commas autom

      • Show my cost or profit while creating estimate

        Hi, While creating estimate it becomes very important to know exact profit or purchased price of the products at one side just for our reference so we can decide whether we can offer better disc or not .

      • Admin Logging in as another User

        How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Latest Update (27th April 2026): With the early

      • Zoho CRM Layout Rules: Nine New Actions, Profile-Based Execution, and Interactive Preview

        Hello everyone, Availability: This feature is now available for all users. We’re excited to announce powerful new enhancements to Layout Rules in Zoho CRM - a feature built to guide our teams through form-filling by showing the right information to the

      • Previewing attachments in email composer (Zoho CRM)

        When I am sending an email from a contact's record, when I am in the compose email screen, if I add an attachment to the email, I cannot then click on the attachment to view it to see if it is in fact the correct attachment before sending. In Outlook I can do this. Can you please look into incorporating this into future updates?   Thank you, Bianca.

      • Lookups and Custom Modules

        I created a Custom Module that I'm calling "Item Purchasing Group". This module will store information for groups of Items that must be purchased together (including minimum overall quantities and/or values, etc.). This will have a one-to-many relationship

      • How to add custom lookup-type field to meeting module form in Zoho CRM

        We need to have a lookup field to a custom module's record in Zoho CRM. But it appears that look-up fields are not enabled in Meetings/Events module in Zoho CRM. How do I design/implement a custom look-up type field that will lookup records from custom

      • can't access zoho account

        I can't log in to my zoho account, can you help me

      • Auto sync Photo storage

        Hello I am new to Zoho Workdrive and was wondering if the is a way of automatically syncing photos on my Android phone to my workdrive as want to move away from Google? Thanks

      • Has anyone integrated Zoho with Go High Level (GHL)? Looking for guidance

        Hi everyone, I’m exploring the possibility of integrating Zoho applications with Go High Level (GHL) and wanted to check if anyone in the community has experience with this. Specifically, I’m interested in understanding: Whether a direct integration is

      • Updating Unit Code for New Item Creation, Quote and Invoicing is so inconvenient

        The Zoho Team has implemented many updates, but these updates should be optional. Before rolling out any new feature, they should already have a solution in place that allows users to remove or disable it if they choose not to use it. Just yesterday,

      • Item/service subtotal

        Just discovered & really pleased that we can drag to re-order the line items in Sales orders & Invoices, a very nice feature which doesn't seem to be documented? It would be nice to be able to insert a subtotal as a line item to complete this great feature

      • The reason I switched away from Zoho Notebook

        My main reason for switching to Zoho was driven by three core principles: moving away from US-based products, keeping my data within India as much as possible, and supporting Indian companies. With that intent, I’ve been actively de-Googling my digital

      • I want to prefill CRM Account information using the GSTIN of the Customer

        Currently i need to add account details manually in zoho crm and when it syncs in zoho books manual working needs to be done. Whereas in zoho books i can prefill the customer details using the GSTIN which is great feature. Can the same be enabled for

      • #5 Is This Actually The Right Tool For Me?

        Day 5: Before Meera brought six months of business history into Zoho Invoice, she stopped and asked herself a very sensible question: Is this actually the right tool for me? It is much easier to ask that now than after moving all your data. The Usual

      • Timesheet entry and comment on the actual timesheet

        Dear madam/sir, It would be really helpful if we could add an option to comment on a specific timesheet entry, after the employee logs a time-log. Would that be possible in the future? Or can you suggest another way to do this?

      • OpenAI Is Moving to the Responses API: Here's What It Means for SalesIQ

        OpenAI has deprecated its Assistants API and is moving to the Responses API. If you're using OpenAI Assistants with SalesIQ, you may be wondering if you need to make any changes to your existing setup. You don't. SalesIQ has already taken care of the

      • Need Native Support for docx files in Zoho Writer

        Absolutely love Zoho Writer, but often need to share files by email with people who are in the Office ecosystem. Downloading a file as docx, then sending it by email, getting the comments back, converting it to Zoho format, editing it, then converting

      • CRM integration issues

        hi Just start testing Campaigns. Read up on up on these issues but can not find an answer. I am super admin. 1) its only showing 1002 contacts, I have a 2500 plan which is confirmed in dashboard. I says it sync'd 1400. I've looked at missing contacts,

      • What's New in Zoho Expense: Integrated Business Travel and AI-Powered Expense Management

        This release brings a wide range of updates across Zoho Expense, including new AI-powered capabilities, enhancements to corporate cards, expense management, audits, and more. Keep reading to know how the new updates can transform your travel and expense

      • ChatGPT Plugin / MCP Server auth error

        Hi all I'm trying to connect the ChatGPT plugin for Zoho CRM but after username stage of the auth process, I get this error from the URL https://mcp.zoho.eu/mcp-client/ {"error_description":"Invalid request url, Request is not as per defined in oauth

      • Project Management Platforms for AI Agents: What Matters Most?

        Zoho Projects is already going beyond basic AI assistance with MCP, AI Bridge, and integrations that let AI models access project data and perform actions. That raises an interesting question: what should a project management platform for AI agents actually

      • Cliq iOS can't see shared screen

        Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

      • Sync workdrive feature inside ZohoCRM

        Hi, I'm exploring the new workdrive/ZohoCRM connector released by Zoho to replace the free extension workdriveforCRM which is decomissioned https://marketplace.zoho.com/app/crm/zoho-workdrive-for-zoho-crm I'm rather upset with this long awaited feature,

      • Adding Custom Status Options in Work Order Action Menu

        Hello FSM Team, We would like to inquire if it is possible to add more custom options in the Work Order action/status dropdown (e.g., Cancel, Terminate, Non-Billable, Void, etc.). Currently, the available options are limited, and we are unable to customize

      • Timesheet Task Icons

        In the image below which shows the task field drop down when creating a timesheet against a project and task. What do the icons mean the the right side column against each task? I can't find any documentation or guide that explains what the no entry sign,

      • Open Records in a New Browser Tab

        Hi FSM Team, Just a suggestion: It would be helpful to have a right-click → Open in New Tab option in FSM, similar to CRM. This should ideally work for any clickable record or module, allowing users to open multiple records in separate tabs without losing

      • Facturation électronique 2026 - obligation dès le 1er septembre 2026

        Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,

      • Marketing Tip #18: Make your online store mobile-friendly to improve traffic

        Most online shoppers browse on their phones first. If your store is hard to read, slow to load, or tricky to navigate on mobile, they’ll bounce fast. A mobile-friendly store doesn’t just look nice; it improves engagement, reduces drop-offs, and helps

      • Cannot add note to record on mobile

        In the latest version of the mobile app - if a record already has notes associated with it - you can add a note via the mobile app - if a record does not have previous notes there is no way to add a new one - it allows me only to send email

      • Dashboards for Customers

        Is it possible to build dashboards for each customers in the community for their tickets?

      • Custom color coding for your entities

        Our brains are fine tuned to recognize colors before any text or shapes, making color coding a powerful tool to organize data and find items quickly. Color coding of our day-to-day work help with quickly processing the information, reducing cognitive

      • The Social Wall: August 2026

        Hello everyone. Welcome to the August 2026 edition of The Social Wall. This month, we're bringing you updates that make it easier to reach your audience, manage more channels, and streamline your publishing workflow. Here’s what’s new. WhatsApp bulk messaging

      • Check out in Meetings

        Why there is no check out in Meetings of Zoho CRM, very difficult to track

      • How do I get to "Admin Panel"

        I just started a Cliq account. I am the sole administrator. As I read the documentation, I keep seeing reference to an "Admin Panel". I see no way to access this from my Cliq account. How do I access this panel?

      • 【初開催！ オンライン】Zoho Campaigns メール配信の基礎・活用勉強会を開催します！ 10/15 参加無料

        ユーザーの皆さま、こんにちは。 Zoho コミュニティグループの中野です。 Zoho ユーザーコミュニティ初となる、メールマーケティングをテーマにしたオンライン勉強会を開催します！ ▶︎イベント詳細・参加登録はこちら 今回取り上げるサービスは「Zoho Campaigns」です。 「Zoho CRMとZoho Campaignsのどちらからメールを配信すればよいか分からない」 「一斉配信はできるようになったけれど、現在のリスト管理や設定が正しいか不安」 「メールを送るだけで終わり、配信後の改善につなげられていない」

      • Marketing Tip #46: Run flash sales the right way

        A flash sale can do a lot for your store. It can clear slow-moving inventory, spike revenue on a slow day, or reward your most loyal customers. But if done carelessly, flash sales can backfire. Customers start expecting discounts, stop buying at full

      • Introducing Smart Fields in Zoho Forms

        Hello form builders! We are excited to introduce Smart Fields in Zoho Forms - a faster way to add calculations to your forms without writing formulas. Instead of creating multiple fields and configuring complex calculations yourself, you can now drag

      • Next Page