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

    • bulk edit records and run internal logic

      hi there is few logics in manner "it this than that" logics work well when i edit entry openning it one by one (via workflow "on add/edit - on success" , for custom field "on update/on user input") but when i try bulk edit records - logic does not work.  how can i turn on logic to work as programmed - for mass editing records via bulk edit?

    • WebDAV / FTP / SFTP protocols for syncing

      I believe the Zoho for Desktop app is built using a proprietary protocol. For the growing number of people using services such as odrive to sync multiple accounts from various providers (Google, Dropbox, Box, OneDrive, etc.) it would be really helpful

    • Possible for first Signer of Sign Form to specify the next signer in the sequence

      We have many use cases where multiple signers need sign the same document. We'd love to be able to use sign forms, where the a signer who uses the Sign Form link can specify the name and email address for the next person in the sequence.

    • BUG: Can't copy-paste data outside Sheet

      Currently I can't paste data copied from inside any of my Zoho Sheet files to any other app. Copy-paste works inside the sheet It does NOT work between two different sheets These sheets are built from automation templates Everything works fine if I create

    • Zoho CRM Community Digest - November 2025 | Part 1

      Hello Everyone! Here’s what came through in the first half of November: new updates and a few helpful community discussions with real, notable solutions. Product Updates: Android App Update: Inctroducing Swipe Actions You can now swipe left or right on

    • Upload own Background Image and set Camera to 16:9

      Hi, in all known online meeting tools, I can set up a background image reflecting our corporate design. This doesn't work in Cliq. Additionally, Cliq detects our cameras as 4:3, showing black bars on the right and left sides during the meeting. Where

    • Truesync for Linux

      Is Truesync available on linux ?

    • Question about upgrade and storage space Zoho Notebook

      After upgarding my Zoho Notebook plan, I am running into the following issue. I just upgraded from a free Zoho Notebook subscription to Pro Lite after I got a notification in my Window Zoho Notebook desktop app saying that I had run out of space. However,

    • Hidding/excluding specific picklist options from filter

      Hi. Is it possible to hide/exclude specific picklist options from this filter? I don't want them to be shown when someone tries to filter in the leads module

    • Subforms to Capture Multi-Row Data in Job Sheets

      Subforms transform your job sheets from simple checklists to powerful, data-rich forms. In field service work — whether maintenance, inspection, installation, or repair — a single job can involve multiple repeatable entries: readings, parts used, activities

    • Add "Fetch Composite Item" Action for Inventory

      I want to make a Flow that uses information returned in the GET call for Composite Items, and it's not currently available in Zoho Flow. Please consider adding this functionality.

    • Adress Labels for sending of the oder und barcode

      We want to print with my address labels to stick on the order of the ware can. there are these options?

    • printing individual labels - Dymo LabelWriter

      I am trying to print individual labels to my Dymo LabelWriter - has anyone done this? Latest Update (December 2025): The Canvas Print View is now available! We encourage you all to try it out and share your feedback with us. Learn more here: Zoho CRM

    • Zoho Creator for Agriculture

      Greetings, I am starting to work on  Zoho Creator specifically for the agricultural field, any recommendations, tips or ideas that might be helpful ? Also, if you are interested by any means in working on such project, kindly contact me. The project is

    • Custom Print Layout

      I would like to create a custom print layout of a Lead or Contact. Is there a way to do that? What I mean is that if I'm viewing a specific lead or contact I'd like to be able to print or export that lead/contact and only print and/or export certain information.

    • Print View

      Nothing happens when I'm in a module , ie; Contacts, and I hit the Print View Button. Even when it does come up and say "loading", nothing loads

    • Get Holiday ready with Zoho Mail's Offline mode

      With the holiday season right around the corner, this is the perfect time to get ready to unplug, relax, and enjoy a well-deserved break. In addition to preparing yourself, you can also make sure your organization members are set for their time away from

    • Solution to Import PST File into Office 365.

      MailsDaddy OST to Office 365 Migration Tool is an outstanding solution to recover OST files and migrate them into Office 365 without any hassle. Using this software users can multiple OST files into Office 365 with complete data security. It offers users

    • Zoho CRM Kiosk issues

      Firstly this is for a system on the AU servers if that makes a difference. Issues are as follows (For Kiosk): 1. Re-ordering fields in the screen builder is broken. The fields seem to be re-ordering themselves, unless you order everything by moving the

    • Zoho Books emails suddenly going to Spam since 11 Nov 2025 (Gmail + now Outlook) — anyone else?

      Hi everyone, We migrated to Zoho Books in July 2025 and everything worked fine until 11 Nov 2025. Since then, Zoho Books system emails are landing in customers’ Spam (first Gmail, and now we’re seeing Outlook/Office 365 also starting to spam them). Impacted

    • Email Template Edits Not Saving

      I can make an edit, click save, and see the blue bar annimation at the top, but the edits don't actually save. Important, because my email templates are now broken and clients are receiving bad emails. Tried on Chrome, Firefox and IE.

    • Default Ticket View - Table?

      Guys, We mostly use the table view to queue tickets. Maybe I am missing it - but how can I set that view as 'default" for all our agents? Thanks JV

    • Can I have different users see different pick list values for Potential Stage?

      We have some users focusing on new business and others focusing on existing business, and they follow different sales processes/cycles, so we would like them to see different pick list values for Stage (eventually leading up to Closed Won/Lost in both cases).   And just to keep it interesting - some of these users will of course do a combination, so would need to see one pick list for their New business potentials and a different pick list for their Existing business ones.   Salesforce does this

    • Tracking Snippet not working in Zoho Marketing Automation!

      First off, the fact that you have to wait about 12-24 hours for every response is terrible. How are we supposed to conduct business? Second, we have been trying for several days to get the Tracking Code Snippet in marketing automation to work, to no avail.

    • Is there any way to send an Excel received by email to Dataprep?

      Every day I receive an email alert with an Excel file that I want to process through a Dataprep pipeline. To do this, I need to: -Save the file to disk -Open the pipeline -Run the pipeline -Update the source -Several clicks to select and open the saved

    • Read webpage - MSXML2.ServerXMLHTTP

      I have the following VBA script, put together from various sources (mainly zoho forum/help/support, so it once worked, I guess): private Sub GetListOfSheets() Dim url As String Dim xmlhttp As Object Dim parameters As String Dim html As String range("B1").value

    • Zoho Creator Form Search

      I'm new to Zoho Creator and so far i do like it but im shocked there seems to be no easy way to add a search function and/or navigation to there forms as this readily available in every platform i have used in the past. Anyway i have a form which i have

    • How to setup DKIM / SPF in Zoho Mail

      Hello there! I'm having a hard time understanding how to setup the TXT records for SPF and DKIM with Zoho Mail. I'm following the instructions here: https://www.zoho.com/campaigns/help/setup-spf-dkim.html Specifically, when it comes to the value for the

    • Mass update cant trigger a workflow?

      Hello there, Is this a normal Creator behaviour? In a report, if I manually edit each data row, it will pass those changes to all other reports. However, if I perform a Mass Update on a few data rows at once, the new data is not pushed to other reports.

    • search and Smart Bar both missing in Mail

      One of the users on my account does not have the search bar at the top right or the Smart Bar at the bottom left of the desktop Mail app. Any ideas how to get those back?

    • Remote Control Functionality During Screen Sharing in Zoho Cliq

      Hello Zoho Cliq Team, We would like to request the addition of remote control functionality during screen sharing sessions in Zoho Cliq. Currently, while screen sharing in Cliq is very useful, it lacks the ability for another participant to take control

    • Let us add Lookup fields in the Blueprint Transitions

      We are unable to add Lookup Fields in the blueprint transitions in Zoho Desk, we wanted to make it a requirement for our workflow but since it's not available in the transition we cannot. The lookup field exists in the Layout: But it cannot be added/selected

    • Zoho Projects API Scope for Issue Attachments

      I try to download issue attachments via the API, unfortunately I always get the following error code when trying to download the file from the supplied URL: {"ERROR_MESSAGE":"INVALID_OAUTHSCOPE","ERROR_CODE":401} indicating an auth scope error. I've tried

    • How to fetch custom fields for time entries in Zoho Project API v3

      In the previous Zoho Projects REST API, we were able to retrieve custom field details for time entries, including picklist options, using the endpoint: GET /restapi/portal/[PORTAL_ID]/timesheetcustomfields In the new Zoho Projects API v3, we tried using

    • Zoho Survey Enhancements

      We love Survey. We use it a ton. It needs some enhancements. Maybe some of these are already on the roadmap? API - this is crucial. We have some complex surveys that take place and need to update records, trigger other functions/automations, etc. I would

    • Request for Assistance Regarding Email Sending Issue (554 5.1.8 - Email Outgoing Blocked)

      Dear Zoho Support Team, I hope this message finds you well. I am writing to request assistance with an issue we are currently facing regarding our Zoho Mail account. Our email account, admin@tuyensinhcanuoc.com, is encountering the following error when

    • Images Don't Display on Blog

      Hi, I've just posted a new blog entry, but regardless of format (png or jpeg) Images that display in Preview mode do not display on any browser in the published post.  I've not done anything different with this post than others regarding images, please advice. Thanks! Edit:  I've discovered that moving the image files from a my sub directory folder "Pics for Blog" to the top level of the "Files" folder on my site allows the images to display live.  This, even though my other blog posts are correctly

    • Checkbox Field Mapping Zoho Forms to Zoho Sign

      I have an application that will be filled out via Forms that I am mapping into a PDF Filler on Zoho Sign. I need to have a series of checkboxes mapped to the corresponding fields in Sign and I only see single checkboxes available via the mapping, though

    • Books P&L by Customer

      Lately, we have found that the Customer field filter for the Profit & Loss report in Zoho Books is no longer available. We have several projects with the same customer and look at the P&Ls by project AND by Customer (overall). Can you please add back in this field selection alongside the Project field to the P&L report filter? Thanks! -Gina

    • Sent mail sort by date disappeared

      Hello, We used to be able to sort the emails by date in the sent folder, but this feature has recently disappeared. Can we bring it back?

    • Next Page