Building extensions #8: Improve and enhance user experience with modal boxes

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.
  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

    • Calls undetected

      Zoho is not reading calls made.

    • Multi-currency and Products

      One of the main reasons I have gone down the Zoho route is because I need multi-currency support.  However, I find that products can only be priced in the home currency, We sell to the US and UK.  However, we maintain different price lists for each. 

    • Archiving Contacts

      How do I archive a list of contacts, or individual contacts?

    • How to add to Subforms via Zapier with Zoho Writer?

      I have the following layout for a Zoho Writer Document. As you can see there is a repeating subform taking in "Items". I am trying to make a Zapier integration with it, and I can see there is 1 field saying: "Items", but it does not specify how I'm supposed

    • Zoho Books | Product updates | November 2025

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From translating email notification templates to the new transaction locking restrictions, explore the updates designed to enhance your bookkeeping experience. Making Tax Digital

    • Missing information data Zoho inventory

      there some missing data in Zoho inventory connection. pick list stock counts bin location we have requested it via mail and the support team doesn’t gove feedback. has anyone achieve to get these info or to ask other ya les

    • Calendar Events Issues

      Not able to view scheduled events on my calendar

    • Extensions 101 webinar series: Build, integrate, and monetize with extensions

      Attention developers! Are you ready to take your extension development skills to the next level? We're excited to bring back the Extensions 101 webinar series with an expanded lineup of Zoho products and an introduction to more platform features. Last

    • Custom Related List Inside Zoho Books

      Hello, We can create the Related list inside the zoho books by the deluge code, I am sharing the reference code Please have a look may be it will help you. //..........Get Org Details organizationID = organization.get("organization_id"); Recordid = cm_g_a_data.get("module_record_id");

    • Where are recordings stored?

      I have hosted a couple of test meeting, used the "record" button to start and stop the recording but I am unable to find where are those recordings saved?  Can anybody help? Thanks

    • Zoho Desk's integration with Microsoft PowerBI delivers advanced analytics insights

      Hello everyone, Gaining advanced insights through reports and dashboards is one of the critical requirements of every business. In addition to key metrics tracked in Zoho Desk, such as agent performance, SLA adherence, and ticket lifecycle, businesses

    • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

      Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple

    • IMAP error message in Zoho mail

      I cannot send emails today. Everything fine for years until today. Get a message: "You are yet to enable IMAP for your account. Please contact your administrator". Does anyone know how to correct this?

    • Enhancements to Zoho Map integration tasks

      Hello everyone, We're excited to announce enhancements to the Zoho Map integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need to

    • IMAP stopped working today

      Hello! I've been a paid customer for more than 10 years, IMAP was always working fine. But today this is the error I've got on my iPhone: I've tried toggling the IMAP for my account (Mail -> Settings -> Mail accounts) off and on again, but that did not

    • Duplicating report but custom layout does not

      Dear Zoho Creator, I need to duplicate a report into 10 copies, but unfortunately the custom layout (detail view) doesn’t copy along with it. I tried exporting and importing the custom layout, but the field mappings are incorrect. I believe everyone are

    • Are custom portals accessible on the Zoho learn smartphone app?

      In other words, can users external to my organisation, once signed up, use the app in the same way as internal users? Thanks

    • When will Zoho Learn be able to support SCORM files on the mobile app?

      When I click the SCORM content, I just get a message saying it's not possible yet. Yet implies that it will be coming soon. All I'm asking for is a realistic timeline so I know whether or not to invest my time in using it. If it will be soon, then I will

    • Zoho Books/Inventory - Update Marketplace Sales Order via API

      Hi everyone, Does anyone know if there is a way to update Sales Orders created from a marketplace intigration (Shopify in this case) via API? I'm trying to cover a scenario where an order is changed on the Shopify end and the changes must be reflected

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Multiple columns in a form

      I am evaluating Zoho Creator. However, I am seeing almost no layout control on a form.  Just a basic 1 or 2 column format that is then imposed on the entire form.  That's not going to work for many, many real world cases. We need multiple columns per line, and we need each line/section to occupy a single column or be able to span the columns.   Someone please tell me that I'm missing something and the capability is actually there.  

    • Global search

      Hi! I think it would be great to have a global search that would give you results from all records of a database, no only for a single field of a single form as we have now. Thanks!

    • Any insights about API/v2? Having problem for a while.

      I don't know why it is throwing a 404 error, my report name is correct. Has someone had this issue and how you fix it?

    • Edit QR code with redirect to form

      Guten morgen, wir haben ein Formular Reklamation_erstellen. Dort soll ein QR Code erstellt werden, der im Lieferschein angezeigt wird. Beim Scannen auf dem soll das jeweilige Formular zum BEARBEITEN geöffnet werden. Leider bekomme ich es nur so hin, dass

    • Getting all the ingredients together for baking an app

      Good day everyone. After reading a lot of the help docs and watching videos, I now started on my app. To prevent hours and hours wasted on going down the wrong track, I would like some clarification on the following. But first some background: I have

    • Help Needed with Configuring ZC Microservice

      I'm attempting to create a simple microservice, but am running into problems with scope and auth. Using Custom API Builder, here's my setup: 1. Method: GET 2. Auth: OAuth2 3. User Scope: All users 4. Response: Standard 5. Function: A function that returns

    • Creator Simplified #10: Predefine Form Field Values and Make Them Read-Only for Users

      Hey Creators, Ready for this week's tip in the Creator Simplified series? Today, we will explore how to have read only fields in a form. Use Case: Assume a scenario where the default value for a Department field needs to be English Literature, but you

    • Direct link to Record Summary

      Hi everyone, In one of my reports, I have built a Record Summary template to display the details of one record. I would like to be able to link directly to this Record Summary once I submit a new record, without having to go to the list of records first and click on View. Is there a possibility to do so ?  Should I use the URL by passing some parameters ? Thank you very much for your help ! Guillaume

    • To Assign a genrated pdf to a file upload field using delug

      content = "<html><body>HTML Content on page One <div style='page-break-after:always'></div> HTML Content on page Two </body></html>"; file = zoho.file.convertToPDF(content); file.setFileName("Name of the file"); <variableName> = <FormLinkName>[ID == input.ID];

    • Zoho Mail : Email Outgoing Blocked

      I suddenly received the following message yesterday. I cannot send any mail. Please resolve as soon as possible, I cannot work without sending email. Dear User, We regret to inform you that your email outgoing has been blocked and you will not be able

    • Creator and Tables

      Good day. I am trying to create my first application. I have imported my data into Tables and am creating my app in Creator. I do not see my tables and cannot see how to write forms data to a table. Even the Workflow just uses the form. In one of the

    • Calendar week view: Today + 6

      Is there anyway to have the calendar change dynamically based on the date? Due to the amount of events, we only display a week at a time, but towards the end of the week, we can no longer see ahead to next week (without changing it manually every time).

    • customer Name and address details

      i created one application there is no customer details in that . how to add customer details and

    • Recalculate every row in the subform

      Hello, Can anyone help me with a script, please? I have an issue. Sometimes it happens, that in a multi row subform one of the rows show an incorrect row total value. Not really understand how it can happen, if I have a 20 row subform, 19 rows show correct

    • Creating Repeat Forms that remove redundancies

      I wanted to understand if you can make multi-layer forms that reduce the need for users to input information in again and again. We want a form that our suppliers fill out per ingredient they sell, and the end result should have the Ingredient (Section

    • What is the difference between the free plan and the mail lite plan?

      What is the difference between the free plan and the mail lite plan? How many emails can I send per day?

    • Unblock email

      Hi The outgoing mail from a client of me is blocked. I already made tickets and tickets are send to the EU desk but nobody is responding. The problem is already 4 days! There is absolutely no help from the support. I am really not satisfied at all! Can

    • Domain verification failure

      Hello Zoho Support, I purchased my domain directly through Zoho Mail, but the domain verification keeps failing with the message “TXT verification failed.” I’ve already waited and retried several times, but it still won’t verify. Could you please manually

    • Unable to send message;Reason:554 5.1.8 Email Outgoing Blocked.

      My email account is unable to send emails, and I urgently need to use it. How can I resolve this?If there is anything we have done wrong, please let us know in advance so we can actively cooperate to improve. User ID: 850482493

    • URGENT: Email stopped workin - can't access admin panel

      For some reason email sending stopped working. When I try to send an email it fails with "Unable to send message;Reason:451 4.7.1 Temporary system error" I can receive email just fine I see in my notifications some errors about the MX records, however

    • Next Page