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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Set Custom Icon for Custom Modules in new Zoho CRM UI

      • Whatsapp integration update.

        Please, there is no way on WhatsApp integration to know if a message has been read, or has been managed by a member of the team. There should be a way to add contextual info or something please.

      • When converting a lead to an account, the custom mandatory fields in the account are not treated by zoho as mandatory

        In my Account module I have a number of custom fields that I have set as mandatory. When I enter a new customer as a new account they work, I can't save the record without populating them. However when I convert a lead, my CRM users are able to save the

      • CRM - QR Codes and Bar Codes

        Hi I am using CRM to run my service team - Asset maintenance business We need to move to and generate a QR code for each Asset we look after. And we need Bar code reading for the testing we do. (pre-bar-coded sample bottles are provided by the lab) Does

      • Initiate conversations anytime with WhatsApp's Templates

        Previously, in Bigin's Messages module, you could only reply to customer-initiated messages, but with this enhancement, you can now initiate conversations using WhatsApp templates. A WhatsApp template is a pre-designed message template designed to start

      • [Training] Zoho Deluge Online Training Workshop

        Hello Everyone, We are much elated to invite you all to our upcoming Zoho Deluge online training workshop. Master deluge and automate Zoho applications The Zoho Deluge Online Training is an extensive 2-day workshop designed specifically for developers,

      • Not possible to remove mandatory system fields?

        Is there no way to make things like under Calls "Call Duration" or "Call Start Time" or under Potentials "Close Date" not mandatory? These fields are useless for my organization and waste time but the box is grayed out to not make them mandatory. It's

      • Directly Edit, Filter, and Sort Subforms on the Details Page

        Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevant

      • Text snippet

        There is a nice feature in Zoho Desk called Text Snippet. It allows you to insert a bit of text anywhere in a reply that you are typing. That would be nice to have that option in Zoho CRM as well when we compose an email.

      • Can I print a set of record templates as a single pdf?

        I have a record template formatted as a gift certificate. I can email a single gift certificate to each recipient, but I also need to print the whole batch for the organiser, and they won't want 40 separate files. The layout needs to be identical, so

      • Zoho Finance Workshop 2025 is Happening Now!

        Hello everyone! We’re thrilled to announce that the Zoho Finance Workshop 2025 has officially started, and we've already wrapped up the event in Chennai, our home ground! After an amazing session, we're geared up to visit more cities in India and take

      • Why only one skin tone option for raised hands?

        If there is only one skin tone option, it should be one weird color as opposed to just pink. Is there a way to change skin tone on the user's end?

      • Important update in Zoho Forms: Enhancements for improved email deliverability

        Hello, form builders! We would like to inform you about some changes we're making in Zoho Forms to ensure the deliverability of your outbound emails. Changes to Gmail policies Gmail has updated its DMARC policy which quarantines emails sent with gmail.com

      • How do I generate a report with the total amount of money trasferred from one bank account to another?

        Hi, in Zoho Books, I have 2 bank accounts. Money is moved between the two. When I want to know how much money was actually transferred over a certain period of time, I can filter the transactions using the search criteria (type, transfer fund) but I only

      • email Signature from Contact page not working

        Hey guys, I just set up my signature for the email i integrated with ZOHO. It works when I'm using the email client but when I send an email from the contact or lead page it doesn't add the signature. problem on my end or ZOHO's? thanks for the help!

      • Error AS101 when adding new email alias

        Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.

      • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

        Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

      • Zoho Analytics - Only show certain data labels

        How do I only show certain data labels on my charts? I have a combo chart with 3 data bars and 1 data line. I only want to show the data label for the data line, not the data bars. How can I do that?

      • Recurring Bookings

        Will Zoho Bookings ever offer an option to the customer to schedule recurring meetings (unlimited) for the same days/times? Making a client schedule the same days/times for an entire month is a tedious process. I'd like to offer the option upfront to

      • Zoho FSM Extension for Zoho Desk: For Enhanced On-Site Assistance and Unified Customer Support

        We are stoked to present to you Zoho FSM for Zoho Desk, an extension that will help you convert Zoho Desk tickets that require on-site assistance into field service requests in Zoho FSM, ensuring a smooth hand-off from the help desk to field technicians.

      • reset of user password

        User forgot her password, so she requests a password rest, but never gets the email. How do I reset her password, since that function is not an option, even for an administrator?

      • サブフォームに設置したユーザールックアップ項目の対象ユーザーにチームユーザーが表示されない。

        担当者様 お世話になっております、データーサービス中島です。 Zoho CRM for Everyoneで商談タブにサブフォームを追加し、サブフォーム項目でユーザールックアップを追加しました。 行追加を行いユーザーからチームユーザーを選択しようとしましたが、一覧中にチームユーザーが表示されません。 ※サブフォーム内では無くタブ内にユーザー項目を追加した場合はチームユーザーが表示されます。 サブフォーム内のユーザー項目でもチームユーザーが参照できる様に修正お願いいたします。 確認した環境は以下です。

      • Email Verification on Subdomain

        Hi, The latest guidelines for setting up an email newsletter are to set it up on a subdomain of your main domain so that if you get put in a spam block, it doesn't block all your company email. We have been trying to set this up and managed to get our

      • Mass Update Status of Job Openings

        It'd be incredibly useful to be able to mass update the statuses of job openings. I've just been told six jobs are on hold with the same client, so at the moment I need to update all of them individually. Cheers

      • Can't connect to Blogger & Wordpress

        Hello Zoho Support Team, Thank you for providing Zoho Writer—it’s a fantastic tool that I truly enjoy using. However, I’ve encountered an issue when attempting to connect it to Blogger or WordPress for automatic posting. When I try to establish the connection,

      • A Step-by-Step Implementation Guide for Zoho CRM

        Implementing Zoho CRM can be a game-changer, enhancing team efficiency, customer engagement, and overall performance. Here’s how Integs Cloud can help you make it a seamless success: 1. Define Your CRM Goals Know Your Direction Understanding your goals

      • How do you manage sales forecasts by deal when you're a SaaS (subscription) provider?

        Hello, I was wondering how you forecast revenue as a SaaS? Because my LTV moves all the time and I was thinking of updating the amount of each deal in the pipeline according to my LTV stripe, but is it possible?

      • Zoho CRM - Conditional Assessment for Blueprint Automatic Transition

        Hi, Currently, in Zoho CRM’s Blueprint process, the Automatic Transition feature does not allow for conditional assessments before execution. This limitation significantly impacts workflows where a transition should only occur when certain predefined

      • Pull Price Book and Product info in a single report

        i want to be able to produce price books for my engineers. If i could produce a report with the retail price as an option that would be great. This seems to be an old issue to please what are the plans. Moderation Update (16th Feb 2024): The option to

      • Error 403: Forbidden When Updating Email Signature via API

        Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

      • Zoho Finance Workshop 2025 is Happening Now! 🎉

        Hello everyone! 👋 We’re thrilled to announce that the Zoho Finance Workshop 2025 has officially started, and we've already wrapped up the event in Chennai, our home ground! After an amazing session, we're geared up to visit more cities in India and take

      • How do I see what participants see when I am app sharing in a meeting?

        How do I see what participants see when I am app sharing in a meeting? In my view, I only see myself as active, but not the app (keynote on mac)

      • Pending Dispatch Status on Transfer Order TO

        Hello, when our branches request stock, we initiate a TO which puts the item into a "In Transit" status otherwise someone else may try to sell that item, which could be problematic if the item has limited quantities. The problem is that if the item has

      • Zoho Desk's ASAP announcement | Time to embrace the enhanced JWT Authentication Mechanism for ASAP | Dec'23

        Hi All, We are eager to introduce the enhanced JWT authentication mechanism for accessing your ASAP add-ons. Effective December 25th, 2023, the ASAP's old JWT authentication mechanism will be deprecated. This means that the option to switch to the new

      • Trying to copy Active Leads to a Custom Module called Dead Leads

        Hi, I am trying to code when the "Active Lead Status" field is changed to "Dead", a copy of the record should be created in the "Dead Leads" module while keeping the original lead in "Active Leads." I am using the following code but I keep getting the

      • Blocking an email address

        Hi How do I block an email address in my Zoho mail? Thanks Brian 

      • Zoho Desk add OIDC federation for 3rd party IDP

        Please consider adding the ability to use OIDC/OAuth compliant Identity Providers to Zoho Desk. You currently have Zoho, Microsoft, LinkedIn, Google and Facebook. But if you added the ability to use ANY OIDC compliant provider, you would add compatibility

      • Cliq funtion not triggerring from Books.

        Gentlemen, I have been requesting the Zoho Books team for 15 days through various emails- then even escalated. The response that I get from Zoho is " Our back-end team is working on it......." It is a template-type response. I authenticated the link(Cliq

      • Tracking Agent Diligence in Updating Records

        Our organization mainly focus on B2B. While we've implemented automations like pushing info from web forms into CRM, we often get info from events and individual networks. The complete/updated info relies in the agents who directly interacts with them,

      • how to create a company without an assigned owner

        In my company we are reassigning accounts and we need to leave some companies without an owner to review their potential and then assign them, but the options that appear in owner require that they be assigned to a seller, how to leave them without an

      • Next Page