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

    • Suggestion to improve zoho writer

      I am using your product, I believe it is very useful, however, i was writing a note and I needed to draw an arrow in different angles to explain a point and I couldn't. it would be helpful, to add draw functions to the zoho writer. thanks

    • webhook basic authentication

      II want to use a webhook to send out a SMS. Unfortunately Twilio does not use an authToken but basic authentication. I created the webhook as POST and get this url: https://{username}:{password}@api.twilio.com/2010-04-01/Accounts/{account}/Messages?body=<BODY>&to=+155555555&from=+1555555555

    • Managing functions

      Can someone let me know if there are any plans to improve the features for managing functions in CRM? I have lots of functions and finding them is hard. The search only works on the function name and the filter only works on function type. I have created

    • Good news! Calendar in Zoho CRM gets a face lift

      Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities

    • Custom function return type

      Hi, How do I create a custom deluge function in Zoho CRM that returns a string? e.g. Setup->Workflow->Custom Functions->Configure->Write own During create or edit of the function I don't see a way to change the default 'void' to anything else. Adding

    • Issue with Hour Calculation in Zoho People Attendance Module

      I have noticed an issue in the attendance regularization feature of Zoho People. When trying to regularize past dates, the total working hours are not calculated correctly. For example, if I enter a check-in and check-out time for a previous day, the

    • Free webinar alert on November 19 - Email driven strategies - Master personality based styles

      Hello Zoho Community! Want to make email management easier, smarter, and more you? We’ve got just the session for you! Join our interactive, game-based webinar to discover how Zoho Mail adapts to your personality and work style. Learn practical hacks,

    • Push Notification for New Bookings in Zoho Bookings App

      when a someone schedules an appointment through the booking page, is there any option to receive a push notification in the mobile app?

    • Automation in Zoho Sprints

      Hi. I have a Sprints board with the following statuses: ToDo, InProgress, CodeReview, Testing, Preprod, Live When a ticket is moved from e.g. Testing to Preprod, the following tags should be modified: remove 'tested OK' remove 'ready for Preprod' add

    • Export Purchase orders as Excel

      Is it possible to export purchase orders as excel rather than PDF? Our suppliers don't want orders made in PDF, they need it to be excel

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • Draft & Schedule Emails Directly in Bigin

      Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to email in Bigin. We'll go over each one in detail, but here's a quick overview: Previously, you couldn't draft or schedule emails in Bigin, but

    • Create CRM Deal from Books Quote and Auto Update Deal Stage

      I want to set up an automation where, whenever a Quote is created in Zoho Books, a Deal is automatically created in Zoho CRM with the Quote amount, customer details, and some custom fields from Zoho Books. Additionally, when the Sales Order is converted

    • Auto sync Photo storage

      Hello I am new to Zoho Workdrive and was wondering if the is a way of automatically syncing photos on my Android phone to my workdrive as want to move away from Google? Thanks

    • Send email template "permission denied to access the api"

      Hello, Per the title, I'm trying to send a Zoho CRM Email template based on the advice given here: https://help.zoho.com/portal/en/community/topic/specify-an-email-template-when-sending-emails-in-custom-functions (I'd prefer to send right from Deluge

    • Zia’s AI Assist now helps you write clearer notes — in seconds

      After helping recruiters craft job descriptions, emails, and assessments, Zia’s AI Assist is now stepping in to make note-taking effortless too. Whether you’re recording feedback after an interview or sharing quick updates with your team, you can now

    • Add Prebuilt "Partner Finder" Template with Native Zoho CRM Integration in Zoho Sites To: Zoho Sites Product Team

      Hi Zoho Team, We hope you're doing well. We would like to request a prebuilt "Partner Finder" template for Zoho Sites, modeled after your excellent implementation here: 🔗 https://www.zoho.com/partners/find-partner-results.html ✅ Use Case: Our organization

    • Shortcut to fill a range of cells

      Good evening: I'm writing because I haven't been able to find a feature that allows you to select a range of cells, type in one of them, and then use a key combination to type in all of them. In Excel, the keyboard shortcut is Ctrl+Enter. I haven't found

    • Introducing Dark Mode / Light Mode : A New Look For Your CRM

      Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience for

    • Object required error

      Hi, I am getting an 'Object required' error on the line Call HideColumnsOutsideRange(ws, startOfWeek, endOfWeek) when I run the ShowCurrentWeek macro but not when I run the ShowCurrentMonth macro. Any ideas? Regards, GW Option Explicit Sub HideColumnsOutsideRange(ws

    • Zoho CRM - Rename "Estimates" in CRM Finance Suite Integration to "Quotes"

      I'm not sure if it's been 2 or 3 years now since Zoho Books renamed Estimates to Quotes. I still see "Estimates" in the Zoho CRM integration. Could this be added to Translation settings so that some customisation could be made on an account by account

    • Its 2022, can our customers log into CRM on their mobiles? Zoho Response: Maybe Later

      I am a long time Zoho CRM user. I have just started using the client portal feature. On the plus side I have found it very fast and very easy (for someone used to the CRM config) to set up a subset of module views that make a potentially extremely useful

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Latest update

    • New Series Announcement - Ecommerce Marketing Tips

      Running an online business is more than just having a website. It’s about getting the right customers to discover you, trust you, and keep coming back. To support your growth journey, we’re launching a weekly Marketing Tips series right here on Zoho Commerce

    • Marketing Tip #7: Add a blog to your online store

      A blog is more than content. It’s a magnet for new customers. Sharing product guides, styling tips, or industry insights through blog posts builds trust and helps you rank higher on search engines. Try this today: Write one blog post answering a common

    • Kanban view on Zoho CRM mobile app!

      What is Kanban? The name doesn't sound English, right? Yes, Kanban is a Japanese word which means 'Card you can see'. As per the meaning, Kanban in CRM is a type of list view in which the records will be displayed in cards and categorized under the given

    • Allow Regular Users to Directly Transfer Ownership of Files & Folders

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement related to file and folder ownership management in Zoho WorkDrive. At the moment, a regular user cannot directly transfer ownership of their files or folders

    • STOCK history in zohosheets

      is it possible to get historical stock value using stock function in zoho sheets? i could not see from and to period in the helper document.

    • Triggering rules on lead conversion

      There is no field on the Rule list for rule conversion to trigger an alert on liead conversion to a potential. I assigned a rule to file on any creation or update of a lead. The lead was changed a lead to a potential but no rule was fired. Rajesh Bhadra

    • Customised Funnel

      We are running the standard plan for our ZOHO CRM. I have been asked if there is a way to combine data from the Calls module, Deals module and Contact Module into 1 funnel, similar to the view you can get when viewing Deals By Stages, you can see the

    • Trigger Zapier on Deluge Insert Into Function?

      Hello, To get around the limitation of not being able to trigger a Zapier Zap on Record Update(this would be extremely useful to be able to do btw), I have created a Deluge script to copy the data from Form A to a Trigger Form B using the Insert Into expression from a Custom Action button on a Report from Form A.  This action does not trigger the Zapier Zap whereas manually adding a record or duplicating an existing record does trigger the Zap. Is Insert Into not the same as a manual Add in the context

    • Can you inject JS in an HML+CSS+Deluge Page?

      I have an HTML + CSS + Deluge page and need just a little vanilla JS functionality. However, it seems like Zoho Creator does not allow that. I'm required to create a JS widget. Is this correct? If so: 1. Won't this quickly consume my API limit if there

    • Display Client Name in Zoho Creator Client Portal Dashboard

      Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currently

    • Unified Inbox for all, including fetched mails

      I fetch mails from different third-parties mailboxes. But I need to switch mailbox too see fetched mails. It's strange. All mailboxes have one shared disk space for own mail and fetched mail, but why do we need to switch mailbox (on the left bottom) to

    • Zoho unified inbox

      The new changes have definitely improved things for switching between accounts.  But zoho still desperately needs a unified inbox.  It sucks to have to enter filters and folders for each and every inbox.  This seems like such a simple thing, i wonder why Zoho hasn't done it?

    • Marketer’s Space - Multi-Channel Campaigns for the Biggest Shopping Week with Zoho Marketing Automation

      Hello marketers, Welcome back to another post in Marketers Space! The biggest shopping week of the year is almost here, and it’s your moment to shine without the stress. With Black Friday and Cyber Monday just around the corner, being present across email,

    • Is there a problem with sharing workdrive files with links since last night?

      As per title, we can't access folders/files through share links since last night. I created ticket but we need quick solution and didn't hear back from the support yet. The files are still accessible by the main account but all zoho files that we are

    • Enable Screen Recording in Zoho WorkDrive Mobile Apps (Android & iOS)

      Hi Zoho WorkDrive Team, How are you? We are enthusiastic Zoho One users and rely heavily on Zoho WorkDrive for internal collaboration and content sharing. The screen-recording feature in the WorkDrive web app (similar to Loom) is extremely useful- however,

    • Production Management Tool (MRP / BOM)

      Hi Guys, is there any recommended App available that works with zoho and covers the needed applications for a production? What we need is a system that covers the BOM (bill of materials), MRP (material ressources planning), MRP II (manufacturing ressources

    • Function #53: Transaction Level Profitability for Invoices

      Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.

    • Next Page