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

    • Zoho Billing Now Supports VeriFactu for Businesses in Spain

      Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia Estatal

    • Introducing the revamped What's New page

      Hello everyone! We're happy to announce that Zoho Campaigns' What's New page has undergone a complete revamp. We've bid the old page adieu after a long time and have introduced a new, sleeker-looking page. Without further ado, let's dive into the main

    • Zoho Books - France

      L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité

    • Name autocomplete

      Hi, During searching emails the web tool does not always propose the auto-completion of the saved emails. As a result I either have to go to contacts and look up the exact email, or the exact full name including the middle name and any dots, which is very annoying. For example I have a contact that I emailed in the past that has "First M. Last" <email@email.com> type of contact. When I start typing 'First' the email may or may not pop up in the autocomplete menu. Then if I start typing "first last"

    • How do i follow up my email campaign in-thread

      Is there a way to follow up the email campaign so that it is in-thread using zoho campaigns? eg customer gets original email with subject line "hello" then 5 days later follow up would be with subject line "RE: hello".

    • Announcing new features in Trident for Mac (1.29.0)

      Hello everyone! Trident for macOS (v1.29.0) is here with new features and enhancements to enhance your business communication. Let's take a quick look at them. Access shared mailboxes. You can now view and access shared mailboxes in Trident, which are

    • Books is extremely slow again today !

      Everything is running slowly even with 500mb connection speed

    • Cyclic dependencies in many-to-many relationships...

      I have an application which includes a form for companies, and a form for contacts. Each company can be assigned 1 technical and 1 administrative contact. I have this working okay so far, but I want to copy the scripts used so far to a new empty application. When I import the scripts it fails with a message that says: Problem encountered while creating the application Error in resolving form dependency:Cyclic dependency among the forms:[Company, Contact] What can I do to resolve this? After all,

    • Zoho API to create ticket

      I'm developing an integration to create tickets via API, but, locally it works (send and recieve requests). In production it also works sending requests, but, my file don't recieve any response data. My URL is available in Zoho API Console and I have

    • Automate Timesheet Approvals with Multi-level Approval Rules

      Introducing Approval Rules for Timesheets in Zoho Projects. With this automation, teams can manage how timesheets are reviewed and approved by setting up rules with criteria and assigning approvers to handle submissions. Timesheet, when associated to

    • Labels Part 2

       Hey Zoho Mail Team, On the labels window on the left-hand pane, alphabetize label name display, rather than displaying in order created.  This one should be easy. Thanks, Drew

    • Building Toppings #1 - Serving your needs with Bigin Toppings

      Hey Biginners! We're excited to kick off our Developer Community series on building toppings for Bigin, and our goal is to provide an accessible, beginner-friendly, and relevant path for every developer. Imagine creating tiny pieces of software that unlock

    • Can we create Sprint with tasks from Multiple projects?

      Hi Team, We were using Zoho Sprints for quite sometime. Currently we have started the process of Sprint method. We couldnt create the active sprint board with the tasks from multiple projects. I would like to know whether this is possible or Any timeline

    • Tip of the Week #74– Create automated workflows in MS Power Automate

      Zoho TeamInbox now connects directly with Microsoft Power Automate, letting you streamline everyday routines tasks such as from sending emails to managing threads, with automated workflows. About the integration Zoho TeamInbox integrates with Microsoft

    • Account validation

      Hello everyone, I registered my account on ZeptoMail to use the system, but the problem is that the verification period on Zepto's end has already passed and I have limited functionality.

    • Paste issues in ZOHO crm notes

      Hi, since a week or so I have issues with the paste function in ZOHO CRM. I use "notes" to copy paste texts from Outlook emails and since a week or so, the pasting doesnt function as it should: some text just disappears and it gives a lot of empty lines/enters.....

    • Is it possible to add a gradient color to a newsletter im designing?

      From where i sit it looks like you can only choose a single color but not combine 2 colors?

    • New Feature: Audit Log in Zoho Bookings

      Greetings from the Zoho Bookings team! We’re excited to introduce Audit Log, a new feature designed to help you track all key actions related to your appointments. With Audit Log, you can maintain transparency, strengthen security, and ensure accountability.

    • Account disabled

      I have an issue I need help with. Whilst trialing ZOHO CRM I created the following: Account1 (-------------) using m__ame@m__rg___s__i__.___.__ and 2 personal emails Account2 (-------------) using a personal email and 2 users _al__1@______________._o_.__

    • Blocked Email

      We are a Zoho One subscriber and use Yahoo as our MX provider. A few times each year, for the past four years, CRM blocks one or more of my Zoho One users from receiving internal email from CRM. This includes "@mentions" in all modules, and emails from

    • message var is empty in bot mention handler

      Hi, I'm encountering a problem: in my bot's mention handler, I want to retrieve the text the user typed when mentioning the bot. Example: On the #tests-cyril channel, I send this message: “@Donna hello how are you ?” I expect the system variable "message"

    • Remembrance Day to Remember – Recalling Values

      The phrase “at the eleventh hour” refers to the 11th hour of the 11th day of the 11th month in 1918, when the hostilities of World War I came to an end—but it still holds meaning today. Remembrance Day (Veterans Day in the US) is observed on November

    • Enhancing Zia's service with better contextual responses and article generation

      Hello everyone, We are enhancing Zia's Generative AI service to make your support experience smarter. Here's how: Increased accuracy with Qwen One of the key challenges in AI is delivering responses that are both contextually accurate and empathetic while

    • How to display two measures (sales and price) divided by categories on one line chart

      Hi everyone, I’m having trouble figuring out how to display two columns on a line chart with category breakdowns. What I need is a line chart where one line represents Sales and the other represents Price. However, the Price data is divided into around

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • Introducing the locking option for CRM records

      Last modified on 06/04/2023: Record locking option in CRM is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. Hello All, Hope you're doing well! We're thrilled to introduce our latest

    • Two new enhancements in Zoho CRM: Introducing new criteria for user fields and displaying group information in users page

      Announcement moderated on 14th June, 2023. Dear All, These enhancements are opened for all users in all DCs. ------------------------------------------------------------------------------------- Dear All, Hope you're well! We are here with two useful

    • Tip #49- Navigating the Remote Support Dashboard in Zoho Assist- 'Insider Insights'

      The Remote Support dashboard in Zoho Assist is designed to help technicians quickly access, manage, and monitor all their support sessions from a single, intuitive interface. Whether you’re starting a new session, managing ongoing connections, or reviewing

    • BMI formula

      I've been trying for hours to calculate BMI using height and weight as my only inputs. It's a simple calculation and I even went to ChatGPT to help me figure this out in Zoho Forms, but it led me down a path of "try this" and "try this". None of my attempts

    • SEO on blogs

      Hello, google is not able to find my blogs. Can you advice me if I need to change some settings or anything else to make it retrievable via SEO many thanks, hans

    • Duplicated Notebooks

      Out of the blue, almost all of my notebooks got duplicated and the different copies contain different information. Some seem like older copies than the others. I use the linux desktop app and sometimes the Android app. I assume that the sync failed at some point and was unable to merge the two versions together. But I'm afraid to add anything else to my notebook because if it can't properly sync 5 notebooks with only a handful of notes each, what will happen when I have hundreds of notes and I lose

    • Mind mapping in Zoho Projects

      Good morning,   I would like to congratulate the Zoho team for building such an inovative and responsive application that fits in the daily challenges of so many work groups. I would like suggest you another functionality that helps a lot in project planning and development: mind mapping. Mind mapping would be of great help for brianstorming, knowledge management and other needs in online collaboration.   Thanks and wish you all the best! George Maha Empresa Júnior Multidisciplinar do Instituto de

    • Retainer invoice in Zoho Finance modlue

      Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.

    • Documents don't sync properly

      Hello, My team recently moved to Zoho workDrive, some of my team, work remotely so we believed Zoho would be the best way to share and edit files as well as access files withing the team. However we are experiencing sync issues, when a file is uploaded in the file explorer and shows sync complete, same file can be seen on the Zoho web app but other team members can't see the said file because it is not syncing properly. i figured out that if i were to go to preferences in settings and resync the

    • We are looking for an experienced Zoho Developer

      Hi Everyone! We’re on the lookout for a skilled Zoho Developer with hands-on experience in the Zoho Developer Platform (The Vertical CRM Platform) and if you don't know what that is, then you are not the person we are looking for. You would also need

    • Initiate approval workflow after "on edit --> on success"

      Dear Community,  currently I am working on a initiative tracker which should handle approval workflows based on different initiative status. As far as I understand, an approval workflow can be triggered (only?) when data is entered for the input form to the database.  Example: A new initiative is created and submitted. --> Approval Workflow triggered Here comes my question: Is it also possible to trigger an approval workflow if the form was "simply" updated? (on edit --> on success) Imagine the initiative

    • Tax Deductible Donations to a Charity Organisation

      For Australia, what's the best/proper method for entering an expense that is a tax deductible donation to a charitable organisation. And thus is appears correctly in Accounts and BAS as a GST payable deduction?

    • Simultaneous use of WhatsApp Account in SalesIQ and ZohoDesk

      Hi, We have only one number registered in Meta, it's possible use same account for two apps? All times here we try is stopping in SalesIQ. Regards,

    • External lookup fields to synchronise with Analytics

      Hello. I suggest adding external lookup custom fields to the Zoho Analytics integration settings. Currently, these types of fields are not available for synchronisation, so they cannot be used to generate reports with related tables in Analytics. Thank

    • We should have an option to Toggle Off KB Article Links in AI Answer Bot Replies

      Hi everyone, I'm creating this topic to share a feature idea that I think would improve the customer experience when using the AI Answer Bot for self-service. The Current Behavior (The Problem) Currently, when the AI Answer Bot generates a summary or

    • Next Page