Building extensions #7: Create custom widgets for a simplified end-user experience

Building 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 Zoho Projects JS SDK methods.

Use case: A developer is working on a Zoho Projects task and wants to know if there are any existing references that could be used to get a head start on their work.

Goal: Our goal here is to simplify the developer's job by presenting them with articles that are relevant to the task at hand.

Solution: Widgets! To achieve this goal, it would be ideal for the developer to have access to relevant Zoho Desk articles from a tab on the Task Details page. This can be accomplished by developing a custom widget.

Required components:
  1. A connection between Zoho Projects and Zoho Desk.
  2. An extension configuration process that includes:
A. Creating an extension
B. Configuring the plugin manifest
C. Setting up the widget code to display the Zoho Desk articles on the Zoho Projects Task Details tab
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).

1. Connection

We have created a connection to establish a secure integration between Zoho Projects and Zoho Desk.



2. Extension Configuration
A. Extension creation: We have created a new extension for Zoho Projects.



B. Plugin-manifest.json configuration: Once the extension is created, we next configure 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.



C. Setting up the widget code:
Now that we have the connection established, the extension created, and the plugin-manifest.json configured, let's go ahead and set up the custom widget code to achieve our goal.

Index.html - Widget code

<!DOCTYPE html>
<html>
<head>
<title>App Default Screen</title>
<style>
div.a {
line-height: 200%;
}
</style>
</head>
<body>
<div class="a">
<ul id="demo" style="font-size:20px"> <b>Article Details</b></ul>
</div>
</body>
<script>
var subject = "";
Util = {};
zohoprojects.init().then(function() {
//Fetching the task subject using the Zoho Projects JS SDK method
zohoprojects.get("task.name").then(function(response) {
subject = response.data;
var articledetails = {
type: "GET",
headers: {
"orgId": "xxxxxxx",
"Content-Type": "application/json"
}
};
//Using the request JS SDK method to invoke and get the Desk articles matching the task subject 
using the connection
zohoprojects.request(url, articledetails, "zohodeskforlistingarticles").then(function(response) {
var list = document.getElementById('demo');
var a = document.createElement("a");
var result = response.result;
var data = result.data;
//Looping through the articles
for (i = 0; i < data.length; i++) {
var title = data[i].title;
var author = data[i].author;
var authorname = author.name;
var weburl = data[i].webUrl;
var entry = document.createElement('li');
entry.innerHTML = title.link(weburl) + " by " + authorname;
list.appendChild(entry);
}
});
});
});
</script>
</html>
  • Here, we utilized the Zoho Projects JS SDK method to extract the task name, which is the task subject.
  • We then used the Zoho Projects Request method to invoke the Zoho Desk API to search for articles.
  • The Request method is used to make requests to third-party applications. It must be invoked with the belowparameters:
  • Third-party API URL: This is the URL of the third-party application's API that needs to be invoked. In our case, we need to fetch articles from Zoho Desk based on a search value, so we used the Zoho Desk Articles Search API. We've included a search query parameter in the API as the title of the help article (wildcard search), and we've set the value of the search query parameter (title) as the task's subject. As a result, the API will look for any Zoho Desk help articles that satisfy a wildcard match with the task subject.
  • Data object: Depending on the type of action being performed, each API requires a method type, body, header, and/or parameters to be invoked. To invoke the third-party application API, a data object with the necessary API details must be created. In our scenario, a header providing the Zoho Desk org ID is required to call the Zoho Desk article search API, which we have hardcoded.
  • Connection: To work on the data of a third-party application safely, we would need to connect to that application. The link name of the connection created for the third-party application is the value of the connection parameter. This value will be available in the JSON code generated when the third-party application connection is established. This connection allows you to invoke the Zoho Desk API securely.
  • Once the API is invoked by providing the necessary parameters for the Request method, the response for the invoked Zoho Desk search articles API is returned. We extract the information we require from the response, like the title, author name, and web URL. We then list and display this data in the Zoho Projects task details widget, Related Articles.
Sample output
  • Access your Zoho Projects portal and enter into a task.

  • Choose the Related Articles task tab, which is the widget we created.

  • The widget displays the available Zoho Desk articles that are related to the task at hand.

  • Finally, click on an article to view its detailed information in Zoho Desk.


Using this method, developers working on Zoho Projects tasks can discover relevant articles and get helpful information to troubleshoot problems.

You can further enhance this use case by including a text box in the widget that allows the developer to enter a keyword and search for related articles using the Zoho Desk search articles API.

You can also accomplish use cases such as creating a task tab widget to associate data with a task. Every time the task loads, task-specific data can be displayed on the Task tab. To accomplish these kind of use cases, the data storage feature is available in Zoho Projects. We look forward to exploring the data storage feature,, and other use cases for custom widgets, in future posts.

We hope you found this information useful. Follow this space for further updates!

Sign up for a Zoho Developer account and start developing extensions for Zoho products using Sigma.

SEE ALSO


Next>>

    Access your files securely from anywhere








                            Zoho Developer Community



                                Bootcamp
                                Community
                                Pricing
                                Webinars
                                What's New
                                Integrations
                                Contact Support
                                Contact Sales
                                  Zoho Survey Resources
                                    Features
                                    Survey Templates
                                    Integrations
                                    Community
                                    iOS Mobile Surveys
                                    Pricing
                                    Android Mobile Surveys
                                    Insurvey Blogs
                                    Insight Blogs
                                    Tips & Tricks





                                                Latest Feature Updates

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                  • Ask the Experts




                                                      Zoho SalesIQ Resources


                                                            Manage your brands on social media
                                                            Access Zoho Social

                                                              Zoho Pagesense Resources


                                                                  Zoho TeamInbox Resources

                                                                    Zoho DataPrep 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

                                                                                      • CRM Community Learning Series

                                                                                        CRM Community Learning Series


                                                                                      • Kaizen

                                                                                        Kaizen

                                                                                      • Functions

                                                                                        Functions

                                                                                      • Meetups

                                                                                        Meetups

                                                                                      • Kbase

                                                                                        Kbase

                                                                                      • Resources

                                                                                        Resources

                                                                                      • Digest

                                                                                        Digest

                                                                                      • CRM Marketplace

                                                                                        CRM Marketplace

                                                                                      • MVP Corner

                                                                                        MVP Corner









                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now


                                                                                            Zoho Show Resources

                                                                                              Zoho Writer

                                                                                              Get Started. Write Away!

                                                                                              Writer is a powerful online word processor, designed for collaborative work.

                                                                                                Zoho CRM コンテンツ



                                                                                                  Nederlandse Hulpbronnen


                                                                                                      ご検討中の方




                                                                                                              • Recent Topics

                                                                                                              • Arattai App Features Update

                                                                                                                1. Offline Messaging & Sync Enable users to compose messages without internet and deliver them automatically via peer-to-peer methods (Bluetooth/WiFi Direct) when nearby users are available. This would be a game-changer for rural India with unreliable

                                                                                                              • How to add Product Add-Ons, Mandatory Forms, and Auto-Save Address in Zoho Commerce

                                                                                                                Hi all, I need help setting up several behaviors in Zoho Commerce. I can’t find the correct configuration options, so I want to confirm whether these are supported or if there is a workaround. 1. Product-Specific Add-Ons (Example: GWB Subscription) When

                                                                                                              • Zohomail

                                                                                                                Im trying to setup email address zoho

                                                                                                              • PROBLEMA

                                                                                                                Salve, non riesco a inviare email, e mi esce una tabela errore temporaneo. come posso risolvere il problema ?

                                                                                                              • Forever FREE Business Email with Zoho Mail

                                                                                                                Forever FREE Business Email with Zoho Mail: is it available?

                                                                                                              • Weekly Tips : Make collaboration effortless with Whiteboard in Zoho Mail

                                                                                                                Working with your team often means switching between emails, notes, and other applications just to explain an idea. Maybe you are trying to sketch a layout, plan a workflow, or quickly brainstorm ideas—with text alone, things can get confusing. So how

                                                                                                              • Formula field number of days between 2 dates

                                                                                                                Hi, I want to have a formula field which calculates the following: IF EndDate < TODAY and Oproep is true (this is a checkbox field) than EndDate - StartDate, otherwise TODAY - StartDate It should calculate the number of days How can I write this for

                                                                                                              • 'email address already exists'

                                                                                                                I deleted a user from my organization and want to use the same email address that user had, but the email address seems to still exist somewhere as I get 'email address already exists' when I try and create it. I have deleted the entire organization and

                                                                                                              • ZOHO reporting DKIM entries are not configured, when they have been configured and verified by 3rd parties

                                                                                                                Why is ZOHO reporting to my organisation users the following: "The DKIM entries in your domain's DNS records are not configured. Please contact your administrator for configuring DKIM to ensure optimal RSVP invite delivery." When I have configured the

                                                                                                              • Manage Bookings directly from Zoho Mail

                                                                                                                Greetings from the Zoho Bookings team! We’re introducing the new Zoho Bookings extension for Zoho Mail, designed to help you view appointments, copy time slots and share booking links without leaving your inbox. This integration brings scheduling right

                                                                                                              • My notes from the past 2 months have disappeared

                                                                                                                Hola, necesito ayuda urgente. Hoy, al iniciar sesión en mi Zoho Notebook como todos los días, me llevé una gran sorpresa al descubrir que todas mis notas de los últimos dos meses habían desaparecido. Estas notas son muy importantes para mí, ya que uso

                                                                                                              • How can I load a network into the cliq desktop app?

                                                                                                                I have both the standard cliq log in for my org and I am part of a cliq network. In the browser I can choose which I log in to. However, in teh desktop app if I log in it will alwasy load my org's cliq. Can I switch this to the network I have create

                                                                                                              • Ability to modify what displays in calendar invite?

                                                                                                                I am a long time calendly user and want to make the switch to bookings.  I understand that there is not currently a meets/hangouts integration, is one on the roadmap? Is there anyway I can modify the calendar invite to include the meet link?  I can add it to the emails no problem, but I would also like it to display on their calendar.  Is there some work around I can do to get it on the calendar?  Also am I able to modify the calendar event title?

                                                                                                              • Issue with Booking Confirmation Page Not Displaying, Leading to Customer Anxiety and Unnecessary Support Calls

                                                                                                                I am writing to express my growing concern regarding the confirmation process in Zoho Bookings, particularly the inconsistent display of the confirmation page after a successful payment. As a mobile service provider, I rely on Zoho Bookings platform for

                                                                                                              • Is it possible to turn off all capabilities for a customer to schedule, reschedule or cancel an appointment?

                                                                                                                Is it possible to turn off all capabilities for a customer to schedule, reschedule or cancel an appointment? I would like to set it up so only staff can schedule appointments. Is this possible?

                                                                                                              • Is there a way to generate a virtual meeting for a group service in Zoho Bookings?

                                                                                                                Are virtual meetings not supported for group services/meetings? I have integrated Zoom with one-on-one services, but I need a way to create an online group meeting. Thanks

                                                                                                              • Where we can change the icon in social preview

                                                                                                                Hi, we changed our logo, and the image that appear in preview (ex : when we post a appointment link somewhere) is still our old logo. I did change our logo in the org setting. https://bookings.zoho.com/app/#/home/dashboard/settings/basic-info?clview=false

                                                                                                              • Zoho Bookings changes Lead Source

                                                                                                                Hi. i would like to know if there's a way for Zoho Bookings to not change the lead source when booking a lead for an appointment as the lead source will be used in a report. Scenario: Lead source: Website after booking an appointment Lead source: Zoho Bookings Thanks. Dan

                                                                                                              • Need to set workflow or journey wait time (time delay) in minutes, not hours

                                                                                                                Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integer

                                                                                                              • Suggestion: Associating Assets with Company in Zoho FSM

                                                                                                                Hello Team, I would like to share an idea based on practical experience. Currently, all assets in the Zoho FSM Asset module are linked to a specific contact person. I would like to know if it is possible to associate assets with a company instead. This

                                                                                                              • Zoho Inventory / Finance Suite - Extend Visibility of File Names on Attachment Fields

                                                                                                                Hi Inventory / Finance Suite team, I noticed recently that when you add an attachment field to a module in Inventory, only the first 8 characters of the file name are visible on the details view. 8 characters is not a useful amount and there is plenty

                                                                                                              • Many Notes Becoming Unusable

                                                                                                                Hello. The Notebook app is becoming unusable. I'm getting odd-looking results from my searches. Some of the notes, after clicking on them, show an update button that does absolutely nothing. Not sure what has happened, but it would be nice to get this

                                                                                                              • Kaizen #218: Actions APIs - Field Updates

                                                                                                                Hello all!! Welcome back to a fresh Kaizen week. In the previous weeks, we covered Workflow Rules APIs, Actions APIs - Email Notification APIs, and Tasks Update APIs. This week, we will continue with another Actions API - the Field Update API in Zoho

                                                                                                              • How Contract Types and Templates Form the Backbone of Zoho Contracts

                                                                                                                Every contract in Zoho Contracts starts with two essential elements: Contract Type and Template. These are not just administrative steps. They define how every contract in your organization is created, governed, and managed over time. Let us look at the

                                                                                                              • CRM Related list table in Zoho analytics

                                                                                                                In Zoho Analytics, where can I view the tables created from zoho crm related lists? For example, in my Zoho CRM setup, I have added the Product module as a related list in the Lead module, and also the Lead module as a related list in the Product module.

                                                                                                              • Zoho learn Custom portal - networkurl & CustomPortalId

                                                                                                                I want to get my individual account’s networkurl and customportalId to use in this API: https://learn.zoho.com/learn/api/v1/portal/<networkurl>/customportal/<customportalId>/manual How can I retrieve the networkurl and customportalId using the API? I

                                                                                                              • Connecting zoho creator to zoho writer to send prefilled documents

                                                                                                                i will paste the worflow below // Get user's submitted data from the form userSalary = input.Current_Salary; userCIBIL = input.CIBIL_Score; userEmail = input.Email; userName = input.Name; // You need to get the Document ID from the URL of your Zoho Writer

                                                                                                              • Zoho Creator to Zoho Writer for prefilled documents...

                                                                                                                In response to the question about connecting Zoho Creator to Zoho Writer for prefilled documents, I wanted to share a working implementation that demonstrates how to use the record_id parameter with the Zoho Writer Merge API. This allows Writer to automatically

                                                                                                              • Introducing our latest privacy enhancement - Hiding email IDs in Zoho Cliq Networks

                                                                                                                Hello everyone, Zoho Cliq Networks offers a powerful collaboration platform that allows businesses to create dedicated digital workspaces for external vendors, partners, or individuals you want to communicate with professionally without adding them to

                                                                                                              • zoho performance

                                                                                                                OVERALL CONFIGURATION OF ZOHO PERFORMANCE Quarterly performance review Self rating and scoring Manager rating and scoring

                                                                                                              • When will it be possible to edit Subform records via either views or tabular reports?

                                                                                                                Hey there, data maintenance often requires mass update of quite a lot of records. While this is a piece of cake via either List view or Zoho sheet view, the same cannot be carried out for subform records yet. When one of the two options will be made available?

                                                                                                              • Onboarding

                                                                                                                Hello Team, Im yuktha working as HR at Ossisto Technologies. We are currently utilizing zoho for onboarding candidate. right now facing issue with onboarding Attaching the screenshots for your reference

                                                                                                              • How do I change a form's name? Why isn't this more intuitive?

                                                                                                                Can someone please let me know how to change a form's name?

                                                                                                              • Control Over Zia Generative AI Reply Assistance Behavior

                                                                                                                Hello, I would like to request an enhancement to the Zia Generative AI feature, specifically concerning the Reply Assistance within Zoho Desk. Current Issue: When replying to a ticket, the Ticket Properties section is automatically replaced by the Zia

                                                                                                              • Zia now integrated with Open AI in Zoho Desk

                                                                                                                The powerful integration of Zia with OpenAI, has empowered Zoho Desk reach a new level of efficiency and performance. With contextual self-service capabilities, Zia enables agents to boost their productivity and delivers superior customer experiences.

                                                                                                              • Zoho Desk Partners with Microsoft's M365 Copilot for seamless customer service experiences

                                                                                                                Hello Zoho Desk users, We are happy to announce that Zoho Desk has partnered with Microsoft's M365 to empower customer service teams with enhanced capabilities and seamless experiences for agents. Microsoft announced their partnership during their keynote

                                                                                                              • Employee self-service portal: Onboarding and continuous learning platform for support reps

                                                                                                                Hello everyone, In any organization, employees must go through multiple courses to learn about the product, their organization's standards, and how to respond to customer queries using the knowledge base articles available. This typically requires completing

                                                                                                              • 2024 Email Authentication Standards: Elevating Security with Google and Yahoo

                                                                                                                In contemporary email communication, email authentication plays a pivotal role in mitigating email fraud, spam, and phishing attacks. Brace yourself for a new level of security. Starting February 2024, Gmail and Yahoo will be implementing robust email

                                                                                                              • Contact custom field in layout

                                                                                                                Good day, all, I have an "Extension" custom field in contacts, and would like to display the contact extension in the ticket layout, but I don't seem to be able to. What am I missing? Thanks Rudy

                                                                                                              • Exact match in name when searching workdrive

                                                                                                                Hello, I am wondering how to search workdrive files/folders with an exact match in the name. For example, when I search across folder with the url param search[name]=someName, I get multiple results such as "someName", "someNameAndMore", or "someName

                                                                                                              • Next Page