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

    • RAG (Retrieval Augmented Generation) Type Q+A Environment with Zoho Learn

      Hi All, Given the ability of Zoho Learn to function as a knowledge base / document repository type solution and given the rapid advancements that Zoho is making with Zia LLM, agentic capabilities etc. (not to mention the rapid progress in the broader

    • Welcome to the Zoho ERP Community Forum

      Hello everyone, We are thrilled to launch Zoho ERP (India edition), a software to manage your business operations from end to end. We’ve created this community forum as a space for you to ask questions, comment answers, provide feedback, and share your

    • In App Auto Refresh/Update Features

      Hi,    I am trying to use Zoho Creator for Restaurant management. While using the android apps, I reliased the apps would not auto refresh if there is new entries i.e new kitchen order ticket (KOT) from other users.   The apps does received notification but would not auto refresh, users required to refresh the apps manually in order to see the new KOT in the apps.    I am wondering why this features is not implemented? Or is this feature being considered to be implemented in the future? With the

    • Consolidated report for multi-organisation

      I'm hoping to see this feature to be available but couldn't locate in anywhere in the trial version. Is this supported? The main aim to go to ERP is to have visibility of the multi-organisation in once place. I'm hopeful for this.

    • IMAP mail after specify date

      Hi My customer's mail server is on premise and mail storage is very huge. So It never finish sync. and finally stop sync. Cloud CRM have a option like zoho mail sync mail after some date.

    • Claude + MCP Server + Zoho CRM Integration – AI-Powered Sales Automation

      Hello Zoho Community 👋 I’m excited to share a recent integration we’ve worked on at OfficehubTech: ✅ Claude + MCP Server + Zoho CRM This integration connects Zoho CRM with Claude AI through our custom MCP Server, enabling intelligent AI-driven responses

    • Notes badge as a quick action in the list view

      Hello all, We are introducing the Notes badge in the list view of all modules as a quick action you can perform for each record, in addition to the existing Activity badge. With this enhancement, users will have quick visibility into the notes associated

    • Search Bar positioning

      Why is the Search bar on the far right when everything is oriented towards the left?

    • Basic Mass Update deluge schedule not working

      I'm trying to create a schedule that will 'reset' a single field to 0 every morning - so that another schedule can repopulate with the day's calculation. I thought this would be fairly simple but I can't work out why this is failing : 1) I'm based in

    • The Social Playbook - January edition: Getting started with content creation

      Social media isn’t just about posting some random content. It’s about why certain content works, how brands stand out, and what makes people pause mid-scroll. The Social Playbook is a monthly community series where we break all of that down. Through real

    • Import Error: Empty values for mandatory fields - Closing Date

      Hello, I've tried multiple times to import a CVS Potential list from another Zoho account. But the error message I get is: Empty values for mandatory fields - Closing Date There are valid dates in this field, so I don't understand why this error messages

    • Adding custom "lookup" fields in Zoho Customization

      How can I add a second “lookup” field in Zoho? I’m trying to create another lookup that pulls from my Contacts, but the option doesn’t appear in the module customization sidebar. In many cases, a single work order involves multiple contacts. Ideally,

    • Special characters (like â, â, æ) breaking when input in a field (encoding issue)

      Hey everyone, We are currently dealing with a probably encoding issue when we populate a field (mostly but not exclusively, 'Last Name' for Leads and Contracts). If the user manually inputs special characters (like ä, â, á etc.) from Scandinavian languages,

    • Feature Requests - Contact Coloured Picklist Visibility & Field Visibility During Ticket Creation

      Hi Desk Team, I have 2 feature requests for you. Since Coloured Picklists are now available in Desk, It would be great if the colours were visible on the Related Details (Contact Information) when creating a ticket. In the screenshot below, I have 2 fields

    • How to integrate XML with Zoho CRM

      Hi, I have an eCom service provider that gives me a dynamic XML that contains order information, clients, shipments... The XML link is the only thing I have. No Oath or key, No API get... I want to integrate it into Zoho CRM. I am not a developer nor

    • Feature Request - Ability to Customise Contact Info Card on Ticket Details View

      Hi Desk Team, I've added a "Contact Priority" and "Account Prioirty" field and it would be very useful to agents if they could see that information in the Contact Info card on the Ticket Details view. It would be great if we could choose some fields to

    • Tax in Quote

      Each row item in a quote has a tax value. At the total numbers at the bottom, there is also a Tax entry. If you select tax in both of the (line item, and the total), the tax doubles. My assumption is that the Tax total should be totalling the tax from

    • Zoho Flow integration with Facebook Messenger and Whatsapp

      Hi there,  any plans of adding integrations with Facebook Messenger and Whatsapp into Zoho Flow? Seems that more and more business are delivering automated updates such as "your order is received",  "your order has been shipped" and so on via these two platforms. Not sure if Whatsapp has the API access needed i am pretty sure that Facebook Messenger has... Kind regards Bo Thygesen 

    • Really want the field "Company" in the activities module!

      Hi team! Something we are really missing is able to see the field Company when working in the activities module. We have a lot of tasks and need to see what company it's related to. It's really annoying to not be able to see it.🙈 Thx!

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

    • Campaigns unsubscribe/manage preferences links

      Hi, Where can I edit the unscubscribe and manage preferences link in the footer of the email. I would like it so that when you click 'manage preferences' an form opens up that allows the person to choose what type of emails they do and don't wish to

    • email address somehow still not verified (?!)

      L.S. After creating a new email template in CRM I was about to send a group email to my clients, then Zoho CRM announced that they would change the sender address to some kind of Zoho-e-ddress because my email address "has not been verified". Not only

    • Marketing Tip #17: Add credibility to your online store with Review Widgets

      One of the fastest ways to build trust in an online store is to show real customer feedback right where people are deciding to buy. Third-party widgets let you embed things like Google Reviews, Instagram feeds, or even a WhatsApp chat button. These add

    • adding several team members to an Opportunity

      How can we add several team members to one opportunity for collaboration? I have researched and only found something called Deal Team which I cannot find in my CRM to configure.

    • PDF Annotation is here - Mark Up PDFs Your Way!

      Reviewing PDFs just got a whole lot easier. You can now annotate PDFs directly in Zoho Notebook. Highlight important sections, add text, insert images, apply watermarks, and mark up documents in detail without leaving your notes. No app switching. No

    • Bulk update Profile Permissions

      Dears, What should we do if we add new forms or reports and need to update more than 20 permissions? Updating them one by one feels pretty harsh, doesn’t it?

    • From Zoho CRM to Paper : Design & Print Data Directly using Canvas Print View

      Hello Everyone, We are excited to announce a new addition to your Canvas in Zoho CRM - Print View. Canvas print view helps you transform your custom CRM layouts into print-ready documents, so you can bring your digital data to the physical world with

    • Filter in fields from Jira extension

      We have installed the Jira extension so we can maken Jira issues from Zoho desk. In Zoho desk I can also see the Jira issue status for example but I can not filter on this field. I would like to setup an filter showing me the closed Jira issues. How can

    • text length in list report mobile/tablet

      Is there a way to make the full text of a text field appear in the list report on mobile and tablet? With custom layouts, the text is always truncated after a certain number of characters.

    • Zoho Creator customer portal limitation | Zoho One

      I'm asking you all for any feedback as to the logic or reasoning behind drastically limiting portal users when Zoho already meters based on number of records. I'm a single-seat, Zoho One Enterprise license holder. If my portal users are going to add records, wouldn't that increase revenue for Zoho as that is how Creator is monetized? Why limit my customer portal to only THREE external users when more users would equate to more records being entered into the database?!? (See help ticket reply below.)

    • Link Contacts to Billed Accounts

      Hello, I want to do a survey on all my customers of 2025. For that I want to select all contacts linked to accounts who where billed in 2025. How to I create this link to I can then use Zoho Survey with this database of contacts?

    • Export all of our manuals from Zoho Learn in one go

      Hi, I know there's a way to export manuals in Zoho Learn, but I want to export everything in one go so it won't take so long. I can't see a way to do this, can I get some assistance or is this a feature in the pipeline? Thanks, Hannah

    • Bring Zoho Shifts Capabilities into Zoho People Shift Module

      Hello Zoho People Product Team, After a deep review of the Zoho People Shift module and a direct comparison with Zoho Shifts, we would like to raise a feature request and serious concern regarding the current state of shift management in Zoho People.

    • Historical Sales Info - Blend with Finance Invoice Line Items, Access in CRM and Desk

      My company has been using Zoho One since 2021, with sales data going back through 2020. However, we have been in business much longer, and we have historical sales information that we want to have at our fingertips when talking with customers (usually

    • Pre-Zoho Sales Info - Best Way to Add to Desk / CRM

      My company has been using Zoho One since 2021, with sales data going back through 2020. However, we have been in business much longer, and we have historical sales information that we want to have at our fingertips when talking with customers (usually

    • Shift-Centric View for Assigning and Managing Shifts in Zoho People

      Hello Zoho People Product Team, Greetings and hope you are doing well. This feature request is related to Zoho People - please don't move it to zoho one! We would like to submit a feature request regarding the shift assignment and management view in Zoho

    • CRM function REST API response format

      Is there a way to control the JSON response returned by the CRM function REST API? If I call a function using either OAuth or an API key it returns a 200 OK response with a string in the format shown below. I am using a particular feature of an external

    • Add Employee Availability Functionality to Zoho People Shift Module

      Hello Zoho People Product Team, Greetings and hope you are doing well. We would like to submit a feature request to enhance the Zoho People Shift module by adding employee availability management, similar to the functionality available in Zoho Shifts.

    • Using MPN across multiple SKUs and inventory tracking

      I have several different SKU's that share a common MPN and would like to track inventory by MPN. SKU1 has MPN1 assigned SKU2 has MPN1 assigned Here is an example If I start with 5 of MPN 1 in stock I want each SKU1 and SKU2 to show as 5 in stock, If I

    • Unable to Access Application:

      Whenever I try to access my application from the desktop, say I am editing it and want to test something in the desktop environment I get: An error has occurred. An internal error has occurred. Please check the URL , or try refreshing the page I can edit

    • Next Page