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

    • Inquiry Regarding Customer Hierarchy & Sub-Customer Creation via Zoho API

      Dear Zoho Support Team, Our mutual client has requested support for implementing the Customer Hierarchy (Parent/Sub-Customer structure) within our existing workflow. At the moment, all invoices are being created in Zoho under the main (parent) customer

    • Zoho Tables is now part of Zoho One!

      Hey everyone! We've got some exciting news to share. Zoho Tables is now included in your Zoho One subscription at no extra cost. If you're already on Zoho One, head to your app list, add Zoho Tables, and get started right away. You don't need a separate

    • Which Zoho CRM tasks would you want an AI assistant to handle?

      I’ve started delegating my Zoho CRM work to AI – and many tasks now take me half the time. It has been so useful that we’re now working to make it available to everyone. Instead of clicking through records and tabs, I simply describe what needs to be

    • Introducing MCP for Zoho CommunitySpaces

      Hello everyone, Your AI assistant can now share the community workload with you. Zoho CommunitySpaces supports MCP (Model Context Protocol), so you can link an AI assistant like Claude, ChatGPT, or Cursor to your community and run it through plain language

    • Convert MBOX to PST File Using Free Methods

      MBOX is a mailbox format that is used by various email clients and services, such as Thunderbird, Apple Mail, Eudora, and Google Takeout. Yet, in order to be able to open your MBOX emails in Microsoft Outlook, you have to convert them from MBOX to PST

    • CV-Library: The Newest Source Booster in Zoho Recruit!

      We’ve expanded your sourcing toolkit — CV-Library, one of the UK’s largest and most trusted online job boards, is now available as a Source Booster in Zoho Recruit. This gives recruiters instant access to millions of UK-based candidate profiles, all without

    • Tip 52#: Ways to improve data flexibility using related list

      A related list offers an ideal solution to string related data across entities together. It enables you to pull records from any module or external source and float them as a tab within your project, sprint, epic, work item, or release detail view layout.

    • Email Blast

      Hi, How do we send an email blast to thousands of customers? The email addresses are not yet saved in Zoho Desk.

    • Zoho Books | Product updates | October 2026

      Hello users, October brings a range of new features and enhancements to Zoho Books, designed to simplify compliance, streamline accounting workflows, and improve inventory management. From the launch of the Nigeria Edition and France’s e-invoicing capabilities

    • Zoho ERP | Product updates | September 2026

      Hello users, A new month, a fresh set of updates in Zoho ERP. This month brings Netting, enhancements across our verticals, and more updates to help streamline your everyday work. Explore this month’s updates and see what’s new. Introducing Netting If

    • Widget Height were destroyed

      All widget heights in the Details Canvas view are broken.

    • Introducing Zoho POS for Restaurants

      Hello Community, We’re thrilled to announce the launch of Zoho POS for Restaurants, unveiled at the 30th milestone edition of Zoholics India 2026. Running a restaurant involves multiple teams and workflows. A single table journey, from seating a guest

    • 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

    • Task Module quick create settings

      Hello, requesting the Task module receive a quick create customization settings. We have added custom fields and have to select "More fields" at the bottom of the pop-up to access the custom fields.

    • Zoho Calendar integration for Bigin

      Hello everyone, We're excited to introduce Zoho Calendar's integration in Bigin! For a while now, users have been able to sync events in Bigin with Google Calendar and Outlook Calendar - but with this new topping, it syncs with Zoho Calendar as well.

    • Does Updating Employee Names and Profile Pictures in Zoho One Automatically Sync Across All Zoho Applications?

      Hi Zoho Team, We are currently using Zoho One in our organization and want to centrally manage employee profile information. As a Zoho One Super Admin, if I update the employee name and profile picture for all users from the Zoho One Admin Panel, will

    • Enhanced shared mailboxes: Dedicated Sent folders, Run-through filters & fresh UI

      Hi everyone, Collaborative communication is the backbone of smooth operations; whether you are handling customer support queries, managing vendor requests, or tracking sales leads. Shared mailboxes in Zoho Mail ensure your team stays on the same page

    • How to Manage Two GST Numbers / Two Companies in a Single Zoho Inventory Organization?

      Hi Team, We currently have two separate legal entities: A Proprietorship Firm with its own GSTIN A Private Limited Company with a different GSTIN However, operationally, both companies deal with the same products, and we would like to manage the physical

    • 10/22 15時〜 オンラインもくもく会のお知らせ | Zoho ワークアウト

      ユーザーの皆さま、こんにちは。コミュニティグループの中野です。 10月22日（木）開催の「Zoho ワークアウト」をご案内します。 Zoho ワークアウトは、参加者それぞれが取り組みたいテーマを持ち寄り、ユーザー同士で交流しながら、 設定・検証・運用改善を進めるオンラインの「もくもく会」です。 「試してみたい設定があるけれど、なかなか時間を取れない」 「一人で進めていると、途中で手が止まってしまう」 「他のユーザーの活用方法や工夫を聞いてみたい」 そんな方は、Zoho ワークアウトで一緒に取り組んでみませんか？

    • Reporting tags associated to Project in Zoho books?

      Hi, I know you can add reporting tags to contact, articles and transactions. Is it possible to add reporting tags to Project. We Zoho reports I would be able to generate reports by tags. Sometimes tags for a contact is different for projects (ie Projects

    • Reporting Tags in Profit and Loss Reports Analysis

      Hello Community and Zoho Books Product Team, I would like to highlight a limitation I encountered with Reporting Tags in Zoho Books. Reporting Tags Not Applying to Automated Inventory Journal Postings from Product Invoices. For inventory product invoices,

    • Spam Quarantine: Manage suspicious emails in Zoho Mail

      When an email is quarantined by spam processing, it need not always be blocked right away. Some emails may be marked incorrectly, or may need to be reviewed before a final decision is made. The Spam Quarantine feature in the Zoho Mail Admin Console gives

    • What is the difference between "Reply" and "Public Comment" in a ticket?

      Hey, my company is thinking about switching to Zoho Desk but we do not understand the difference between the "Reply" and the "Public Comment" feature. When should we use which? And why? What is the difference between them? Thank you for your help! Kindest

    • Comments Vs. Replies

      I'm curious as to the difference between a "Reply" and a "Comment" on a ticket. It appears that "Replies" are what's used to determine response time SLA's and there are also used to automatically re-open tickets. I'm just trying to understand the key differences so I can educate both our clientele and our back-end users on which function/feature to use to better improve the ticket lifecycle. If anyone has any insight it would be appreciated. Thanks!

    • CRM Address Field - States with Countries in brackets

      Hi, Could you please remove the country in brackets from the Global State List, or at least allow us to edit these entries? It looks like the brackets were added during the initial data population, perhaps by someone building the list in a spreadsheet

    • What's New in Zoho Inventory | July & August 2026

      Hello users, The July and August 2026 releases bring a range of new features and improvements across the product. From the Nigeria Edition and Super Admin enhancements to Sri Lanka IRD-compliant invoicing, Loyalty Program Management, and improvements

    • Forms data export bug

      The export csv with a password has changed for the worst. It is less secure by not allowing complex passwords. Just last week and the last year (at least) I was able to use a complex, secure password. Export CSV moreover doesn't even work if I use a simple

    • Fax and email questions

      Does Zoho offer faxing capability? If so, how to do it? And, why is has my email inbox stopped in 2019? There are no more emails since then. Also if I delete all of those emails, will they delete it from my gmail account (I'm linked to a gmail email address).

    • Create a single record from multiple images with ICR

      Hello all, Zia's Intelligent Character Recognition can now create a single record from multiple images based on the configured ICR rule. Users can upload up to three images at once, such as an ID, a passport, and a business card, and Zia will extract

    • How to present an Analytic on a CRM dashboard and filter it on loginuser id

      How to present an Analytic on a CRM dashboard and filter it on loginuser id? I want to display an Analytics pivot table (as a widget) on a CRM dashboard and have the pivot filtered on the loginuser. I want additional user-filters available, such as date,

    • CNIL - Suivi de Pixel

      Bonjour à tous, À la suite de la nouvelle recommandation de la CNIL sur les pixels de suivi dans les e-mails, savez-vous si Zoho Campaigns permet : de conditionner le suivi des ouvertures au consentement de chaque contact ; de proposer un lien permettant

    • Live connection to DS files in Zoho Creator / ChatGPT

      As an idea, we are using ChatGPT to build with Zoho Creator (outside of Zia), which is works brilliantly to assist write deluge, provide test suggesitons etc. Currently we are uploading the DS files which are very point in time, it would be great to have

    • Setting default From address when replying to request

      At the moment, if I want to reply to a request, the From field has three options, company@zohosupport.com, support@company.zohosupport.com, and support@company.com. The first two are really internal address that should never be seen by the customer and

    • Zoho Payroll: Product Updates - Q3, FY2026

      Over the past quarter, Zoho Payroll has added several updates to make payroll easier to process, configure, and manage. The most notable improvements cover bank integrations, reimbursement support, payslip enhancements, employee exit documentation, payroll

    • Convert OLM to PST on Mac and Windows Using Free Methods

      When your Outlook for Mac data is stored in an OLM file and you want to use it with Outlook for Windows, the simplest approach to transfer your emails and other mailbox information is to convert the OLM file to a PST file. OLM is primarily associated

    • Add Payment Information (like Bank details)

      I am using the Free plan of Zoho Books. I need to add the bank details/ UPI details on the invoice. How can I do that. I have added the details in the Bank Section.

    • Placeholders for Multi-Level Discount

      I am using custom templates for Invoices and all other modules. Since i have activated multi-level discount (an early-access feature from zoho) "discount at line-item and transaction level", I need placeholders for using them in my custom templates. With

    • Running Balance

      Please add automatically Running balance in ledger view. Taking lot of time, every time to add manually

    • Accounting on the Go Series-47: Effortless GSTIN Management- Auto Populate TaxPayer Details in Zoho Books Mobile App

      Hello everyone, Welcome back! Today, we're focusing on a feature specifically designed for our Indian users in the Zoho Books-Indian edition, particularly those who deal with GST compliance regularly. We understand the importance of accurate and efficient

    • URGENT: Stalled DC Migration >72 Hours - Records Locked [Ticket #: 167813877

      The DC migration was started on 1st October at 6 pm and we were informed migration period as 48 hours but even after more than 72 hours, the migration seems still in progress. We sent two emails to check the status but no responses. We need the migration

    • Next Page