Building extensions #8: Improve and enhance user experience with modal boxes
Modal box - What is it and where can you use it?
A modal box is a user interface pop-up window or dialog box that appears over the currently active UI screen. When prompted, the modal box deactivates all other page content until the user closes it. The modal box feature is commonly used to display information based on user input or to engage the user in some activity, such as an attachment picker, where they can proceed only after selecting an attachment.
Support offered in Zoho Projects for modal boxes
Zoho Projects provides support for modal boxes through extension development, which includes methods for opening and closing modal boxes, passing and receiving data to and from modal boxes, and so on. You can view the various methods offered by Zoho Projects to use modal boxes in this document.
In this post, we'll go over an example scenario for using a modal box in depth.
Scenario
A Zoho Desk ticket agent handles issue/feature request tickets in Zoho Projects to work on development-related requests. When the development in Zoho Projects is completed, the Desk agent provides a solution to the customer. In this case, it would be beneficial for the Desk agent to have all open Desk tickets associated with them displayed in a single, dedicated tab within Zoho Projects.
Goal
Improve, enhance, and simplify an agent's work in Zoho Projects by:
➤ Showcasing all open Desk tickets within a single tab.➤ Providing them with ticket-specific details, allowing them to view ticket details and prioritize the Zoho Projects task associated with that ticket accordingly.
Solution
To accomplish this goal, use the modal box feature as part of the widgets concept discussed earlier. A Project tab widget labeled "Desk open tickets" can be created to display all open Desk tickets associated with an agent. When a specific ticket is selected, the agent can access all relevant information about the ticket, such as its status, priority, and so on. This will allow them to prioritize and work on the appropriate task in Zoho Projects that is associated with that ticket.
Now, let's go ahead and see the components that would be required to achieve this use case solution as part of an extension.
Required components
- In order to establish a secure integration between Zoho Projects and Zoho Desk for a seamless data transfer, a connection between Zoho Projects and Zoho Desk has to be established.
- An extension configuration process includes:
- Creating an extension.
- Configuring the plugin manifest.
- Setting up the widget code.
- Display all open Zoho Desk tickets associated with an agent in a tab called "Desk open tickets."
- Incorporate the modal box feature to display ticket-specific details while the agent chooses a ticket from the list of open desk tickets.
We have already explored the steps to establish a connection, create an extension, and configure the plugin-manifest.json file as part of our earlier posts. You can refer to those resources for detailed guidance. In this case, we have already completed most of these steps (screenshots below).
Connection
We have created a connection to establish a secure integration between Zoho Projects and Zoho Desk.
Extension configuration
Extension creation: We have created a new extension for Zoho Projects.
Plugin-manifest.json configuration: Once the extension was created, we configured the plugin-manifest.json file to include the created connection and a widget.
For our extension use case, the plugin-manifest.json file is configured as shown in the below screenshot.
Setting up the widget code
Now that we've set up the other components, let's move on to writing our widget code and incorporating the modal box feature.
Displaying open tickets in "Desk open Tickets" tab code snippet - index.html (find attachment in post)
- In the code snippet, the Zoho Desk API to list all associated tickets is invoked using the Zoho Projects request JS SDK method to get associated desk tickets.
- Certain mandatory parameters must be passed to the Zoho Projects Request Method, such as the third-party URL, data object, and connection. The details for the mentioned parameters in our use case are as follows:
➤ Data object - The data that must be constructed in order to invoke the third-party URL.➤ Connection - The name of the secure connection link created and configured in the plugin-mainfest.json file, as described in the previous section.
- A dropdown list displaying all open and associated desk tickets is created using the Zoho Desk API response.
- The dropdown list value selected by the end-user (i.e. the chosen ticket) is then fetched and stored in a variable called "selected ticket ID."
- Upon clicking Get Ticket Details, a modal box instance is created and opened using the modal.create and instance methods. The selected ticket ID value is emitted using the emit method with the keyword "stored-files" when the modal box is opened.
If you require further details on how the Zoho Projects Request method works, you can refer to our earlier post which explains the working and the required parameters for invoking this method in detail.
Modal box to display the details of the chosen ticket - file.html (find attachment in post)
- In the code snippet, the value emitted using the emit method for the keyword "stored-files" is received by the on method in the modal box UI. Using the received value, a hit is made to the Zoho Desk Get tickets API using the Zoho Projects Request Method again.
- From the ticket-specific details returned as the response of the Zoho Desk Get tickets API, the necessary details are fetched and then displayed to the agent for their reference. These details help them check on the status and prioritize the relevant Zoho Projects task related to that ticket.
Now, that we have completed the setup and have all the extension components ready, let's go ahead and see the output.
Sample output:
- Enter the Zoho Projects portal and select a project.
- Select the Desk open tickets option under the Projects tab. The dropdown menu appears, displaying a list of associated open tickets. Choose the ticket for which you want more details and click on Get Ticket Details.
- The selected ticket details are displayed in the modal box.
In this example, we have used the modal box feature to display some information based on user input. Similarly, a modal box can also be used to engage the user in performing some activity, like an attachment picker, wherein they can proceed further only after choosing an attachment. We hope you found this information useful. Keep following this space for more insights!
Sign up for a Zoho Developer account and start developing extensions for Zoho products using Sigma.SEE ALSO
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
Sticky Posts
Building extensions #10: Fetch customized user inputs, store them globally at the app level, and access them across entities
This data storage concept enables you to store data related to your extension for both entity properties and extension properties. In our previous piece, we looked at how to store data for entities using entity properties. In this post, we'll look atBuilding extensions #9: Store, retrieve, and access entity-specific data in widgets using data storage
Data storage - Overview Storing data related to the extension you are working on is essential. It can be saved as key-value pairs for an entity or extension, known as entity and extension properties, respectively. Data can be saved for the following entitiesBuilding extensions #7: Create custom widgets for a simplified end-user experience
Discover the benefits of using widgets! We explored the significance of widgets, prerequisites, and the availability of JS SDK methods as part of our previous post. In this post, let's go over a detailed example of using widgets along with certain ZohoBuilding extensions #6: Custom user interfaces with Widgets
Welcome to our post on Widgets for Zoho Projects! In our last post, we explored the significance of the connections feature, showed how to use it, and provided an example use case. In this article, we'll look at the importance of widgets, another featureBuilding extensions #5: Integrating applications with Zoho Projects through Connections
In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Access to Specific Zoho Desk layout for external parties
Hi, We have a partner who handles for us sales requests from specific markets. He is not a Zoho Desk user. But we want him to b part of a specific Zoho Desk layout to handle inquiries. How to achieve it in the easiest way possible?Deposit on a Sales Order
Good day, 100% of my business is preorders, no inventory. I am trying to run away from QB for one of my businesses, but I require two options that I don't seem to find with Zoho Books. 1 - If there is a way to apply a deposit on a sales order, as withHow Does Knowledge Base Search and Article Recommendation Work?
Hello, I would like to understand how the Knowledge Base search engine works. Specifically, does it search based on: The article title only? The full article content? Both, the article and the content? Keywords? Tags? Also, how does the system determineBulk Delete Attachments
Is there a way to bulk delete attachments on the form entries? our storage is full and deleting files one by one is pain taking process.How do I sync multiple Google calendars?
I'm brand new to Zoho and I figured out how to sync my business Google calendar but I would also like to sync my personal Google calendar. How can I do this so that, at the very least, when I have personal engagements like doctor's appointments, I canAbility to Disable System Banner Messages in Chat Flow Control
Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement related to the system banner messages in Zoho SalesIQ chat flow control. Current Behavior: SalesIQ allows configuring various automatic banner/system messages such as: WaitingHow do you do ticket add ons in Backstage?
Hi Everyone, If you wanted to have general admin tickets and allow for add ons, like camping, or car or Carbon offset. What would you do? Peace RobinIdle Chat Reminders for Agent-Handled Conversations
Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement to the Idle Chat Handling functionality in Zoho SalesIQ—specifically for chats that are handled by human agents after a bot-to-agent transfer. Current Behavior: In Zobot settings,Layout Adjustment.
Hello Latha, Hope you are doing well. I wanted to check with you about adjusting the layout columns in the Service Report from the backend, as currently there is no capability for us to customize the layout from our end. Below is the output that I amSnapchat
Are there any plans to add Snapchat to Zoho Social or is there any API that we can use to integrate into Zoho.Zoho Sign "An unexpected error occured" when clients trying to sign documents
We are unable to have clients sign our documents. When attempting to complete the process an error appears saying "an unexpected error occured" and in the document history just shows "signing failure." We are at a complete standstill with no response¡Vuelven los Workshops Certificados de Zoho a España!
¡Hola usuarios de Español Zoho Community! Hace ya unos días que hemos dado la bienvenida al 2026, y promete ser un año de lo más emocionante. Y es que nos gustaría haceros nuestro particular regalo de Reyes, aunque lleguemos un poco tarde. 🎁 ¡Nos gustaríaCancel Subscription
Hi , Im want to cancel my account but without success please help me to do itHow to list services on quote instead of products
I need to create a customer facing estimate that displays our services. The default quote layout only allows products to be listed. Is there a way to correct this?Making an email campaign into a Template
I used a Zoho Campaign Template to create an email. Now I want to use this email and make it a new template, but this seems to be not possible. Am I missing something?Syncing calendar with Google Calendar doesn't work when events are sent to auto repeat
Hi... The ZOHO CRM -- GOOGLE CALENDAR sync is broken. If I create a single event on either side, sync works, but if I create an event with auto repeat on either side it doesn't work. Furthermore, events created before the sync don't show up in the calendar.Invoice status on write-off is "Paid" - how do I change this to "Written off"
HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a wayZoho Books - France
L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilitéCreating meetings from an email
Hi. Similar to Outlook, it would be helpful if a meeting can be scheduled from an email so that the attendees need not be manually entered every time it's created.Please, make writer into a content creation tool
I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather thanZohoSalesIQ.Chat cannot send messages
Chat cannot send messages. Our app implements the customer service chat window functionality by integrating the Mobilisten SDK. Recently, we encountered an issue: after successful SDK initialization and visitor registration, when the `startWithQuestion`Missed chats on WhatsApp closing after one minute
Hi, we have added WhatsApp as a channel. However, if a chat is not picked up within 2mins, the chat is marked as missed and is closed within a minute. Why are they not staying in our "missed" queue for 24 hours as per our WhatsApp preference settings?Feature Request: Add Tax ID Display on Event Tickets
Hello Backstage Team, I’ve had several clients bring up an issue regarding tax compliance when creating events. For tax purposes, they are required to show their Tax ID on the event tickets. Currently, this isn’t an option, so they have to manually generateRelease Notes | January 2026
We have rolled out a set of powerful new enhancements across Zoho Vertical Studio that bring several long-awaited capabilities to your applications. These updates focus on deeper customization, smarter automation, better reporting, and improved usabilityEmail Alias: To keep emails flowing without disruption
Email Alias acts like a nickname for a user’s primary email address, allowing multiple email addresses to deliver messages into the same mailbox. Consider the scenario where an employee manages multiple responsibilities, such as responding to sales inquiries,Zoho Sites - General Feedback
Hi Everyone-- Quick question for discussion: is it me or is working with Zoho Sites like entering the Twilight Zone? I've built many sites over the years, but this platform seems impossible. I've spent an entire day and a half trying to get a simple one-colorArchive Option in Conversation View
Hello, I have a suggestion\request to add an "Archive Thread" button in conversation view of Zoho Mail. The best suggestion I have is to put an "Archive Thread" button next to the "Label Entire Thread" button in conversation view. Most users don't justCollapsing and expanding of lists and paragraphs
hello Would you ever implement Collapsing and expanding of lists and paragraphs in zoho writer ? Best regardsAutomatic Refresh on Page?
Hi everyone, We use a page as a dashboard which shows data for the laboratory and tasks pending etc. Is there a way to set the page to automatically refresh on a X time? Many thanks TOGInventory "Bulk Actions" button - add more fields to "Bulk Update > Select a field"
Can we not get a lot more actions that are commonly used by customers into the "More Actions" button on the Inventory list? More fields listed in the Bulk Update > Select A Field? Possible Bulk update Fields Preferred Supplier ( to quickly move itemsBulk upload image option in Zoho Commerce
I dont know if I am not looking into it properly but is there no option to bulk upload images along with the products? Like after you upload the products, I will have to upload images one by one again? Can someone help me out here? And what should I enterFunction #11: Apply unused credits automatically to invoices
Today, we bring you a custom function that automatically applies unused credits from excess payments, credit notes, and retainer payments to an invoice when it is created. Prerequisites: Create a Connection named "zbooks" to successfully execute the function.Tip #60- Exploring Technician Console: Screen Resolution- 'Insider Insights'
Hello Zoho Assist Community! Have you ever started a remote session and felt the screen quality wasn’t sharp enough for detailed work? A new user recently explored Zoho Assist after installing the trial version and running a few initial tests. While theRight Moment, Right Message, Right Operator: Never Miss a High-Intent Lead
Ever been on a website or app, thinking “Should I buy this or not?” and suddenly a friendly message “Hi! How can I help you?” pops up at the perfect moment? That’s not luck. That’s timing done right. Engaging right visitors at the right moment, with theCRM 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 storageZoho CRM Workflow Automation: Activate & Deactivate Workflows Using API
Zoho has now enabled: ✅ Activate / Deactivate workflows using API ✅ Schedule workflow activation & deactivation This is extremely useful for real-world automation use cases 💡 🧩 My Use Case I created a scheduled automation that: ☀️ Activates workflows{Action Required} Re-authenticate your Google Accounts to Continue Data Sync
Hello Users! To align with Google’s latest updates on how apps access files in Google Drive, we’ve enhanced our integration to comply with the updated security and privacy standards, ensuring safer and more reliable access to your data. With this update,Function #53: Transaction Level Profitability for Invoices
Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.Project-Based Inventory Consumption and Proforma Invoice in Zoho ERP
While working with customers across different industries, we have identified a few functional questions and gaps that commonly arise—especially for project-based and service-oriented businesses. Many organizations, such as those in shipping, construction,[Free Webinar] Zoho RPA - OCR, PDF Automation, & More
Hello Everyone! Greetings from the Zoho RPA Training Team! We’re excited to invite you to our upcoming webinar on the latest release updates for Zoho RPA, where we’ll unveil powerful new capabilities designed to make your automation journey smarter, faster,Next Page