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

    Nederlandse Hulpbronnen


      • Recent Topics

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

      • Automating CRM backup storage?

        Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

      • Cross-application Deluge calls fail when application link name starts with a number

        I encountered an issue when calling a custom function in another Zoho Creator application within the same account. The target application’s URL/application link name began with a number, similar to: 27_example_application The following cross-application

      • Bank charges

        Hello, team zoho I have a difficulty, in the form to register the payment of the customer has a field "bank charges" more when registering an expense or payment to the supplier that field does not appear. And I think that's a mistake because in my account

      • Bank Feeds - Multiple Orgs / Multiple LLCs

        Hi, We are migrating our books over from another service, and trying to connect our bank feeds. We have 3 separate LLCs, and 3 separate orgs in Zoho Books. We want to connect the bank feeds for each entity to each org. However, when we connect the 2nd

      • Go Multilingual with Instant Bot Auto-Translation

        Imagine you run a travel company with customers across different regions. Your website chatbot helps visitors discover travel packages, answers questions, and makes bookings. As your business expands into new markets, you want to offer the same experience

      • WhatsApp Coexistence

        Hello, please implement WhatsApp Coexistence, we need to track staff whatsapp chats on their PC and they need to be able to use WhatsApp on their mobile in around the office and warehouse, as we video call customers and send them product pictures. Thank

      • WORK DRIVE CUSTOMIZATION

        WORK DRIVE CUSTOMIZATION Create folder for every Case by “Contact Name “in Work Drive under Associate Deals Folder Directory: User Work Drive Accounts: Route Directory Associate Cases Case Name, Case Number Client Upload- Shared with contact (for collaboration)

      • 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

      • Vendor payment unexpectedly routed through Prepaid Expenses instead of Accounts Payable

        Hello, We are investigating an unexpected accounting behavior in Zoho Books. We created vendor bills and vendor payments for two suppliers using what appears to be the same workflow, but the journal entries are different. Vendor 1 – UZ Store (works correctly)

      • CRM wants to access other apps and services on this device (Documents area)

        Did anyone else see this today? It only seemed to popup in the Documents area. Blocking it did not stop the ability to upload files there... Why is this coming up and what apps/services is it requesting in the background? Also, is it applicable elsewhere

      • BANK CHARGES

        When paying a supplier via credit card we are charged a fee. I process the payment through payments made and then enter the fees in bank charge. However i get this message :  Bank charges are applied. Please select a bank account. And it will not let

      • Programmatic Itemized Expenses?

        It does not appear that it is possible to create itemized expenses programmatically (via the API)? Is this correct, or am I misunderstanding the situation?

      • JOIN with Select and TOP not returning data to results

        hi when I add TOP to yellow it does not return cl."Id", cl."Date",cl."Outcome", cl."Membership" from the join. Remove it and they appear. The TOP and the ON seem to work as in the number of rows returned. Doing the classic join log table and return only

      • Zoho CRM Multi-select values not translated

        Hello! I have some issue with translate custom multi-select fields in zoho CRM in other language. I download export file, but it has all my custom fields and picklist values exept multi-select fields picklist values.  Please, help me to undestand, is

      • [Free webinar] Blueprint as a business process engine - Creator Tech Connect

        Hello everyone, We are excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar comprised of pure technical sessions, where we dive deep into the

      • Allow Email Attachments to Be Opened Directly in Zoho CRM

        Hi all, It would be very helpful if attachments linked to an email in Zoho CRM could be clicked and opened directly from the email preview. Currently, the attachment names are displayed, but the experience of viewing them is unnecessarily limited. Users

      • Dashboard Metric Drill-Down Shows Stale Data

        Summary: When clicking between different metric components on a custom dashboard, the drill-down list shows data from the previously opened metric instead of the one just clicked. Steps to Reproduce: Create a custom dashboard with multiple pre-defined/templatized

      • Zoho email suddenly stopped working - any ideas to fix this ?

        Zoho email suddenly stopped working. although got this sent to me Reporting-MTA: dns; mx.zohomail.eu Arrival-Date: Wed, 26 Aug 2026 12:48:05 +0100 Original-Recipient: rfc822; Final-Recipient: rfc822; Status: 421 Action: delayed Last-Attempt-Date: 26 Aug

      • GCLID and Zoho Bookings

        Is there anyway to embed a Zoho Bookings signup on a landing page and pass the GCLID information? More specifically, can this be done using auto-tagging and not manual tagging the GCLID? I know Zappier has an integration to do this but is there a better

      • Calendar Booking - Rescheduled and cancelled appointments not deleting in G Suite calendar

        We started using the built in calendar booking feature and are really liking it! However, we are having one issue.  If a client reschedules an appointment using the reschedule feature the original appointment doesn't get deleted out of our g suite calendar

      • Automate pushing Zoho CRM backups into Zoho WorkDrive

        Through our Zoho One subscription we have both Zoho CRM and Zoho WorkDrive. We have regular backups setup in Zoho CRM. Once the backup is created, we are notified. Since we want to keep these backups for more than 7 days, we manually download them. They

      • Backup to external location (Dropbox etc)

        Dear Zoho Team, I've set the CRM Backup schedule to once a month, which when complete sends me an email. Of course I then need to manually login and download the file. Nice but VERY 20th century and relies on us humans not to fail. Can you please provide

      • Cloud backup for CRM

        This is an idea / feature request for ability to periodically export CRM backup to an external cloud provider, similar to Zoho Vault: https://www.zoho.com/vault/data-backup.html Alternatively I would help being able to access manual data backup programatically

      • Introducing throw statements in Deluge

        Hello everyone, We're introducing a powerful addition to Deluge that gives you more precise control over error handling in your scripts. Whether you're calling an external API, validating user input, or enforcing a business rule, there are moments when

      • Introducing throw statements in Deluge

        Hello everyone, We're introducing a powerful addition to Deluge that gives you more precise control over error handling in your scripts. Whether you're calling an external API, validating user input, or enforcing a business rule, there are moments when

      • Zoho Creator to Zoho Writer for prefilled documents...

        In response to the question about connecting Zoho Creator to Zoho Writer for prefilled documents, I wanted to share a working implementation that demonstrates how to use the record_id parameter with the Zoho Writer Merge API. This allows Writer to automatically

      • Upload a video to embed into an article

        How can we upload a video to embed into the article...? We can upload images but this only seems to support image files. And the video option seems to just support YouTube, Vimeo and DailyMotion which is no good, we need to create our own videos and upload

      • PAN - Aadhar Link Status

        Can Zohobooks also get latest PAN-Aadhar Linking Status from Income Tax Portal ?

      • LinkedIn RSC is now live in Zoho Recruit

        LinkedIn Recruiter System Connect (RSC) is here. Your Zoho Recruit data (candidates, jobs, notes, stage updates, resume attachments, and more) now syncs with LinkedIn in real time. Note: LinkedIn RSC is included with your LinkedIn Recruiter Corporate

      • Zoho Writer for Android - Headings

        Hello Zoho team, I have created structured doc with headings in writer web version on pc. Then I have opened it in my phone. Write is crashing while used function: menu "three dots", Document Navigation, Headings. Zoho Writer for Android 6.1.4 Samsung

      • The in between line spacing management

        In the Microsoft Word, when we write something there is a tool from where we can manage the line spacing. Here in writer app in mobile it is by default 1.5. I request Zoho Team to give the option from where I can control Line Spacing, Remove space between

      • Zoho Books | Product updates | September 2026

        Hello Partners, We've rolled out new updates to Zoho Books. From a brand-new Nigeria edition expanding our presence on the African continent to the new Super Admin privilege, here's everything that's new this month. Nigeria Edition Now Live [Nigeria Edition]

      • Pulling data from lookup fields

        If I try to pull in CRM data from a lookup field, it only shows a number and not the actual name. Is there a way to get around this? It impossible to do reports using lookup field data.

      • CRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users

        Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storage

      • Marketing Tip #49: Set up Meta Pixel and turn store visitors into repeat buyers

        Most of your store visitors don't buy on their first visit. They browse, get distracted, and leave. Without a way to reach them again, that traffic is gone forever. Meta Pixel changes that. What is Meta Pixel? Meta Pixel (previously called Facebook Pixel)

      • unable to join meeting due to speaker issue

        unable to join meeting due to speaker issue

      • Unlock smarter scheduling with AI in Zoho Bookings

        Hello everyone! Scheduling touches more parts of a business than we often realize. Teams need to coordinate. Workflows need to move. Business apps need to connect. And with AI, the way we interact with scheduling is changing too. Join our upcoming live

      • 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

      • I want to delete payment detail of my cards from the system.

        I want to delete payment detail of my cards from the system.

      • Next Page