Title: Improve and enhance user experience with modal boxes | Community | Zoho Projects

Title: Improve and enhance user experience with modal boxes | Community | Zoho Projects


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.
  1. Display all open Zoho Desk tickets associated with an agent in a tab called "Desk open tickets."
  2. 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)
  • 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



Next>>

    • Recent Topics

    • adding attachment in sendmail script where attachment is in a CRM field

      Hi all, I have a custom field of type 'File Upload' in one of my modules in my CRM. I want to include the file in that field as an attachment to an email - which is done from a button on  the 'Results' module. I have created a script and a button to initiate an email from that module. The Deluge scripting window has allowed me to add arguments for all the fields I need to use except for the one file upload type field. My script currently looks like the below (content of the email omitted). As you

    • Signature field is showing black

      Hello, When customer signed the service form, it is showing as below picture Phone model: iPhone 16 Pro We tried delete and install application, but it not solved. This has on phone of a few person. There is any advice to solve this?

    • [Free Webinar] Learning Table Series - AI-Enhanced Insurance Claim Management in Zoho Creator

      Hello Everyone! We’re excited to invite you to another edition of Learning Table Series, where we showcase how Zoho Creator empowers industries with innovative and automated solutions. Struggling with lengthy claim processes, a lack of visibility into

    • How to update changed purchase account of item in invoice

      I have selected the wrong purchase account for various articles and created invoices. I had to adjust the purchase account in the article afterwards, but the old purchase account is still posted in the transaction-journal of the invoice. To adjust the

    • Zoho Suite is very slow

      Since today Zoho is incredibly slow over all applications! What's going on?

    • Not sure how to use credits to my account

      Hi I have a $50 credit to my account. I'm just wondering how I can apply that to either a current invoice or to try a new service. Any advice would be great, thanks. Kind Regards Chris

    • Control who sees Timeline and Interactions in Zoho CRM through Profiles

      The feature has been enabled for all DCs (except US, EU, and IN DCs). We will be rolling it out to the other DCs in the upcoming days. Dear All, In a CRM, not all users would require access to the history of a record. For instance, a Marketing Operations

    • Zoho Desk Integration - Add the option to send the estimate from the Zoho Desk Ticket Integration

      Hi, Currently in the Zoho Desk integration, the user is able to create an estimate from a ticket, once the estimate is created the user can see the estimate under the ticket (see screenshot below), but is not able to send that estimate from Zoho Desk.

    • Utilisation de Zoho en conformité avec l’article 286 du Code général des impôts (CGI)

      Cher(e) client(e), Conformément à l’article 286 du Code général des impôts (CGI) impose aux entreprises assujetties à la TVA d’utiliser des systèmes de caisse ou de gestion commerciale certifiés lorsqu’elles enregistrent des ventes à des particuliers.

    • Issue showing too many consultations in my workspace link.

      Hi Team, I’ve set up two Workspaces to track meetings from different sources. So far, this has been working well, and the two Workspaces are differentiated without any issues. However, when I navigate to Consultations and share the link to my personal

    • 👋 Welcome to the Zoho MCP Community

      Hello all, glad to have you here! This is your space for everything AI agents, MCP tools, and intelligent business apps. This community is for you — developers, partners, creators, and businesses exploring how agents can transform work. Whether you’re

    • CRM Validation Rules Support Only Single Condition

      Simply put, CRM validation rules support only a single condition for each field on "All Records". You also cannot specify additional validation rules on the same field because it has already been used in an existing validation rule. The ONLY solution

    • Unapproved Leaves are hard to distinguish in Attendance View

      This is a an unapproved leave request It appears in the Attendance view without any visual indicator if its approved or not For a whole day request this might be manageable but for hourly requests it gets very hard to know which are approved, which are

    • Performance Appraisal Probation Period

      Hello All,  Is there any possible way to create an appraisal cycle for new staff members, at the end of probation period? Many thanks!

    • Zoho Creatorの一括操作における処理の同期/非同期について

      現在、Creatorのレポート機能を利用して、複数のレコードに対して一括で処理を実行しようとしていますが、処理の実行順序について確認したいことがあります。 レポート内の複数レコードに一括で処理を実行した際、処理は同期的に行われるのでしょうか？それとも非同期的に行われるのでしょうか？ 【同期処理の場合】 レコード①に対する処理が開始され、終了後にレコード②に対する処理が開始され、最後にレコード③に対する処理が実行されるように、処理が順番に行われる場合。 【非同期処理の場合】 レコード①、レコード②、レコード③の処理が一斉に開始され、それぞれ並行して処理が行われ、全処理が終了する場合。

    • Adding Chargebee as a Data Connector

      Is it possible to get Chargebee added as a Zoho Analytics data connector?

    • Delete commerce website

      I need to delete a commerce website, but the only option is to click on settings, REQUEST DELETE, choose an urgency notice, add a message....AND THEN nothing, no way to send the request. Why is nothing simple!?!?!  I just want to delete the store.  The

    • Adding external users to Zoho Social under Zoho ONE licence - how to best achieve this

      My client has a small business, and we are looking to implementing Zoho ONE with a single flexible user licence as that is all they really need and offers the best pricing for the range of modules we eventually wish to set them up with, one of which will

    • Has anyone built a custom AI support agent inside Zoho (SalesIQ/Zobot)?

      Hi all, I’ve been experimenting with building my own AI support assistant and wanted to see if anyone here has tackled something similar within Zoho. Right now, I’ve set up a Retrieval-Augmented Generation (RAG) pipeline outside of Zoho using FAISS. It

    • This mobile number has been marked spam. Please contact support.

      Problem Description: One of our sales agents in our organization is unable to sign in to Zoho Mail. When attempting to log in, the following message appears: This mobile number has been marked as spam. Please contact support at as@zohocorp.com @zohocorp

    • Zoho Books - Hide Convert to Sales Order if it can't be used.

      Hi Books team, I noticed that it is not possible to convert a Quote to a Sales Order when a Quote is not yet marked as accepted. My idea is to not show the Convert to Sales Order button when it is not possible to use it, or show it in a grey inactive

    • What’s New in Zoho Inventory | April 2025

      Hello users, April has been a big month in Zoho Inventory! We’ve rolled out powerful new features to help you streamline production, optimise stock management, and tailor your workflows. While several updates bring helpful enhancements, three major additions

    • Zoho Books - Quotes to Sales Order Automation

      Hi Books team, In the Quote settings there is an option to convert a Quote to an Invoice upon acceptance, but there is not feature to convert a Quote to a Sales Order (see screenshot below) For users selling products through Zoho Inventory, the workflow

    • When Zoho Tables Beta will be open to EU data center

      Hello all, We in EU are looking at you all using and testing and are getting jealous :) When we will be able to get into the beta also? We don't mind testing and playing with beta software. Thank you!

    • Pass current date to a field using Zoho Flow

      I am trying to generate an invoice automatically once somebody submits a record in Zoho CRM. I get an error in the invoice date. I have entered {{zoho.currentdate}} in the Date field. When I test the flow, I get "Zoho Books says "Invalid value passed

    • API: Mark Sales Order as Open + Custom Status

      Hi, it's possible to create Custom Status (sub-status actually) states for the Sales Order. So you have Open, Void. Then under Open you can have Open, and create one called Order Paid, Order Shipped, etc etc...which is grouped under Open. I can use the

    • Zoho Quartz Screen Recording

      Hello, can we get access to Quartz, please, as a standalone solution? It would be great for creating training videos for current and future staff on how to use Zoho software according to our company requirements. Thank you

    • Tip 26: How to hide the "Submit" button from a form

      Hi everyone, Hope you're staying safe and working from home. We are, too. By now, we at Zoho are all very much accustomed to the new normal—working remotely. Today, we're back with yet another simple but interesting tip--how to hide the Submit button from your forms. In certain scenarios, you may want to hide the submit button from a form until all the fields are filled in.  Use case In this tip, we'll show you how to hide the Submit button while the user is entering data into the form, and then

    • filter broke my data

      I uploaded a file recently from Sheets and it has top 2 rows frozen, with table headers in second row and each one is filterable. somehow my first 2 columns became unfiltered and no matter what I do I cannot reapply the filter?? also didn't realize they

    • How do I move Notes around within a Group?

      It says here: " You can now sort notes by title (alphabetically), or by date modified and date created. You can even organize your notes by dragging and dropping them into a particular order. To sort your notes, simply go to Settings and tap “Sort By.” Please note: all sort settings will be saved and synced across devices, except for custom sorting. Custom sorting will be device specific."However, I am unable to 'custom sort' in either Notebook for Mac or on the Web. In addition, I can't find the

    • Generate a link for Zoho Sign we can copy and use in a separate email

      Please consider adding functionality that would all a user to copy a reminder link so that we can include it in a personalized email instead of sending a Zoho reminder. Or, allow us to customize the reminder email. Use Case: We have clients we need to

    • Zoho Sign: need to leave document pending for up to a year, or maybe there's a better way?

      I have zoho one, maybe there's a better way to do this with another service than sending a zoho sign template from zoho crm. At the end of the day this requirement is due to regulations, no matter how dumb it may seem. I'm just looking for a way of getting

    • Separate Items & Services

      Hi, please separate items and services into different categories. Thank you

    • What's New in Zoho Inventory | Q2 2025

      Hello Customers, The second quarter have been exciting months for Zoho Inventory! We’ve introduced impactful new features and enhancements to help you manage inventory operations with even greater precision and control. While we have many more exciting

    • Mastering Zia Match Scores | Let's Talk Recruit

      Feeling overwhelmed by hundreds of resumes for every job? You’re not alone! Welcome back to Let’s Talk Recruit, where we break down Zoho Recruit’s features and hiring best practices into simple, actionable insights for recruiters. Imagine having an assistant

    • We are unable to process your request now. Please try again after sometime or contact support@zohoaccounts.com

      I cannot sign up and return the error of we are unable to process your request now. Please try again after sometime or contact support@zohoaccounts.com

    • Multi-currency - What's cooking ?

      Hi,       We have been doing this feature for sometime and we would like to give you some glimpses of it.  Working with Multi Currency :        Multicurrency support gives you the ability to handle business transactions in multiple currencies. You can define a base currency for your organization and add more currencies with exchange rates based on the base currency.  Setup :        From the setup page, you can manage all the currencies supported by your organization.       Currencies page        

    • Integrating Chatbot with Zoho Creator Application

      Is it possible to integrate a chatbot with a Zoho Creator application?

    • How to reduce programmatically the image uploaded by user?

      I need a function that will automatically reduce the pixel dimension to 800 x 600 pixels / 180 resolution or (approx. 1.37MB) of image uploaded by user from digital camera, for example, 2271 x 1704 pixels /180 resolution or approx. 11.1MB. After the user selected the image, the function will able to detect if pixels is above 800x600, process the photo (crop/ reduce) and resume upload. Need help...  

    • Dark mode for Zoho Creator / Zoho CRM Code editor

      Hi Team, Is there any plans for Dark mode in Zoho creator / Zoho Crm code editor and development pages in pipeline?

    • Next Page