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
Tip #57- Accessibility Controls in Zoho Assist: Mobility- 'Insider Insights'
Remote support should be easy to navigate for everyone. For users with mobility-related accessibility needs, long sessions and complex navigation can be challenging. Zoho Assist’s Mobility Accessibility Controls simplify interaction through keyboard-basedTotal Cost in reports showing zero
The image below shows my issue. The column Total Cost should show the cost to our company based on hours logged and the employee's rate. For instance, if the person working on Subtask 1 is paid 20/hr, then Total Cost should display $160 ($20x8 loggedTo print Multiple delivery notes in batches
In Zoho Books, we can print a Delivery Note from an Invoice using the Print Delivery Note option, but it is non-editable and always prints all line items from the invoice. Our requirement is to deliver invoiced items in batches and print delivery notesInvoices not arriving and mail server settings
I am having an issue where some clients are not receiving invoices. I have configured Zoho Books to send on my behalf and configured the appropriate SPF, DKIM and DMARC settings on my mail server and tested these as working. I get the CC'd copies so IUPLOAD A CREATED PDF AUTOMATICALLY
Using the html header pdf+print button, I have managed to find a way to have a user create a pdf using entered form data. Using the schedule button, I can have a "file uploaded" pdf mailed to someone as an attachment. The missing piece is to be able to add the pdf, created in that html page to a file upload field automatically? Right now one has to save it to computer and then upload it in a FILE UPLOAD FIELD. Any help would appreciated !Consolidated Department-wise Payroll Cost Summary Report
Hello Zoho Payroll Team and Community, I am writing to discuss a reporting requirement regarding department-level expense tracking within Zoho Payroll. As we scale and manage salary distribution for employees across multiple departments, such as Accounts,How to remove chat icon from knowledge base?
I have set up a knowledge base to hold FAQs and documentation. It is currently standalone, and not integrated into our website. On every page there is a chat button in the bottom left corner that says "We're offline, please leave a message." How can I[ZohoDesk] Improve Status View with a new editeble kanban view
A kanban view with more information about the ticket and the contact who created the ticket would be valueble. I would like to edit the fields with the ones i like to see at one glance. Like in CRM where you can edit the canvas view, i would like to editAutomated Dismissal of Specific Notifications and Centralized Control of Toast Notification Settings
Dear Zoho Team, I hope this message finds you well. We would like to request two enhancements related to notification handling within Zoho Desk: Automatic Dismissal of Specific Notifications: Currently, when certain actions are taken in the ticket listShow field in spreadsheet view depending on other field value
Hello. Not sure if this is possible but let's say i have spreadsheet view in Creator with four different fields Field A, B, C and D Then i have a field named Response which for one record could contain only one of the pre-definde choices below A, B, CIntergrating multi location Square account with Zoho Books
Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.Zoho Learn Zapier Integration
Hello all, Is there any plan to integrate Zoho Learn with Zapier? It seems almost all Zoho products are in Zapier, with the exception of Learn and Marketing Automation.Notice: SalesIQ integration paused on Zoho Sites
I have this notice on my Zoho Sites in the SalesIQ integration setup. Can someone assist? "This integration has been temporarily paused for users. Reconnecting SalesIQ after disconnection will not be possible until we provide further updates." thankDifferences between Zoho Books and Zoho Billing
Without a long drawn out process to compare these. If you were looking at these Books and Billing, what made you opt for one and not the other. ThanksNew Feature : Copying tickets with all the contents such as conversations/history/attachments etc
Sometimes our customers and distributors do create tickets (or send emails) which contain more than one incident in them and then also some of the further conversations which are either created by incorrect new tickets or replies to old tickets are being created as combined tickets. In such cases we require to "COPY" the contents of the tickets into separate tickets and merge them into their corresponding original tickets. The "CLONE" feature doesn't copy the contents (especially the conversationsComo se agregan los empleados
Necesito saber si para agregar empleados los mismos necesitan tener licenciasDeluge Error Code 1002 - "Resource does not exist."
I am using the following script in a Custom Button on a Sales Return. Basically, the function takes the information in the sales return (plus the arguments that are entered by the user when the button is pushed) and creates a return shipping label viaAdding multiple Attendee email addresses when adding a Zoho Calendar event in Zoho Flow
I am trying to integrate Notion and Zoho Calendar via Zoho Flow. However, the Attendee email address supported by Zoho Calendar - Create event only supports one email address, so I am having difficulty implementing automation to automatically registerGraceful Handling of Exceeded Option Limits
Hi Zoho SalesIQ team. I would like to submit a feature request to deal with a bug in salesIQ Current Behavior (Bug): When a dynamic list passed to the Single Select Option Card contains more than 20 options, the Zobot stops responding (freezes/hangs)System default SLA descriptions can't be modified
The system default SLAs have identical descriptions for all SLA levels, but their settings differ. However, I am facing an issue where I cannot modify these descriptions and save the changes. The content of the description box can be edited but the changesAdding non-Indian billing address for my Zoho subscription
Hey Need help with adding a non-Indian billing address for my Zoho subscription, trying to edit the address to my Singapore registered company. Won't let me change the country. Would appreciate the help. Regards, RishabhHow to create one ZohoCRM organisation out of a multi-organization?
Hi, we have a multi-org including two different Zoho CRM organizations for two companies using respectively EUR and USD as default currency. I was wondering if there is any easy way to merge the two organizations into just one, so that users may accessGray screen while signing documents
We are all getting a "gray" screen when trying to sign documents in Zoho sign. Anyone else having issues?Projects custom colors replaced by default orange
Since yesterday, projects uploaded to Zoho, to which I had assigned a custom color, have lost the customization and reverted to the default color (orange). Has anyone else had the same problem? If so, how did you resolve it?Interview booked through Invite but no Notifications
We have a workflow that was developed through a developer/partner that was tested and worked. Today, we pushed a candidate through the process and invited them to an in-office interview. They were sent the booking link (as usual and as tested before successfully)WebDAV support
I need WebDAV support so that I can upload/download (and modify) documents from my local file system. Is anything planned in his direction?Automatiser la gestion des SLA dans Zoho Desk avec Zoho Contracts
Les équipes du service client s’efforcent d’assurer un support rapide, régulier et fiable pour garantir la satisfaction de chaque client. Les accords de niveau de service (SLA) permettent de clarifier les engagements en définissant les termes et conditionsiOS App doesn't refresh for Document Creation
Hello Zoho team, I have created a workflow to be used on a mobile iOS device which starts in Zoho Creater and ends with a murge and store function that then opens the newly created document within the Zoho Writer app. This process is working great howeverUploading a signed template from Sign to Creator
Good day, Please help me on how to load a signed document back into Creator after the process has been completed in Sign. Below is the code that I am trying, pdfFile = response.toFile("SignedDocument_4901354000000372029.pdf"); info pdfFile; // AttachZoho DataPrep and File Pattern configuration
I'm using Zoho data prep to ingest data from One Drive into Zoho Analytics... The pipeline is super simple but I can't any way to get all the files that I need. Basically I need to bring all the files with a certain pattern and for that I'm using a regexAssistance needed: Activation of a domain
Hello Zoho Support, I purchased the .com domain "primesolva.com" via Zoho 6 days ago. The domain is still pending, and I cannot access the DNS panel to add the TXT verification for domain ownership. Please confirm the registration status and help me activateOperation not permitted
I am trying to add an email address to the list of user but I am getting error Operation not permittedRequest to Permanently Delete Email User (info@mehbobgulf.com ) from Old Organization
Please permanently delete the user email info@mehbobgulf.com It is still associated with my old Zoho organization. I cannot delete it because it shows ‘You cannot delete email. Zoho host’. I need to use this email in a new Zoho account.”Client host [89.36.170.5] blocked using Spamhaus
Hello please make make actions for delist ..... "Client host [89.36.170.5] blocked using Spamhaus"Suggestion: Option to Re-run a migration
As I'm going through a migration process, I like the IMAP migration tool, but it would be better if there were an option to re-run the same migration as configured. There's not even an option to copy/edit one that's already there. Just run if it hasn'tIssue with "Add Your Mobile Number"
Hello, I am trying to sign up for email service for a domain name, and I cannot finish the authentication. When I enter my mobile number, I receive the message "We’re unable to send OTP to this mobile number. Please contact support-as@zohocorp.com". Izoho mail non vérifié
Bonjour, Il y'a un jour que j'ai acheté un domaine et toute les tentatives pour l'associé a mon compte shopify son vaine. j'ai essayé TXT sans suite après, j'ai essayer avec CNAME sans suite. j'aurais besoin de votre assistance pour associé mon mail.Unable to send message;Reason:553 Relaying disallowed. Invalid Domain
i have facing the issue "Unable to send message;Reason:553 Relaying disallowed. Invalid Domain" if i verify domain evertthing i did but still face the same error.ZohoMail is so close to being Perfect BUT
Why don’t you have HILIGHTING???!! I've been trying to find a substitute for Edison Mail but I want & need hilighting (preferably in more than just yellow)! Is this even on your To Do list? I’m so disappointed. 🙄Override Auto Number field?
We are preparing to migrate from Salesforce. In Salesforce, we auto-generate a unique number on our Opportunities (Potentials). If the Opportunity results in a contract, we use that unique number as the Contract number. There are some situations whereNext Page