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.
- Display all open Zoho Desk tickets associated with an agent in a tab called "Desk open tickets."
- 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)
- In the code snippet, the Zoho Desk API to list all associated tickets is invoked using the Zoho Projects request JS SDK method to get associated desk tickets.
- 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
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
Sticky Posts
Building extensions #10: Fetch customized user inputs, store them globally at the app level, and access them across entities
This data storage concept enables you to store data related to your extension for both entity properties and extension properties. In our previous piece, we looked at how to store data for entities using entity properties. In this post, we'll look atBuilding extensions #9: Store, retrieve, and access entity-specific data in widgets using data storage
Data storage - Overview Storing data related to the extension you are working on is essential. It can be saved as key-value pairs for an entity or extension, known as entity and extension properties, respectively. Data can be saved for the following entitiesBuilding extensions #7: Create custom widgets for a simplified end-user experience
Discover the benefits of using widgets! We explored the significance of widgets, prerequisites, and the availability of JS SDK methods as part of our previous post. In this post, let's go over a detailed example of using widgets along with certain ZohoBuilding extensions #6: Custom user interfaces with Widgets
Welcome to our post on Widgets for Zoho Projects! In our last post, we explored the significance of the connections feature, showed how to use it, and provided an example use case. In this article, we'll look at the importance of widgets, another featureBuilding extensions #5: Integrating applications with Zoho Projects through Connections
In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
What is Workqueue and how to hide it?
Hi， My CRM suddenly have this "Workqueue", may I ask how to set the permission of this tab?Batch/lot # and Storage bin location
Hi I want to ask for a feature on Zoho inventory I own a warehouse and I've gone through different management software solutions with no luck until I found Zoho, it has been a game changer for my business with up to the minute information, I'm extremely happy with it. It's almost perfect. And I say Almost because the only thing missing for me (and I'm sure I'm not alone) is the need of being able to identify the lot number of my inventory and where it is located in the warehouse. Due to the natureAdding Sender Address with Basic Plan
According to the knowledge base, I should be able to add Sender addresses with the Basic Plan. But whenever I try to add an email, it takes me to a search window and I cannot find any emails in the list. Even mine, which is the admin. email.Conditional Field Visibility in Bigin CRM
I would like to request support for conditional field visibility within Bigin CRM. This feature should allow administrators to configure show/hide rules for fields based on predefined criteria (e.g., field values, picklist selections, stage changes,Bill automation in Zoho Books
Hi I am looking for 3rd-party options for bill automation in zoho which are economical and preferably have accurate scanning. What options do I have? Zoho's native scanning is a bit priceyReporting Tags
We've been using reporting tags for years (before itemizing was available) and now we are finding reporting these tags are impossible to track. Reports have changed in the customization and our columns of reporting tags no longer show up. We do not useConsumption based inventory
I am currently using Zoho Books for my hospitality business, which includes lodging and restaurant services. We purchase many items in bulk for storage and consumption as needed. I'd like these items to be recorded as inventory when purchased and categorizedSmarter Access Control: Role-Based Access vs. Responsibility-Based Profiles
Every business has roles, responsibilities, and workflows. While roles help define structure, responsibilities within those roles are rarely the same. As your team grows, some members need access to only a specific set of features. Others require visibilityPartner with HDFC And Sbi Bank.
Hdfc and sbi both are very popular bank if zoho books become partner with this banks then many of the zoho books users will benefit premium features of partnered banks.API in E-Invoice/GST portal
Hi, Do I have to change the api in gst/e-invoice portal as I use zoho e books for my e-invoicing. If yes, please confirm the process.Member role in zoho meeting
does a user with member role can see other users in the organizationHow to post more than 4 Images on Instagram?
Hi I read several articles to the topic od how to post more than 4 images on instagram, but i can't figure out how it works. I can't find the content editor and i installesd the z share extension for google chrome. Could someone please help me? ThanClone Recurring Expenses
Our bookkeeping practices make extensive use of the "clone" feature for bills, expenses, invoices, etc. This cuts down significantly on both the amount of typing that needs to be done manually and, more importantly, the mental overhead of choosing theZoho Books - How to Invoke a Custom Function in Schedulers
We have multiple schedulers that send emails to customers in batches. Currently, we are maintaining the same code across several schedulers. Is it possible to use a custom function inside a scheduler script? If yes, how can we invoke the custom functionSpecial 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,Set Custom Icon for Custom Modules in new Zoho CRM UI
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 associatedIs Zoho Live Chat compatible with WordPress CMS?
Hello, I have a website called www.jjrlab.com and I'm interested in using Zoho Chat on it. Does it support WordPress CMS? Thanks.Introducing spam detection for webforms: An additional layer of protection to keep your Zoho CRM clean and secure
Greetings all, One of the most highly anticipated feature launches—Spam Detection in webforms—has finally arrived! Webforms are a vital tool for record generation, but they're also vulnerable to submissions from unauthenticated or malicious sources, whichBring your CRM and Desk app inside SalesIQ with widgets
Have you ever been confused and frustrated with multiple open tabs and switching back and forth from SalesIQ to other apps to perform your business-specific operations? How effective would it be to have all the required tools and data of the apps youSpeak Your Customers' Language: SalesIQ's chatbots now support 30 languages 🤖
We're unveiling some major upgrades to our chatbot that are set to revolutionize your experience! Now SalesIQ support 30 languages for both Zobot and Answer bot. By speaking your customers' language, you can enhance engagement, improve customer satisfaction,Repeat Column merge in ZOHO writer columns doesn't allow to set max columns per row
I'm using ZOHO writer to merge data from a ZOHO CRM subform and I want it to make a table. We're using Insert Table for Column Repeat, because this is what we need. (Name of column (Teamname) and underneath that a list of names of teammembers). It worksPersisting email signals to contact timeline?
Hello there. Regarding the email signals that are logged when a contact opens an email, am I correct that these signals are not logged to a contact's timeline? Ideally, I would like to have this context available for future follow-ups, if the contactTrouble with using Apostrophe in Name of Customers and Vendors
We have had an ongoing issue with how the system recognizes an apostrophe in the name of customers and vendors. The search will not return any results for a name that includes the mark; ie one of our vendors names is "L'Heritage" and when entering theReally 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!Upcoming update to Google Drive integration in Zoho Creator
Hello everyone, We're writing to inform you about an upcoming update to how Zoho Creator integrates with Google Drive. In Zoho Creator, during actions like importing files to create an app or attaching files to fields, you can choose files directly fromChanging Account Type in Chart of Accounts
Does anyone know how to change/edit the account type for an Account name in Chart of Accounts. Zoho will not let me do this for some reasonManaging Scheduled Replies
Communication is most effective when the intended message reaches the right person at the right time. However, this can be challenging when communication occurs across different time zones. By scheduling replies, businesses can ensure that responses reachShow price book list price
When using price books, once you add products to the price book in the Products related list you can display the Unit price which is the default list price; however, there is no option to show the price book list price. To see the price book list priceAllow Attaching Quartz Recordings to Existing Zoho Support Tickets
Hi Zoho Team, We would like to request an enhancement to how Zoho Quartz recordings integrate with Zoho Support tickets. Current Behavior: At the moment, each Quartz recording automatically creates a new support ticket. However, in many real-world scenarios:Can I hide empty Contact fields from view?
Some contacts have a lot of empty fields, others are mostly filled. Is there a way I can hide/show empty fields without changing the actual Layout? I would like to de-clutter my view, and also be able to add information later as I am able. I would beManage user roles and profiles from the Bigin app (iOS and macOS)
Hello everyone! We're happy to announce that you can manage user roles and profiles from the Bigin mobile app. The Users & Controls section has three subsections: Users, Profiles, and Roles. Users Employees who belong to your Bigin organization are calledSupport Bots and Automations in External Channels
Hello Zoho Cliq Team, How are you? We actively use Zoho Cliq for collaboration, including with our external developers. For this purpose, external channels are a key tool since they work seamlessly within the same interface as all of our other channelsForm to PDF template
I am looking to create a Form and when information is inputted, it will merge it into a PDF template we already have. There could be multiple lines in the form and each line inputs information into a new page of a PDF template.Please verify my account
Hi, We have just launched our website and received media coverage in our country. Hundreds of users are signing up for our platform every day. We would like to send them a welcome email, but we are unable to do so because our ZeptoMail account has notSubject character limit increase
We have an occasional user case where subject lines exceed 500 characters which is the ZeptoMail imposed limit. While I understand long subject lines are not "best practice", these are particular notification emails with specific information for clientAccount blocked
Yesterday I got my Zeptomail account blocked due to too many hard bounces. My account is used exclusively for sending transactional emails (eg. your order has been shipped, a form has been filled, etc) and the sudden blocking impacted hundreds of websitesNested notebooks
Dear Sir/Madam, I would like to know if it is possible to nest notebooks. It would be very helpful when there are too many, as it would improve organization. Thank you for your response. Best regards.Cannot see correct DNS config for mail after moving domain to another provider
I have moved my domain from one provider to another and after that zoho mail stopped working (expected). Problem is, zoho mail admin panel still shows (10 hours after move) that all records are correct while I haven't changed anything in my domain DNSProactive Alert for Existing Open Tickets per Contact / Account
Hello Zoho Desk Team, Greetings, and hope you’re doing well. We would like to submit a feature request aimed at improving agent awareness and efficiency when handling tickets in Zoho Desk. Use case When an agent opens a ticket (new or existing), it isNext Page