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

      • ZeptoMail is now Zoho CPaaS!

        ZeptoMail has a new name and it’s expanding beyond email. With ZeptoMail, our focus was simple : help developers and businesses with reliable transactional emails. At the time, email handled a big part of those customer moments. But transactional communication

      • Button Display Conditions

        Hi Guys, Is it at all possible to have extra button conditions? Context: We have data in our deals module which has a custom button which converts the deal into contacts + set up relationships between them. At the end of the conversion we set a field

      • WhatsApp Business Message Pricing Update: Effective October 1, 2026

        Hi everyone, Starting October 1, 2026, Meta is updating how WhatsApp Business messages are charged. This guide explains the new per-message pricing model, how message categories work, and what changes for service messages specifically. How Meta charges

      • Cannot login to Zoho Mail on Mobile App

        Hi, I am the super administrator for our company's email account. I just created 4 new email accounts, and my users have downloaded the zoho mail app. However they are unable to login to their email on the app. It kept saying "User does not exist". Please help! Thank you.

      • Zoho Projects - Linking CRM Deals to Projects via API without sending customer contact email invitation to project portal

        We are using the Zoho CRM and Zoho Projects APIs to automatically create a project in Zoho Projects and then associate that project with the relevant Deal in Zoho CRM. The API process is working in that the project is created successfully and appears

      • In ZOHO Books, it appears that there is a maximum of 200 Shipping addresses.

        I am using ZOHO Books and what you call a shipping address, we use as a Service address. I have a couple of customers that have Many Many service addresses, I am starting to get an error saying too many shipping addresses. Additionally, is there a way

      • Notice to Zoho Community Members: Updated Zoho Community Guidelines

        Hello everyone, We have updated the Zoho Community Guidelines to keep the exchanges original, relevant, and meaningful. The major focus of this update is on AI use, and on sharing apps, extensions or other software in the community. This community works

      • How to add a fee based on payment method

        I currently accept both ACH payments and credit card. I want to add a 3% fee to a number of my subscription plans if the customer chooses to use a credit card (and not ACH/checking). How do I do this? Is there an in-built feature, or would i have to create

      • How to charge Convenience fee OR payment gateway charges to the end client who is paying the invoice?

        Hello, I am creating this topic after having discussions with various sets of users and have understood that with people moving more and more to digital payments, it is important for the client to enable the "Convenience fee" kind of scenario. I have

      • Can't copy and paste from email in Zoho email client

        I don't know what happened, but I have lost the ability to cut and paste information from an email.

      • Hide Inactive Social Sign-In Providers from Login Screen

        Hello Zoho Team, We hope you are doing well. Currently, Zoho One allows admins to configure security policies and enable or disable Social Sign-In options for third-party providers such as Apple, Google, Microsoft, LinkedIn, Yahoo, Twitter, Facebook,

      • How does Zoho handle the daylight savings time change in Alberta?

        Alberta has just made the decision to get rid of daylight savings. This means that as of November 1, 2026 we remain on UTC-6 year-round. We have timing errors in meetings scheduled after that For example, we scheduled meetings in late November at 9:00

      • Shared Mailbox in iOS app

        Hi, On the desktop I am using a Shared mailbox for our company's general mailbox that somebody else should be able to view. In the iOS app however I can't find it? Old sources on the internet says this isn't possible but that can't be right? Somebody

      • Issues with Zoho Insights and email template web links

        Is anyone else out there having the same issue we're experiencing? When we send out an email template, Zoho insights is converting the URLs from the URL we insert in to the template in to one of the form https://mailer1.zohoinsights.com/ocgeturl/2d6f.327230a?l=0ed7f050-5b31-11eb-a1a...

      • 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

      • Object-level edit permissions

        Hi, we are currently running into a limitation with permissions inside larger workspaces. Our use case is a central Analytics workspace that contains many tables, Query Tables, reports and dashboards used by different teams. We would like to allow certain

      • inventory removal at packing list or shipment.

        currently our system is set to remove inventory at invoice. This is creating an inventory nightmare? Is it possible to change the settings to remove the item from inventory at either the packing slip stage or shipping the item.

      • Item description is not displayed

        I added the item description while importing the new item through the bulk item Excel sheet, and the import was completed successfully. However, I cannot see the description in the item details under Inventory. Could anyone please advise how to make the

      • Shared inbox unable to see replies

        Hi we are a small company me and someone else, we have a shared inbox for our sale@ and contact@ however we have this issue where by if i reply to an email or the other person reply to the email, it does not show it to them and therefore we end up replying

      • Record Payment - Auto Populate Amount as payments are selected

        When recording payments you have the option of clicking on "Pay in Full" next to the bill which automatically adds the total at the bottom of the page next to "Amount used for payments" but this should also auto populate / update the total at the top

      • Can't set conditional layout rule on lookup field in Zoho CRM

        Namaskaram Zoho CRM team, Usually any fields of module except mandatory fields can be hide using conditional layout rules. But that can't be set on lookup fields event that is not a mandatory fields. Many users are in need of that. Crafted with ❤️ Zoho

      • [Request] Pivot filter date option : from set date to relative value ie from 01Jan to LastMonth

        I don't think I can currently do this... but it's worth asking if it's possible. My use case is concerning annual leave which is calculated from the beginning of the calendar year (01Jan) then each month I want to have details of leave taken etc... In

      • Need to be able to apply layout rules to 'Multi Pick List'

        Currently, we are unable to apply layout rules to fields that are 'Multi Pick List'. This means we have to instead use checkbox fields, but they are inefficient. For example, we use the Multi Pick List to list our products. However, we're unable to apply

      • 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

      • My "trigger" panel disappear from my workflow ...

        Hello, I want to add a trigger to an email sequence, but the "trigger" panel has disappeared when I want to modify ...I used a predefined template to create this sequence, is that because of that? Thank you. I have attached a screenshot to you

      • Workflow Automation Not Triggering

        My Zoho CRM workflow sometimes doesn’t trigger when a record is updated, even though the workflow criteria appear to be met. What should I check to find out why the workflow is being skipped?

      • AI Calling

        Hi, does anyone have experience or any thoughts on AI Calling. Getting AI to make calls on behalf of your company. We are looking into it, but are finding it difficult to get info and providers that can assist.

      • Zoho Sheet as KB Document

        It would be nice if Zia Agents could take Zoho Sheets as part of the knowledge base. The use case here is that it's infinitely easier for humans to maintain a spreadsheet table than any .md / TAML / JSON document. For situations where humans are responsible

      • Ask the Experts: Five-hour live Q&A session with Zoho WorkDrive product experts

        Have questions about WorkDrive 5.0? Let’s talk! We recently launched Zoho WorkDrive 5.0, packed with powerful updates to help your team work smarter, stay secure, and get more value from your business content. From content-centric workflows and AI-powered

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

      • Zoho Community Digest - September 2026 | Part 3

        Hi everyone, and welcome back! Zoho CRM launches PRM for partner management, Bigin builds this year's Apple AI updates into the app, and Snapchat is now a connected channel in Zoho Social. There are also three notices worth reading, including WhatsApp

      • ERROR: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

        I can add new user for mail, i received message error about; This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details Try creating user name; instagram@eficaztecnologia.com.br

      • Support for Custom Fonts in Zoho Recruit Career Site and Candidate Portal

        Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to use custom fonts in the Zoho Recruit Career Site and Candidate Portal. Currently only the default fonts (Roboto, Lato, and Montserrat) are available. While these

      • Ability to filter services and parts based on a field in the Work Order

        Hell FSM team, We have a customer with 2 value streams using Zoho FSM. Each value stream uses different products, at different price point. Currently, all of the products are accessible when creating a work order and modifying a service appointment, which

      • SubTotaks for Item Headers in Estimates

        Hi, Apparently, one can add Item Headers in Estimates in Zoho Books. Is this feature like an Estimate section with a SubTotals for each Item Header/Section? Or is the Item Header just a Title and cannot be SubTotalized? Thank You

      • Sync of products and orders between Zoho Inventory, Zoho Books and Shopify

        Good Day I migrated from QuickBooks to Zoho Books and Zoho Inventory at the beginning of this year. The migration team assisted with importing my data, but I am currently experiencing multiple issues affecting syncing between Shopify and Zoho. 1. SKU

      • Best practices for importing phone numbers

        I've recently found a problem with my phone provider, integrated with Zoho CRM, where a phone number that starts with 00 instead of + won't work. The problem has no solution: they tell me to replace all 00 with + I've always preferred using 00 instead

      • Copy + Paste in Notes: Text color and text background are not retained

        I've recently started using Zoho Notebook as an Evernote replacement. When copying and pasting text within Zoho Notes, I notice that the formatting of the text (text color and background color) is not retained when pasting. Only the attributes "Bold"

      • Add Comprehensive Accessibility Features to Zoho Writer

        Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current

      • MAKING ENTRY TIME MORE USER FRIENDLY AND FASTER O PREVENT TAB TIME

        I AM CURIOUS TO KNOW IF WE CAN MAKE IT MORE USER FRIENDLY WHILE MAKING BILLS , I MAJORLY USE OVER DESKTOP SO I AM SUGGESTING TO REMOVE TAB TIME WHILE ENTERING BILL OR MAKING INVOICE DIRECT JUMP TO ONLY REGULAR PARTS OF THE BILL . YOURS RAKESH 782866

      • Next Page