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

    • Rich-text fields in Zoho CRM

      Hello everyone, We're thrilled to announce an important enhancement that will significantly enhance the readability and formatting capabilities of your information: rich text options for multi-line fields. With this update, you can now enjoy a more versatile

    • 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

    • Create Funnel to Track Email Outreach Conversion

      Hello, We would like to create a funnel that measures: N° of emails sent -> N° of emails opened -> N° of emails responded We would like to measure this email response conversion rate for each of our SDRs. We use the analytics tool of Zoho CRM and not

    • Data Model - CRM Adjusting size of Entity boxes

      (Sorry if duplicate, previous post seems to have disappeared.) I am viewing the Data Model for CRM, and while it is great to see such a model, there is an obstacle. Many of the entities show only a subset of their fields. The entity boxes have scrollbars

    • Mapping a new Ticket in Zoho Desk to an Account or Deal in Zoho CRM manually

      Is there any way for me to map an existing ticket in Zoho desk to an account or Deal within Zoho CRM? Sometimes people use different email to put in a ticket than the one that we have in the CRM, but it's still the same person. We would like to be able

    • Zoho CRM - Analytics: How Can I Set Monday as First Day of The Week?

      Hello, In the analytics section of our Zoho CRM (not Zoho Analytics), we would like to track our SDRs' outreach activity. However, it appears that Zoho CRM treats Sunday as the first day of the week for the "This Week" and "Previous Week" filters. How

    • CRM Hack #3: How to update formula functions for already created records.

      Hello everyone! It’s Wednesday and we are back with yet another hack.. I'm sure you've used formula fields to meet some requirements specific to your business. Let's consider an example each for external (customer-facing) and internal facing scenarios

    • Location functionality now deletes bundle information if changed

      With the introduction of Locations, we are experiencing several issues. 1. When bundling an item, the 'default' is to the organisation, not a location. This is not a significant issues, other than when you change the value, any batch tracking information

    • Improved RingCentral Integration

      We’d like to request an enhancement to the current RingCentral integration with Zoho. RingCentral now automatically generates call transcripts and AI-based call summaries (AI Notes) for each call, which are extremely helpful for support and sales teams.

    • Is Zoho Abandoning Zapier Integrations in Favor of Flow?

      I recently invested in a paid Zapier account to automate key parts of my Zoho workflows, but I’m hitting roadblocks. Zoho’s automation tool, Flow, clearly gets the lion’s share of development effort, and their Zapier connectors feel neglected. When I

    • Zoho Sites

      Does anyone have experience building Zoho sites or know how I can find someone who does?

    • Zoho Flow y subformularios de Zoho CRM

      Buenas tardes, En mi empresa vamos a empezar a usar los subformularios de zoho crm pero estos los voy a tener que rellenar con zoho flow ya que va a ser el encargado de rellenar dichos campos del subformulario. El problema es que a la hora de intentar

    • FSM Job Sheets data to CRM

      Hello, is there anyway of getting the data collected in the job sheets into the CRM. We are collecting inspection data which we were using zoho forms for but the job sheets in fsm seem like a lot better way to collect it but we need to be able to get

    • Bookmark order

      Hi all, We have a very big document/template that requires manual editing after doing a mail merge. To make this easier, I thought I would add bookmarks to navigate to the areas that will require editing. I thought these would be in order that they appear

    • Zoho Books | Product Updates | April 2025

      Hello partners, We’ve rolled out new features and enhancements to elevate your accounting experience. From FEC report to BillPay Add-on, these updates are designed to help you stay on top of your finances with ease. Export Transactions in Factur-X Format

    • Zoho Bookings API, timezone is not recognized when passed

      Has something changed? Time zone is being passed through API but it is NOT being recognized. response is not showing time zonetime that was passed through request. This is an URGENT issue as it is preventing bookings! Seems like this is due to a recent

    • Voicemail to Text Transcription

      Hello, We use the Twilio phone integration in Zoho Desk. When a voicemail is left, it creates a Ticket in Zoho Desk, and we are able to listen to the audio recording in the Ticket. My hope is to also have a voicemail-to-text transcription show up in the

    • Please don't remove the option to modify tax.

      Hi, I saw that the option to customize tax will be removed. This is VERY PROBLEMATIC for US companies who ship to different states because each zip code in the USA has its own tax rate for a single product. This is an awful idea. Please don't take this away.

    • Workflow to update the field "Deposit To" in Sales Receipt/Invoice

      After an invoice/sales receipt is created, I can't find a way to create a workflow that would update the field "Deposit To". Apparently, some other fields are visible in the workflow, but not the "Deposit To". Any insight?

    • payment gateway disabling in my ecommerce store

      hi i have disabled my payment gateway paytm from my website soigne from the backend but it is showing in my front end part when someone orders my products i want to remove it completelty so that it does not show in the front end part plz give me a suitable

    • Record GST Paid for Imported Goods

      In Australia, goods that imported from overseas needs to pay GST per invocied value. In most case, the freight forwader (logistic agent) paid this on behalf of importer (us), and invoice us in together in their freight invocie.  How do we setup a proper

    • subscribe email list for offer and updates is not working for zoho commerce

      my subscribing to email list is not working for offers and updates for my ecommerce website soignee it is saying please wait can anyone tell me the reason for this

    • Commerce service

      If I am selling a service in Commerce, how do I turn off shipping?

    • how do i see a list of active End Users?

      looking for a list of who i sent invitations to be an End User?  who has signed up? 

    • Email template for customer notification on ticket reply is not being used

      I've set up an email template for notify contact up upon receiving a reply in ticket. When I send a reply to the ticket, it is not using that email template. It just sends a normal looking email. How do I make it so that the email template is being used?

    • Conversation to Resolution

      Good day, I'd like to know how others are doing it. When we close a ticket, we reply to the ticket via email with photos of the issue and disclaimers. Then, we enter (copy and paste) the exact text in the resolution for reporting. I asked Zogo for a possible

    • Zoho Sign & Analytics

      Hi, Is it possible to import data from Sign into Analytics?

    • Zoho Desk - Feature Request - Add more social channels on Community user profile

      Hi Team, While updating my profile here I noticed that it is only possible to add Facebook and Twitter social links. 1. Please consider adding at least LinkedIn and if possible, other popular channels. 2. Please consider renaming Twitter field name to

    • Train Zia answer bot on only part of Knowledge Base?

      We are trialing Zia answer bot and hope to use it on the knowledge base to help our users find the information they are looking for. I have found how to train Zia on the entirety of our knowledge base. But is there a way to train it on only certain categories

    • More Workflow Triggers

      We utilize a lot of workflows in our organization. Recently we've identified two use cases where we would like a workflow to run a function. Upon further checking, the workflow trigger wasn't available, or the only option was to run the workflow more

    • Modular cannot Edit in portals

      I have a custom module in CRM. If I create in either CRM or portals, I can edit it in the CRM but I can't edit in the portal. Even if it is created in the portal it wont edit. Anyone know why? I've created a new module and it works fine but this one

    • ViewID and Zoho Desk API

      I'm looking at the documentation for Listing contacts and it looks like you can filter by ViewID. I assume this is views created in a department or all departments. Is this correct? And if so, how do I find the ViewID for that view? EDIT: I see the view

    • Writing on sketch cards is bugged when zoomed in

      When zoomed in, it writes a noticeable distance above or to the side of where you're actually trying to write. The further you're zoomed in, the more noticeable it is. Zooming is also entirely absent on the desktop version.

    • Lost the ability to sort by ticket owner

      Hi all, in the last week or so, we have lost the ability to sort tickets by Ticket Owner. Unlike the other columns which we can hover over and click on to sort, Ticket Owner is no longer clickable. Is it just us, or are other customers seeing this too?

    • In Zoho CRM, is it possible to transition from Approach 1 to Approach 3 based on the contract End Date? automatically

      In Zoho CRM, is it possible to transition from Approach 1 to Approach 3 based on the contract End Date? I have one issue between Approach 1 to Approach 3 there is another transition Approach 2 Iam faceing the issue if use the blue print API means i able

    • Introducing Rollup summary in Zoho CRM

      ------------------------------------------Moderated on 5th July'23---------------------------------------------- Rollup summary is now available for all organizations in all the DCs. Hello All, We hope you're well! We're here with an exciting update that

    • HOW CAN I ADD NOTE FIELD IN EMAIL TEMPLATE?

      I have an email template which i use as a lost deal notification. I would like to mention "Note" field also which captures the reason for the lost deal. I am not able to do so and i checked with help desk and they confirmed that it is not possible. Is

    • Announcing Early Access to "Zoho CRM for Everyone" — A new and exciting update to Zoho CRM

      We are delighted to announce an Early Access to Zoho CRM for Everyone— a truly democratic approach to managing a CRM, gift-wrapped in an exciting and intuitive user interface. Here, multiple teams across an organization can coordinate among each other

    • Subject: Urgent: Unrelated Email Automation Issue – Request for Immediate Resolution

      Dear Zoho One Support Team, We are currently facing a critical issue with email automation in our Zoho One account. Despite deleting the associated templates and workflows, the same email templates are still being sent to our customers. This has become

    • Remove OpenAI Dependency for Zia Meeting Keynotes & Add Hebrew Support

      Hi Zoho Meeting Team, Hope you're doing well. We would like to request the following enhancements to the Zia integration for meeting keynotes in Zoho Meeting: 1. Remove the Dependency on OpenAI's ChatGPT Currently, Zia uses OpenAI’s ChatGPT to generate

    • Next Page