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
Note sync turn off
Hi, Is it possible to turn off notes sync between task notes and the parent module? (Account/Deal)Basic Plan Active but Survey Creation Still Limited to 3 Surveys
I have an active Basic (Monthly) subscription (valid period: Dec 24, 2025 – Jan 24, 2026), but the system still limits survey creation to only 3 surveys, which matches Free plan behavior. The subscription appears active in Portal Information, however2025 in Review: Powering Field Services Forward—One Feature at a Time
As 2025 draws to a close, it’s time to pause and reflect on a year of meaningful progress at Zoho FSM. This year was all about listening closely to our customers and partners, building with purpose, and continuously improving the way field service teamsAPI Support for Creating Invoices with Batch-Tracked Items
Hi Zoho Community, I am working on an integration where we create invoices in ERPNext and push them to Zoho Books. I need to send batch-tracked items (batch numbers) when creating invoices. I could not find any reference in the Zoho Books API documentation.New to automation - please help
Hi there! We are new to automations in Zoho. We built out one automation campaign and it seems to be firing off for some people but others not. Please advise what's the best practice or if anything we should tweak. Thank you so much!Unable to Create Zoho Booking via the Book Appointment API
Its giving the below error { "response": { "errormessage": "Error setting value for the variable:customer_details\n null", "status": "Error" } } Request: POST Url: https://www.zohoapis.in/bookings/v1/json/appointment attached Zoho-oauthtokenTask Details on task template
When creating a task template in settings that task details seem to be missing. Is it not possible to set the details of a task, such as the priority, type, reminder settings, and custom field values?Building Toppings #3 -Testing and publishing Bigin toppings
Hey Biginners! In previous forum posts, we discussed what a Bigin topping is and explored the Bigin Developer Console's features. In this post, we're going to create a topping from scratch and discuss how to test and publish it. Our topping will automatemarkdown files?
How can I import a markdown file into a note?Mail to Zoho Notebook
In the Instuctiosn I faound as email add@notebook.app In my account I see add@eu.notebook.app What is correct pleaseAuto-Invite Users to Portals in Zoho CRM based on Conditions
Hello Everyone, You can now automate portal invitations in Zoho CRM with the new Auto-Invite users feature in Portal management. No more manually enabling portal access one by one. With this enhancement, you can automatically send invites for users toGrowth You can Count On: Zoho Billing's 2025 Journey
As we wrap up 2025, we’re reflecting on a year rooted in steady progress and meaningful growth for Zoho Billing. Every enhancement we have introduced was built to support scalable and reliable billing growth for your business. From launching the EnterpriseNeed help with creating workflow with Bigin and Clickup
Can you please help me with this? I am trying to create a workflow in Zoho Flow wherein a bigin Pipeline deal moves to Decision Closing, it will create a task and subtasks in Clickup, under the condition/filter that the Deal name contains the word Social[Webinar] Automate generation of wills, trusts, POAs, and other estate planning documents with Zoho Writer
Managing the lifecycle of the estate planning documents such as wills, trusts, and POAs, from client intake to final storage, can be complex and time-consuming. Join our live webinar to learn how Zoho Writer transforms this process by automating documentCreate / Update Rule in TeamInbox when record is updated in ZohoCRM using flow?
I'm currently evaluating options and trying to work out if the possible scenario is possible; If a record in ZohoCRM is updated, take 2 of the fields from that - lets call them 'OrderRef' and 'OrderTo'. Using flow, if a record is added or updated, addPlans to allow more columns of monitoring, and monitoring not only your own channels?
Are their any plans to allow more columns of monitoring, and monitoring not only your own channels? Here's why - I'm sure I'm not alone in that we sell other brands products, so not only am I interested in my own brand social channels, but also the socialUnwrapping the best practices for the Zoho Desk mobile app: Part 1
In focus: Empowering the field and frontline customer support representatives Imagine having to carry your computer everywhere to respond to customers, handle escalations, and update your process. This series presents you with efficient tips to handledealing with post dated cheques
Hi, can you help me please the best way to deal with this We sell an item of three months duration that is paid for with post dated cheques in monthly stages example - item is sold £3000 Cheque 1 is for £1000 due at time of sale (say Sept) cheque 2 is dated 25th of next month (Oct) cheque 3 is dated 25th of next month +1 (Nov) Now, with invoice number one it's simple - i send a standard invoice as usual But with the other two here's what i want zoho to do next month i want it to send an invoice onIs there a way to sell in a practical method multiple subscriptions of the same product? i.e. domain names
In evaluating Zoho Billing, a hurdle to adopting it is that Zoho Billing does not seem designed to support businesses that sell multiple subscriptions of the same product. In our case, we need to sell and manage several domain names per client. Am I rightBug Report: "Name A-Z" sorting fails when Note titles start with an Emoji
Hello, I recently migrated from Evernote (~2600 notes across 23 notebooks). I use emojis at the start of my note titles for visual organization. The Issue: When I set the view to Sort by: Name (A to Z), the sorting logic breaks for any note starting withCopy & Paste not working
I could create and save 10 new documents but when I go to copy and paste content (just text) into them, only 1 of 10 would save the content. It would appear to save the content but when I go back into the documents, they are empty.Currency for Petty Cash
Currencies for Petty Cash should be availableediting/applying online payments
We have customers who pay part or all of an invoice and then cancel their service and want the payment as a credit to future work. It would be ideal if we could make it an excess payment and then void the invoice. I can't make it an excess payment becauseContacts per department
Hello, Is it possible to limit Contacts to a Department? ThanksThis site can’t be reached mail.zoho.com took too long to respond
In my office at any system, we couldnt able to login zoho email. it shows " This site can’t be reached mail.zoho.com took too long to respond". please fix it soon.Can send email from zoho mail, but can't receive any.
Hi, My domain is sattvameditationresort.com. I've updated MX records with those of Zoho. But i can't send any mails to this email id from gmail. I have checked the MX status with MXTOOLS, its showing the correct entry either. The error is as shown below:My domain did not activate
Hi, my domain (apsaindustrial.com.ar) did not activate, and the phone verification message never arrived. Please would you solve this problem? Thanks.Host not found?
Howdy! So i'm trying to add my custom domain for with the mail server. I have 100% control of my DNS and have tried every single option (TXT, CNAME, and even HTML) multiple times, ensuring i did it properly, to no luck. I get the same error message everyAuto End Chats After Customer Inactivity
Hello Everyone, I may be missing something, but is there a way to auto-end chats when a customer has been inactive for an amount of time? I have several operators (we use a shared set of account with schedules for people... that's another story) but atReport on opportunities showing only the last note added.
Hi I need to create a report that shows the most recent note added to each opportunity. This is so management can see what the latest update is according to the assigned salesperson. One workaround is to use the status field but this implies added manual work and mistakes as the salesperson would have to copy the existing status to a note before adding the latest status... otherwise the activity history would be lost. My current workaround is a report on Notes with Opportunities as the related module.Please add Zelle as an online payment option
Hello, I would like to request Zelle be added to the online payment service providers for Zoho Invoice. Considering how ubiquitous Zelle has become as a way to pay people via the major banking institutions, I feel like many freelancers would benefit fromGetting Project Template List using the REST API
I am trying to confirm that I can use the REST API to create a project using a project template. The API documentation indicates this is possible by providing the Template ID, but it is not clear at all how to get a list of available Project TemplatesHow to display the CONTACT ID in the Contact page
Hi, I've seen this conversation below and it is exactly the same question I'm raising now, but unfortunately the last message is not solved https://help.zoho.com/portal/community/topic/show-contact-id-while-editing-contact-form I need to show the ContactId and I don't know how to do this. The last message included in the conversaton shows the way but not it is not completed. "I am sorry by default we do not have the option to show the record ID for the contacts in the field in a record. When youHow to change margins in templates
Hi, I'm new to Zoho Campaigns, and am trying to figure out how to adjust the margins within an email template. The default margins make the text go all the way to the edges of the page. Please advise.Create Canvas list view templates from images powered by Zia
Currently available for all paid editions of Zoho CRM in the US, EU, IN, JP & CN DCs. Designing a personalized CRM interface just got even easier. In today’s fast-evolving digital landscape, AI is transforming the way we work by automating complex tasksPainfully Slow Zoho mail
Since yesterday Zoho Mail seems to have starting functioning very slowly and having a few bugs. It's slow to open mails, slow to send, slow to change between email accounts. Sometimes clicking on a particular folder (eg Sent folder) stops working and"Wrong password or login" Problem to configure Zoho on MAIL App on my Macbook
Hi, I'm having problems to configure my e-mail on my MAIL App(Macbook pro). My e-mail is hari@trespontoum.net Actually was working perfectly, and still working on my Iphone. My MAIL App prompt me that my login or password is wrong. I tried to change 3"User already exist in your org"
Hello, I've just read a discussion about this issue, which didn't solve my problem. I'm trying to add the following emails: sales@kiss-my-boutique.co.uk returns@kiss-my-boutique.co.uk orders@kiss-my-boutique.co.uk I'm getting an error message each time I try and add them. None of them are primary or secondary emails and none of them have been created as users before. I know this as when I try and login and do 'forgot my password' all I get is an error message saying 'user invalid'. Please advise.Operation Not Permitted
Hi, I have problem in adding user after verifying the domain but it seems like error appeared which is "operation not permitted". For your information, I had delete other domain before did it.Email forwarding setup fails
I'm trying to set up email forwarding from my Zoho email to my gmail address. I followed the directions to set up email forwarding here: https://www.zoho.com/mail/help/email-forwarding.html. I did only steps 1-6. After doing this, rather than settingNext Page