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

    • What is the simplest way to import PST to Yahoo Mail?

      The simplest way to import PST file into Yahoo Mail is to use a third-party tool that supports direct PST-to-Yahoo migration. Software like Aryson PST Converter lets you upload emails, contacts, attachments, and folders from a PST file straight into your

    • Subform edits don't appear in parent record timeline?

      Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

    • 【Zoho CRM for Everyone】設定画面のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、Zoho CRM for Everyone の設定画面のアップデート情報をご紹介します。 目次 設定ホーム画面の追加 設定画面での検索結果の表示形式の変更 設定画面でのよく使用する機能の表示 設定メニューの展開/折りたたみ状態の保持 1. 設定ホーム画面の追加 ホーム画面の設定項目は、直感的に分類できるように"カテゴリごと"で分けられています。 このような一元化された表示により、各ツールが1つの画面に集約され、必要な機能をより簡単に見つけられるようになりました。

    • What's New - November 2025 | Zoho Backstage

      A new month, a new set of updates. With a mix of new features and thoughtful improvements, you get smoother workflows and better control across registrations, exhibitors, and communications. Let's take a look at what's new and enhanced in Zoho Backstage

    • Zoho Checkout - Duplicate Customer record created for each payment received

      Hi All. We are using Zoho Checkout to capture online payments for a club membership form (in Zoho Forms). We've noticed that each new payment seems to create a new customer record, regardless of whether the customer already exists in the Zoho Finance

    • Templates for Zoho Desk - Knowledge Base

      We are looking at migrating our Knowledge base into Zoho Desk. Is there a way of creating templates for article in Knowledge base. We want to be able to set templates for certain types of content. Is this possible

    • Import KB template OR Export template for zoho desk?

      Greetings. Can you tell me if there is a way to get an EXPORT of my KB articles? OR is there a template you supply for importing KB articles into my zoho desk? I am looking for a method of understanding what fields can be imported, and what their possible

    • What KPIs Do You Use to Measure Your Support Team’s Performance in Zoho Desk?

      Hi everyone, We hope you’re all doing well. We are trying to improve how we measure the performance and effectiveness of our support department, and we would really appreciate learning from the community. We assume there are several common and widely-used

    • Backorder quantity change

      New Purchase Order × Almost there, but... Quantity of items in this purchase order is greater than the quantity that can be backordered from that sales order. Why can't I change the quantity of a backorder purchase? It looks like a normal order form and I would like to use it as one because I increased the amount and added some items. 

    • How to Associate multiple contacts with deal in Sales Inbox

      Hello, I have many deals that have multiple potential customers associated with a single deal, for example an engineer and a manager. The manager is the Deal's primary contact in CRM and the Engineer is added to the deal in the "Contact Roles" Associated

    • WorkDrive and CRM not in sync

      1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (here

    • "code": "500","description": "Account not exists", mail api

      I have been through all the steps and have a functioning Oath access_token etc etc... I then GET https://mail.zoho.com/api/organization And get my zoid then GET http://mail.zoho.com/api/organization/<hidden>/accounts and get the account details, which

    • RTL Support for Webforms in Zoho CRM

      Dear Zoho CRM Support Team, We are writing to request an enhancement to the webform builder functionality within Zoho CRM. Currently, to create a webform in a right-to-left (RTL) language, the entire CRM instance must be set to RTL, which can be inconvenient

    • Imported contacts succesful but contacts do not show up in Contacts

      I imported +300 contacts. I can see them in import history. When clicking on a contact in import history I see all the imported contact details for any given contact. So import seems to be successful.   However the imported contacts do not show up in the contacts tab. Not in All contacts, and not in a filtered view where they absolutely should show up. The search function also does not find any imported contact.   Help?

    • Rich Text For Notes in Zoho CRM

      Hello everyone, As you know, notes are essential for recording information and ensuring smooth communication across your records. With our latest update, you can now use Rich Text formatting to organize and structure your notes more efficiently. By using

    • Saving sent email campaign as PDF

      I'm looking to add all campaigns sent to an archive folder in sharepoint. Is there anyway to accomplish this in Zoho Flow ? I'm falling at the first hurdle ... can I automatically save a sent campaign as a PDF to a folder location ?

    • Zoho Voice lance BYOC (Bring Your Own Carrier) : intégrez votre opérateur

      Pour accompagner sa croissance, une entreprise a besoin d’une infrastructure téléphonique flexible et évolutive. Les solutions de téléphonie s’adaptent aux exigences du centre de contact, tout en intégrant aisément les opérateurs locaux de votre choix.

    • Zoho Social API for generating draft posts from a third-party app ?

      Hello everyone, I hope you are all well. I have a question regarding Zoho Social. I am developing an application that generates social media posts, and I would like to be able to incorporate a feature that allows saving these posts as drafts in Zoho Social.

    • Digest Novembre - Un résumé de ce qui s'est passé le mois dernier sur Community

      Bonjour chers utilisateurs, Avec l'arrivée du dernier mois de l'année, il est temps de résumer les activités de novembre dans la communauté Zoho France. Ce mois-ci, Zoho Webinar se dote de deux nouvelles intégrations ! La première est avec Zapier : connectez

    • How do I create an update to the Cost Price from landed costs?

      Hi fellow Zoho Inventory battlers, I am new to Zoho inventory and was completely baffled to find that the cost price of products does not update when a new purchase order is received. The cost price is just made up numbers I start with when the product

    • E-Invoicing in Belgium with Zoho Books

      Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. This means that invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing

    • Lead Blueprint transition in custom list view

      Hi, Is It possible to insert the Blueprint transition label in a custom Canvas list view? I am using Lead module. I see the status, but it would be great if our users could execute the Blueprint right from the list view without having to enter the detailed

    • Announcing new features in Trident for Mac (1.30.0)

      Hello everyone! We’re excited to introduce the latest updates to Trident, bringing you a more seamless, intuitive, and secure communication experience. Let’s take a quick look at what’s new. Work with PST/EML files more efficiently. You can now do more

    • Open Form in Same window as Page from embedded Report

      I have a page that has an embedded report, as shown below. When I click the + sign to add a new record, the form shows up inside the page where the report was embedded. I know that I can add a custom action to the report grid or report detail view and

    • Weekly Sales Summary

      Is it possible to generate a weekly report in Zoho Books to show -$$ amount of estimates generated -# of estimates generated by Salesperson -$$ amount of Sales Orders created -$$ amount of Invoices generated

    • Pricing Strategies: #4 Counting on Discounts

      "Is there any chance I can get a little discount on this month's service?" Maya hears this almost every time at her fitness studio. She offers monthly subscription plans for various services, including yoga, strength training, wellness sessions, and personal

    • Introducing Query Workbench in Zoho CRM

      Hello everyone! We’re excited to announce the Query Workbench, a brand-new interface designed to improve developer experience of building Queries in Zoho CRM faster, simpler, and more intuitive. In the past, constructing queries required navigating across

    • Limitation with Dynamic Email Attachment Capture

      I've discovered a flaw in how Zoho Creator handles email attachments when using the Email-to-Form feature, and I'm hoping the Zoho team can address this in a future update. The Issue According to the official documentation, capturing email attachments

    • Add Customer in Books on Creator Form Submit Params

      Hi guys, Were integrating a creator app with books however what were doing is adding a books customer on submit of creator form.  We have some parameters but some fields aren't coping, All were seeing is the contact name in books,.  Any help of the params for this would be great. below is a sample of the script... response = zoho.books.createRecord("contacts", "XXXXXXXXX", { "contact_name" : input.Name, "address" : input.Email }); 

    • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

      Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?

    • Suggestion : link KB with Accounts

      Hi Zoho teams.  I think it could be good to link KB articles with  : accounts in order to easily  find articles dedicated to some account specificities. I tried to use tags , but tags are free text with not easy way  to retrieve it directly from ticket or list article for one tag. Tickets : It would be a good way to measure usage of KB directly from ticket when we don't need to copy/paste KB in solution. And : Great Tool , keep going ! 

    • Drag and Drop in Creator Application

      Hi, I am in the planning phase of a new application and I would like to use 'Drag and Drop' in the user interface of my new Creator application that I am sketching out, but I don't seem to be able to find any reference that this is available to developers. In my instance I have table of entries and I would like to be able to allow users to move an entry to another table (much like you do in your own interface when creating a Pivot Table report. In addition, I would like the user to be able to re-order

    • Is there any way to integrate Zoho with Zapier?

      Is there any way to integrate Zoho with Zapier? I'd like to use it to create a workflow, sharing posts from our Wordpress website to all our channels.

    • Popular Articles Report

      From data to decisions: A deep dive into ticketing system reports Content management teams can use various metrics to assess the effectiveness of knowledge base articles, improve content quality, and ensure articles are regularly updated. Predefined article

    • Invoice Ref. Field

      Hello Team, Currently, the Invoice Ref. field is set to a Number type with a maximum limit of 9 digits. However, we often receive customer invoices that contain up to 12 digits. In some cases, the invoice reference includes not only numbers but also letters

    • 60 Days Into Zoho - Tiktok Branding Startup -7 Questions?!

      Wsp Everybody I co-own a TikTok Branding / Consulting Startup & have been using Zoho for the past 60 days - Am now looking to make our overall operations & processes more Efficient & Effective! Curious to know how others are using the platform & what's

    • Turning off the new UI

      Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?

    • XML format to import knowledgebase into Zoho Desk

      Hi, We just started to use Zoho Desk and want to import our knowledgebase from our old support system (Freshdesk) to Zoho Desk. Can anyone give us information about the format of xml file to import? There is no explanation on the related page.

    • Pushing Zoho People leave into Microsoft calendar: how to chose how "event" is shown (busy, free etc)

      Hi, how can I select how a "leave" event is pushed into Microsoft calendar? I want for leave "working elsewhere" to show as working elsewhere and NOT as busy.

    • Duplicate Accounts

      Hi There, I am looking for a solution, script, workflow or anything to solve an issue we have - in our customers section we have a rule that doesn't allow duplicates, however Zoho will allow customers with xxxxx and xxxxx PLC or LTD so effectivley we

    • Next Page