Create custom widgets for a simplified end-user experience | Community | Zoho Projects

Create custom widgets for a simplified end-user experience | Community | Zoho Projects

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


    Access your files securely from anywhere



                        Zoho Developer Community




                                              • Desk Community Learning Series


                                              • Digest


                                              • Functions


                                              • Meetups


                                              • Kbase


                                              • Resources


                                              • Glossary


                                              • Desk Marketplace


                                              • MVP Corner


                                              • Word of the Day


                                              • Ask the Experts





                                                        Manage your brands on social media



                                                              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

                                                                                  • 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 Writer

                                                                                          Get Started. Write Away!

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

                                                                                            Zoho CRM コンテンツ










                                                                                              Nederlandse Hulpbronnen


                                                                                                  ご検討中の方




                                                                                                        • Recent Topics

                                                                                                        • Change rate after xxxx kilometers

                                                                                                          Is there a way to change the miileage rate after a certain mileage. After 5000 kilometers, we want the rate to automaticly change. Thank !
                                                                                                        • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

                                                                                                          Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:
                                                                                                        • Can't attach

                                                                                                          I am having problems sending attachments. I am trying to attach some PDFs to an email (as I do several times every day) but the progress bar on the attached file gets stuck somewhere between 20%-70% and when I hit send I get the error message 'Attachment
                                                                                                        • WhatsApp Channels in Zoho Campaigns

                                                                                                          Now that Meta has opened WhatsApp Channels globally, will you add it to Zoho Campaigns? It's another top channel for marketing communications as email and SMS. Thanks.
                                                                                                        • Existing subform data is being changed when new subform entries are added

                                                                                                          I'm having trouble with existing subform data being changed when new subform entries are created. I have the following setup to track registrations for a girl scout troop: Main Form: Child Subform: Registrations The data are a one-to-many relationship where each Child record has many Registrations (new Registration will be created for each year the child is in the troop.) Per the instructions, I have created the subfom, added it to the main form, gone back to the subform and created the bi-directional
                                                                                                        • Bigin: filter Contacts by Company fields

                                                                                                          Hello, I was wondering if there's a way to filter the contacts based on a field belonging to their company. I.e.: - filter contacts by Company Annual Revenue field - filter contacts by Company Employee No. field In case this is not possibile, what workaround
                                                                                                        • Button on Deal screen to automate changing deal dates?

                                                                                                          Hi I spend a lot of time working with our accounts managers here moving deals around the calendar, qualifying things etc. I'd like to have an easy way to change the closing date on a deal, from the deal screen table, rather than either click in to the
                                                                                                        • Attention API Users: Upcoming Support for Renaming System Fields

                                                                                                          Hello all! We are excited to announce an upcoming enhancement in Zoho CRM: support for renaming system-defined fields! Current Behavior Currently, system-defined fields returned by the GET - Fields Metadata API have display_label and field_label properties
                                                                                                        • How to authenticate my domain on ovh

                                                                                                          I don't succeed in adding an domain authentification on ovh. Should i first create a subdomain? But this doesn't work either, ti gi ves te same screen and the next button is greyed out when adding the info received from zoho
                                                                                                        • Undelivered Mail Returned to Sender

                                                                                                          commerciale@etruriadesign.it, ERROR CODE :550 - "The mail server detected your message as spam and has prevented delivery." I have been corresponding with the receiver and they wrote "Ciao, ho fatto verificare ma purtroppo non è un problema che deriva
                                                                                                        • Kaizen #190 - Queries in Custom Related Lists

                                                                                                          Hello everyone! Welcome back to another week of Kaizen! This week, we will discuss yet another interesting enhancement to Queries. As you all know, Queries allow you to dynamically retrieve data from CRM as well as third-party services directly within
                                                                                                        • Notifications no longer being sent to my email address for any scheduled events

                                                                                                          The last few weeks, I stopped receiving email notifications to my email for events I have scheduled and have a selected reminder option checked.
                                                                                                        • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

                                                                                                          I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the
                                                                                                        • Group to shared mailbox conversion

                                                                                                          Is it possible to convert a group in Zoho mail to a shared mailbox?
                                                                                                        • Mail Merge Stuck in Queue

                                                                                                          I am trying to send Mail Merge's and it never sends out to the full list. It always hits a portion and the rest remain in the "Queue" - the emails I am sending are time sensitive, so I need this to be resolved or have a way to push the emails through
                                                                                                        • why do I get error message each time I open zoho mail

                                                                                                          why do I get error message each time I open zoho mail
                                                                                                        • Cross-department Parent-Child ticketing for faster and efficient ticket resolution

                                                                                                          Hello everyone, Organizations frequently need to have multiple departments set up in their customer service ticketing system. However, when a customer raises an issue or an internal process that requires agents to collaborate with their peers, a lack
                                                                                                        • Can't setup email on outlook (Android Phone)

                                                                                                          Dear All Support, I have tried many time to setup this zoho mail over the android phone (outlook app) . But it's always show me to check username/password of my email . But i can login from the webmail , that's why i confuse , How can i able to access
                                                                                                        • Having problem with MX records and SPF

                                                                                                          Hi there, I have been facing a problem that my zoho mail doesn't receive mail. See Error in below The MX Records of your domain(s) mydomain.com are not pointed to Zoho and you may not receive emails in Zoho SPF entries in your domains DNS are not configured
                                                                                                        • ZOHO Mail App Not working

                                                                                                          There seems to be an issue with Zoho Mail App today. It is not connecting to server, internet is working fine, tried uninstalling app and reinstalling, loading circle keeps spinning round. Is there an update on the way?
                                                                                                        • Account with own domain, IMAP vs IMAPPRO

                                                                                                          Hi, I have email account with my own domain. I use Em Client email plan and when I use IMAPPRO incoming host, email comes in Em Client only when I restart program. If I use IMAP incoming host everything is ok. Port is 993 both option. Why so? What´s different
                                                                                                        • Automatic Display the Price from CPQ

                                                                                                          Is it possible to display the discounted price from CPQ that I created for my customer? For example, when the customer selects Product A, instead of showing the default price, it should display the discounted CPQ price.
                                                                                                        • Enhancement - Financial Reports

                                                                                                          Hello Everyone, As part of enhancing reports in Zoho Books, we have added an option`Compare With` in Financial reports. Using this, you can compare the current period with Previous Year(s)/Previous Period(s) (Maximum 3 periods). This option is available in the following Financial Reports: * Profit and Loss * Cash Flow Statement * Balance Sheet Please feel free to share your feedback.  We are glad to hear from you. Regards, Nithya - Zoho Books Team.
                                                                                                        • Associating Multiple Work Orders with a Single Invoice in Zoho FSM

                                                                                                          Hello Everyone, Is it possible to associate multiple Work Orders with a single Invoice in Zoho FSM? Best Regards, Subhash Kumar
                                                                                                        • Sent emails not going and showing "Processing"

                                                                                                          Hello Team, Could you please assist with sent emails showing "processing" and not actually going through? Many thanks and regards, Cycology
                                                                                                        • Free Plan mail accounts details

                                                                                                          In the zoho mail pricing there's a free plan that includes: FREE PLAN Up to 25 Users 5GB* /User, 25MB Attachment Limit Webmail access only. Single domain hosting. I need to make sure that I'm able to create multiple email accounts in the form of: name@domain.com
                                                                                                        • Spf cannot verify

                                                                                                          Hello, Thank you for your service. I am not able to configure my SPF. I have follow several times your instructions but it does not work. I cannot verify. My domain is ptjpt.co.id Please help me
                                                                                                        • Custom Function : Copy multilookup field to text field

                                                                                                          Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2
                                                                                                        • Introducing Global Sets for easy management of similar picklists in CRM

                                                                                                          [Update | Sep 2024] We've increased the maximum count limit for global sets. These new limits are now live for AU and JP data centers and will be gradually opened to all. Please check this link for the updated limits. Hello folks, As administrators who
                                                                                                        • TikTok (and other social platform) Messages and comments of the past

                                                                                                          When I link a social channel, Zoho will show in "Inbox", "Messages" and "Contact" sections the interaction done in the past? (comment, messages...)
                                                                                                        • Announcing Zoho Community Developer Bootcamps in India – Extensions

                                                                                                          Hey everyone! We're back with another line-up of Zoho Community Developer Bootcamps in India! Following the success of the first leg of bootcamps on Extensions, we're now ready with the second leg. These bootcamps focus on empowering developers of all
                                                                                                        • Unable to send message:mail rate exceeded limit

                                                                                                          Hi Admin I just got an email that outgoing has been blocked, I know why is the reason said " Mail rate exceeded limit", but I don't know the rule of Mail rate , so please tell me how to avoid the situation and fix this issue , my email id is morgan@homemesh.com.tw.
                                                                                                        • Error when using fetchById in Client Script

                                                                                                          When using client script when creating page (onLoad), I suddenly getting error "Cannot read properties of undefined (reading 'Accounts')" when using: var account_details = ZDK.Apps.CRM.Accounts.fetchById(account_id); I'm getting this error whenever trying
                                                                                                        • Los correos que envio, llegan como spam (Bandeja de correos no deseados)

                                                                                                          Estimados, Buenas tardes, necesito su soporte, los correos que envío desde mi cuenta llegan como spam. (no deseados). ya sea hacia cuentas de hotmail, gmail... etc.. El dominio lo tengo alojado en nic.ar (argentina). Por favor, necesito resolver esto
                                                                                                        • Zoho say my domain seems to be already associated with another account

                                                                                                          I created a website on zoho and associated my domain (bompescado.com) on it. You can see the A record and CNAME are working to it. Now I need to associate the same domain as webmail, but when I try it return with: " This domain name seems to be already associated with another account. If you own this domain, please contact us for assistance." Im following the advice and conctacting you to say I've not been associated this domain on zoho before.  What do I need? Well, I need you manually remove it
                                                                                                        • Zoho Mail Not Receiving or Sending Email

                                                                                                          My zoho mail is not sending or receiving mail. What's the fix for this?
                                                                                                        • Cannot add new mail client

                                                                                                          Hi Guys, I've just got a new laptop and am trying to set up Outlook to connect to my Zoho account. No matter what I do, I cannot connect I'm using IMAP for incoming mail, it's enabled in my account settings, and I'm using the setting shown on the account
                                                                                                        • Zoho Payroll: Product Updates | April 2025

                                                                                                          At Zoho Payroll, we’re always working to make every payday feel effortless. And sometimes, that means listening closely to your unique needs. This month, we’ve focused on adding features that give you the flexibility to pay your employees based on your
                                                                                                        • Zoho CRM to Zoho Projects Workflow {"error":{"code":6831,"message":"Input Parameter Missing"}} connecting

                                                                                                          void automation.Untitled_Function(String ProjName) { resp = invokeurl [ url :"https://projectsapi.zoho.com/restapi/portals/" type :GET connection:"zohoprojects" ]; info "Portal API Response: " + resp; portalId = null; if(resp != null) { if (resp.containsKey("portals"))
                                                                                                        • Zoho mail Virus Scan Virus Detected (but I checked it with VirusTotal)

                                                                                                          Dear all, since this morning we can;t send any attachments out. Zoho says there is a virus in it, but clearly there is not when I checked the file on VirusTotal.com. Please help us out!
                                                                                                        • Next Page