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


Next>>



        • Recent Topics

        • Formatting Mailing Labels

          I want to use the "Print Mailing Labels" function on the drop down list, but I am not seeing a way to change the formatting on the mailing labels. At the moment, the information that appears on the mailing labels ARE NOT mailing addresses, but random information.  I would also like to change be able to change the size of the labels.  At the very least I would like to know what type of labels I can get that would be the correct size.  

        • Zoho Creator delete validation seems like does not support <br> html code

          Validation Workflow in Create or Edit, We can use this styling code eg: <br>, <b>, <u> Those very simple code in those validation (in Create or Edit) But, for Validation (In Delete) Zoho Creator seems like does not support it. The alert task just shown

        • Can't create Workflow for Module 'Service Appointments'

          Hey everyone. I am trying to create a workflow from FSM to Desk. When I start the creation process I select the Module (Service Appointments) and then title it and hit next and it just sits there. Now If I select a different module it works fine. Have

        • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

          Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

        • Tags with Zapier

          Maybe I'm missing something....I hope so... Using tags for triggers is a key need.  This prevents us from having a ton of different lists. I am trying to find out how to add a tag using zapier when someone makes a purchase....but it doesn't seem to be

        • Zoho Sheets working offline

          Hi, I am looking for the ability to work offline in Zoho Sheets, but currently I cannot find the process to complete this. Does someone have any ideas or steps I might have missed? Also does Zoho Sheets have the "Format as Tables" function as is currently

        • Free Webinar Alert! Building Your Brand: Solopreneur Tips to Use Zoho Mail

          Hello Zoho Mail Community! We’re excited to invite you to an exclusive session: "Building Your Brand: Solopreneur Tips to Use Zoho Mail." In this webinar, we’ll explore how Zoho Mail helps solopreneurs create a professional brand with custom email domains,

        • ZOHO Mail required to use CRM Mail Merge?

          Is ZOHO Mail required to use CRM Mail Merge?

        • How can I create a deal with multiple payment milestones in Zoho CRM?

          Hi. We are a services based company and most of our deals involve monthly invoicing for T&M work or payment milestones for fixed price projects. How can I create a Deal in CRM that shows monthly (or multiple) payment milestones, rather than just the total

        • Client scripts for Zoho Books ?

          Good day everyone, I am looking for a way to be able to interact with the Quotes and Invoices as they are being created. Think of it like Zoho client script in Zoho CRM. But for the life of me I dont see a way to do this. The issue with having function

        • View and manage your records in Calls, Events, Tasks, Contacts, and Accounts with Table View

          Hello everyone, So far, Table View was available for the Tickets module; now, we have included it for the following modules as well: Calls Events Tasks Contacts Accounts Managing customer interactions and activities often requires navigating through multiple

        • Contacts are imported successfully but ignored when I send a campaign (due to non-marketing type)

          Can someone please help, When we sent a campaign yesterday, we received the following message: "The number of contacts from the selected mailing lists are 161. We have ignored 11 contacts due to its non-marketing type." So only 150 people got the message.

        • Zoho Books | Product updates | March 2025

          Hello users, We have rolled out new updates in Zoho Books to enhance your accounting experience. These include the ability to create workflow rules for manual journals and Multi-Factor Authentication (MFA) for customer and vendor portals. Explore these

        • Spell Checker in Zoho desk

          Is there a way to set always check spelling before sending? Outlook does this and it is a handy tool to avoid typos

        • Zoho Creator not accounting for time change

          I have the timezone to my Creator application set to Eastern Standard Time(SystemV/EST5EDT). This is under the GMT -5:00 category. I was under the assumption that since EDT was present in the time setting that my application would switch automatically

        • How to add Line Breaks for Task Description with API v3

          How do we add line breaks to the Description field of a Task using API v3? https://projects.zoho.com/api-docs#tasks#create-a-task Previously I was using "<br>" with the old API. When I use that with v3, it just prints "<br>" as text instead of adding

        • It would be very helpful to be able to use variables in the formula columns

          Currently, variables can be used only in aggregated formulas. It would be great to be able to use them in regular formulas as well

        • Display name in Zoho Desk Ticketing system

          We are in the trial phase to implement a Ticketing system. As our company uses several generic emails, such as service@abc.com and service@xyz.com across different branches, the uniqueness of usernames (full names) becomes crucial for our business. Without

        • Create a new module with first name & last name, and join the two when viewing records

          I've created a new module, and I have first name / last name fields (I've renamed the record name field as last name). When I'm viewing a record, I'd like to see "Bob Smith" at the top of the page and in lists, not just "Smith" as I have today - basically the same experience you get when editing / viewing leads in the leads module.

        • Announcing the all-new Offers Module and Offer Approvals in Zoho Recruit

          We're happy to introduce - Offers as a module. As we all know, Zoho Recruit is a powerful Applicant Tracking System that can help us. One of its key features is the ability to generate and approve offer letters. When a candidate is the right fit for a

        • Extract first and last name

          I am trying to build a custom function in Flow, when a new Zoho Booking is added I want to split the Name field into first last name. I understand the function needs to be a string and this works but I am unsure how to write this in the flow script. result

        • Desk Contact Name > split to First and Last name

          I am new to Zoho and while setting up the Desk and Help Center, I saw that new tickets created or submitted from the Help Center used the Contact Name field. This would create a new Contact but put the person's name in the Last Name field only. The First

        • I have a problem which is that the posts are not published

          I have a problem, which is that posts are not published. Since yesterday, I have tried more than 50 separate posts without any new information.

        • Uploads in creator app

          So I have a file upload in the app, I can upload the file to it easily, but can't then download that file, there appears to be no option to?

        • NOW Zoho Creator still cannot bulk download Image or File Upload Field

          The filedownloader has been deprecated for 5 years. Until now, we still cannot have a replacement tool. How can we bulk download the file that we uploaded to Zoho Creator. Previously, it was so simple to bulk download all those files. But now failed to

        • Introducing Linkthread by Zoho Social — our new link in bio tool

          Hey everyone, We hope you're all doing amazing. We always love bringing features and tools to make your social media marketing journey easier, and today, we've got a brand new tool that we'd like to introduce to you. We know how important it is to make

        • Client Script | Update - Introducing Subform Events and Actions

          Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

        • Ayuda: Cómo Integrar / configurar el Facebook API de conversiones con Zoho Sites

          Buenas tardes foro, no sé si ya se ha respondido esta solicitud, soy un usuario de zoho con nulo conocimiento en códigos, programación y queria saber si existe un tutorial o un paso a paso de cómo Integrar / configurar el Facebook API de conversiones

        • Understanding "Deposit from Other Accounts" vs. "Sales Without Invoices"

          Hello, Zoho team! I am a new Zoho Books user trying to correctly input some historical financial data. I'm hoping you can help me understand best practices for when to use "Deposit from Other Accounts" vs. "Sales Without Invoices." I'm an author who receives

        • Update Client Record based on creation of custom module record

          Hi! Hoping for someone's help with this one. I have a custom module called 'Agreement History. Whenever a deal is won, it creates a new record in this module with associated 'Products' and 'Clients' to track rental history and contracts. What I'm trying

        • I can't auto-scheduling calls down - the code does not change anything

          Hi, I was trying to set a function that auto-schedules calls based on their call result; i.e "Requested more info". I had also included a reminder to send an email in the code. I logged a test call and nothing changed. Is there anything wrong with the

        • setting owner of note when adding via deluge

          My organization has requested the ability to mass update the notes related list in the deals module. Since this can't be done with the mass update feature, I created an update "notes single" line field and created a workflow rule that triggers a function

        • Enable History Tracking for Picklist Values Not Available

          When I create a custom picklist field in Deals, the "Enable History Tracking for Picklist Values" option is not available in the Edit Properties area of the picklist. When I create a picklist in any other Module, that option is available. Is there a specific reason why this isn't available for fields in the Deals Module?

        • Customize User Invites with Invitation Templates

          Invitation Templates help streamline the invitation process by allowing users to create customized email formats instead of sending a one-size-fits-all email. Different invitation templates can be created for portal users and client users to align with

        • Hundreds of folders or tags (for each client): best practices?

          I'm preparing to switch from Gmail Workspace where each of my clients has their own label, assigned automatically after I manually set it up when someone becomes a customer. I know that those labels can be converted into folders in Zoho Mail, resulting

        • Using Linkedin as 'Unique Identifier ' for Duplicate Management for Candidates and Contacts in Zoho Recruit

          Quick hats off to Zoho Recruit on the functionality of Unique Identifier ' for Duplicate Management for Candidates and Contacts in Zoho Recruit. I recently added the ability to manage duplicates based on Linkedin profile. Candidates' and Contacts' email

        • Merge Join PDFs Zoho Creator

          Hi all, I have a field where users upload PDF, is it possible to join those pdfs into one with a function or something? Regards.

        • Auto-sync field of lookup value

          This feature has been requested many times in the discussion Field of Lookup Announcement and this post aims to track it separately. At the moment the value of a 'field of lookup' is a snapshot but once the parent lookup field is updated the values diverge.

        • Merge field support in Field Update

          Hi,  We have a use case that requires values of certain custom fields in Deals to be copied back to corresponding custom fields in Contacts module whenever those fields are changed in Deals. The field update action on Workflow rules doesn't allow specifying

        • Improve Zia Data Foundation

          Hi, is it possible to manually improve Zia's CRM data foundation for companies? Zia tends to give data based on foreign companies but we only operate in the German market. Even if I specifically but the German company name and the URL to the german imprint

        • Next Page