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

    • another little issue

      So to get over showing prices with VAT we used the price lists and made the prices inclusive. The problem is now on the items it wants to show the orginal retail value which makes no sense. Ideas please

    • Handle Leading Zeros in a Number Field

      Hi, If I use a Number Field, set with Min 7 Digits and Max 7 Digits, and enter 0000001, it will result in 1 and an error as it removes the leading zeros, the same with entering 0012340 will result in 12340 and error. So I have to use a Text Field and

    • can't access zoho account

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

    • 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

    • HTML PDF Templates / Build From Scratch option not visible for Custom Modules

      Hi everyone, I am working with Zoho Books Custom Modules and trying to create a custom 4x4 package label PDF template using HTML/CSS. According to the official Zoho Books documentation for HTML PDF Templates, there should be an option like: Settings →

    • Virtual Option for Fields

      Hi, I would like to be able to choose another option other than Read-Only or Disabled, such as Virtual. And with Virtual, the field is shown on the form and avilable in rules, but NOT saved to the Database. A use case is having multiple Large Lists of

    • Prefix & Suffix on Single Line, Number, etc.

      Hi, I would like to have the same Prefix and Suffix that was added to the Unique ID on Text and Number Fields. Use case could be as basic as temperature, as per another Idea I have to use Single Line (Text) for a number that might have leading zeros today,

    • Customer User Fields for use in Rules

      Hi, I would like to be able to add custom fields to the users, such as Department or Role, which can then be used in Rules, Reports, etc. as a condition. A use case is limiting Global lists or Choices based on the users Custom Field, so one form can be

    • Locked out of MFA due to changing phones

      I have been locked out of my Zoho Books account since i changed my mobile phone over. I can get the OTP through the ZOHO Books software but i cant confirm using my phone app as nothing appears to authorise. I need to know how to register/set up my new

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

    • Zoho books and venmo

      Hi, Is there a way to hook Venmo into zoho books? I have a Venmo business account and want to be able to sync that. I know you can do it with the paypal integration but I dont want to use paypal for the fees and that doesnt allow me use/integrate my current

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

    • Payroll needs to automatically remit taxes, not just give me the calculations

      Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

    • Creating new Teams meeting from CRM doesn't enable Team functions in the meeting

      Hi I'm trying to set up the meeting integration and I've seen that when I create a Meeting in the CRM and set the location to Online and the Provider to Teams, and complete the boxes, add a participant etc, whilst the meeting is created in Teams, the

    • Approval Process configuration is now more flexible and fully customizable

      The Approval Process is back with an improved user experience designed to make it easier to build structured, flexible, and intuitive approval workflows. Here’s a look at some of the key enhancements: Name Your Rules & Stages You can now give each approval

    • 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

    • Introducing Approval SLA for Approval Processes

      Approvals can sometimes be delayed when approvers do not respond within the expected timeframe, which can slow down your recruitment processes. With the new Approval SLA in Zoho Recruit, you can set deadlines for approval requests and define automated

    • Introducing Microsoft Word Integration in Zoho Contracts

      We are excited to announce a new feature that brings contract authoring and negotiation in your familiar environment — the Microsoft Word Integration. What This Integration Brings The Microsoft Word Integration connects Zoho Contracts with the Microsoft

    • Map My Client Locations for Zoho CRM Extension: Turn CRM Addresses Into Action

      Hello everyone, Your CRM knows who your customers are. Now, see where they are on the interactive map directly from Zoho CRM. Introducing Map My Client Locations for Zoho CRM, an extension built for businesses that rely on sales visits, field service,

    • Scheduled and Automated Report Delivery from Zoho Projects

      Zoho Projects has useful reports including task reports, timesheet summaries, and workload charts. However, there is currently no way to schedule these reports to be automatically delivered to stakeholders on a recurring basis. This means: Project managers

    • How can I filter inactive/disable agent tickets?

      Hello, We have an user-agent that left the company and we inactive/disabled his agent. So, now I can no longer filter or search tickets that he is the current owner, or even create a rule to reassign tickets to another person when the ticket is reopen.

    • Add Reauthentication Option for Zoho Bug Tracker Integration in Zoho Desk

      Hello Zoho Desk Team, We hope you're doing well. We would like to request an enhancement to the Zoho Bug Tracker integration within Zoho Desk. Current Limitation: At the moment, there is no option to reauthenticate the Zoho Bug Tracker integration in

    • Dashboards for Customers

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

    • Collaborate Visually with Whiteboard in Zoho Projects

      Whiteboard in Zoho Projects allows you to collaborate visually by creating diagrams, annotating designs, and sketching project workflows using shapes, text, and images within project modules. Team members can work simultaneously, improving productivity

    • Fields in MS-Word Template

      With the new MS-Word integration, how does one create fields in an imported MS-Word document which can then automatically be populated with an Intake Form?

    • Displaying only unread tickets in ticket view

      Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

    • Zoho Bookings Flow Step not Triggering on Appointment booked

      I noticed yesterday that my appointment booked flows were not triggering when we had booked appointments in Zoho Bookings. I checked the trigger and noticed the trigger values updated to be defined to a workspace and service event rather than our whole

    • UCP: Why We Killed the Multi-Portal Mess and Simplified Customer Self-Service

      Let's talk about the multi-portal mess nobody wants to admit that it exists. Your customer needs an invoice from one app, wants a ticket update from another, and has a project waiting in a third, each behind its own login, its own UI, its own "was it

    • Zoho Tables is now available in Zoho One!

      Hello Zoho One users, We’re excited to announce that Zoho Tables is now included as a part of Zoho One suite! As teams grow, managing projects, approvals, inventories, campaign trackers, and operational workflows across multiple spreadsheets become difficult.

    • Zoho Publish is now available in Zoho One!

      Hello Zoho One users, We’re excited to announce that Zoho Publish is now included as part of the Zoho One suite! As businesses grow, managing Google Business Profiles across many locations becomes challenging. Business information needs to stay accurate,

    • 📣 Ask the team behind Zoho SalesIQ: Summer '26 Q&A

      Hi everyone! Following our recent webinars, Summer '26 Release: What's New in Zoho SalesIQ—where we walked you through all the new features, what they do, and how they work—and Driving the AI Evolution: Building Smarter Customer Experiences with Zoho

    • Upcoming update to field values in Zoho Books - Zoho Analytics integration

      Hello Users, We'd like to inform you of an upcoming update to the tax_category values in the Zoho Books integration for Zoho Analytics from October 20, 2026. What's Changing? tax_category field values are being renamed to align with the conventions already

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #259 - Working with Zoho CRM APIs using zoho-crm skill

      In the previous Kaizen, we introduced the zoho-crm skill and discussed how it can work with different CRM developer capabilities. The zoho-crm skill makes it easier to work with Zoho CRM without having to remember every API endpoint, request structure,

    • How can I populate dropdown data with information from another source or app?

      I want to maintain a list of items in another app (say in excel or another database) and sync those as items in a drop down menu, instead of copy pasting to import. Is this kind of a feature available?

    • Zoho Community Digest - September 2026 | Part 1

      Hi everyone, and welcome back! September opens with a strong set of updates. Zoho CRM brings workflow automation down to the subform row level and ships a new SKILL.md for AI-assisted development, Zoho Desk introduces conditional branching with Automation

    • Tip #88 – Manage Incoming Support Requests Efficiently with the Service Queue – 'Insider Insights'

      Hello Zoho Assist Community! Not every team has a dedicated IT department or a fully built-out sysadmin setup. For smaller teams, when something breaks, there's no internal ticket system to log into, no helpdesk queue to route through, and no clear way

    • Delete CRM Portal

      How do I delete portals from my CRM? I created one just to test, it is not in use and is disabled but it's existence is preventing me from marking fields in modules as "required" unless I make it 'read/write' in the portal first. I'd rather just delete

    • Zoho Books | Product updates | July 2026

      Hello users, We’re excited to bring you the latest updates in Zoho Books for July 2026! This month's release introduces Terminal Payments, CMP-08 filing for composition taxpayers, SEPA Credit Transfer support, and Self-Billed Credit Notes and Debit Notes

    • Next Page