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

    • Iteration through a list - Coming up against a "Failure to update function" error

      Hi there! I've been attempting to get a deluge script working and am running into an error that I have been unable to resolve. The error I am getting is Failed to update function Error at line :18. Improper Statement. Error might be due to missing ';'

    • Can you modify "Last Activity Time" in deluge? If so what's the field name?

      I need to perform some bulk modifications on records in the Leads module, but I need to avoid changing the "last activity time" or "date modified" because I am using those fields to filter and sort leads for follow-up action. I cannot find an answer anywhere

    • How do I define a weekend

      I noticed the default for weekends does not seem to include Saturdays. How can i define weekends to include both Saturdays and Sundays? Thank you.

    • 【Zoho CRM】ポータル機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中からポータル機能のアップデートをご紹介します。 今回の機能アップデートにより、CRMのポータルへのログインがより簡単にできるようになりました。 【目次】 SAMLベースのシングルサインオンについて ポータルへのアクセスリンク送付について 今回のアップデートにより、アイデンティティプロバイダー（IdP）を利用している組織において、SAMLベースのSSO（シングルサインオン）を有効化できるようになりました！

    • Getting error during inserting a record in form of zoho people using zoho api

      import requests import json # Set your access token and Zoho People API base URL access_token = '1000.XXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXXXXX' api_base_url = 'https://people.zoho.in/people/api/' # Set the form name and data to be inserted form_link_name

    • UI Arabic

      can i change the member portal UI to arabic in zoho community?

    • Resume template to include profile photo

      Hi, We would love the Resume Template to be able to include their profile photo. How can this be done? Miriam

    • Marking a form as 'done'?

      Hi! I've got a form that staff fill in when moving stock from location to location. I see the entries they've sent across and I input them into my stock control system. Is there a way to mark a form as 'done'? So that I know which entries I've input,

    • Zoho CRM - best way to search an account and assign to a deal

      Hi Everyone I am looking for some advice. I want to find the best way to complete the below steps. We have a deal and once it reaches a certain stage we need to allocate a supplier / vendor to this deal along with the salesperson. I want to add (ideally

    • How to easy change layout in existing records in Deals?

      Hello, So far i have used only 1 layout in Deals. I have about 1000 records. Now i want to make new layout. So i have 2 layouts: Layout Old (1000 records) Layout New (0 records) How to easy change layout from Layout Old into Layout New for existing records?

    • Zoho Rating

      When I close a ticket, the zoho system automatically sends an email to the customer for them to leave a rating. When they leave a rating, the ticket re-opens and I have to close it again. When I close it again, the zoho system sends the customer an email

    • Zoho GC Flow is not showing in IM Channels

      I have added my social IM channels in zoho desk. Created a GC Flow to automate conversations. But Guided conversations are not showing in any platforms I have chosen; WhatsApp Instagram Messenger Web (Business Messaging) In the flow I mentioned these

    • Sharing Knowledge Base articles across multiple departments

      It would be useful to share some Knowledge Base articles across multiple departments where they are applicable, rather than having to go into other departments to find the article you're looking for. For example. Our reception uses the 'Admin' desk whereas our IT guys use the 'Support' desk, however both divisions would find KB articles about our company intranet useful. Reception does not have access to the support desk, so cannot see articles created in the Support KB. Perhaps you could install

    • Contacts marked as Spam are shown as Contacts in tickets.

      Hi Zoho, If a ticket is marked manually as Spam you get an option to set the contact as Spam as well. It would be great if there was another option to delete this Contact. This would be based on the understanding that it wouldn't be marked automatically

    • Is possible to use ${webhookTrigger.payload.street==null?"No street":${webhookTrigger.payload.street}} for to detect inline a null parameter

      Hi Team I need to know if it's possible to evaluate inline the following parameter, with the objetive to detect a null value ? I would like to use ${webhookTrigger.payload.street==null?"No street":${webhookTrigger.payload.street}} Regards, Pablo

    • Real Estate CRM

      How can I tailor my CRM for real estate? I had seen an image where the CRM included property tabs.

    • Issue with Bulk Edit Triggering Function Multiple Times in Zoho Report

      In our Zoho report, we have observed an issue where executing a function during a bulk edit operation runs the function multiple times—once for each selected report entry. This behavior is causing errors due to overlapping or redundant executions. Our

    • Is there a Kanban view of Tasks across all Projects?

      As the title indicates, I could use a Kanban view of my Tasks across my Projects. If it's there, I don't see it. If it isn't there, I'd like to submit this as a feature request. Thx.

    • Set recurring tasks in Zoho Support?

      Hello,   We use the task function in Zoho Support to set reminders for "due dates" of important events, such as lease expirations, etc. Is it possible to set some of these as recurring yearly? As of now, we have to reset every task manually after one year. Is there a way to have it reset automatically?   Additionally, is there a way to import a list of tasks and their dates into Zoho Calendar? I have not been able to do it from Zoho Support to Calendar. I tried exporting tasks from Zoho Support,

    • Help - How Can I Enter a Hourly Rate (Global Cost) for our Team for Profitability Reporting?

      Hi everyone, I'm hoping someone can help as I am at a loss and am quite shocked (if true) at the lack of functionality in Zoho Books. We run a company in which we do hourly jobs for clients and we bill based on the hours of work completed. Projects are

    • Schedule a regular backup

      In CRM I have a regular backup setup. I cannot find an option to backup Desk? I would like to take a backup before I test syncing products between CMR and Desk.

    • Limit who can submit a support ticket to your site?

      Does anyone have a use case for needing to limit who can submit tickets via your help portal? Some of our customers want to have end-users view our knowledge base articles and see tickets their IT groups have submitted but they do not want end-users to

    • Is there a way to request a password?

      We add customers info into the vaults and I wanted to see if we could do some sort of "file request" like how dropbox offers with files. It would be awesome if a customer could go to a link and input a "title, username, password, url" all securely and it then shows up in our team vault or something. Not sure if that is safe, but it's the best I can think of to be semi scalable and obviously better than sending emails. I am open to another idea, just thought this would be a great feature.  Thanks,

    • Allow us to disable the Reopen Ticket button after a ticket is closed

      Disabling the Reopen Ticket will allow us to have more control over the ticket's flow. According to support, this is currently not possible. Please add this to let us, the customers, mold the ticketing system into something that we can use for our business

    • How to Enforce Mandatory Fields (Category/Sub-category) Before Closing a Ticket?

      Hi, I'm currently using Zoho Desk and encountering an issue where agents are able to close tickets without filling out mandatory fields, specifically Category and Sub-category. I’ve already set them both as a mandatory field, but it can still be bypassed

    • Admin Control for Default Email Templates in Zoho Desk

      Hi Zoho Desk Team, We would like to request a feature enhancement related to default email templates. Currently, agents can select and set their own default email templates when replying to tickets. However, we believe this setting should be managed centrally

    • Lock out of account after password update

      This is a bit of a catch 22 situation. I updated my account password using password generator in ZohoValut. Now I am locked out of everything, as I cannot get into OneAuth for 2FA, as the password is randomly generated, without getting into ZohoValut,

    • Guidance on Making Zoho Desk Connections Available for All Data Centers

      Hi Team, I’m currently developing an application using Zoho Desk connections to manage OAuth for my third-party products. Could you please advise on the steps required to make it available across all data centers? Looking forward to your thoughts on

    • Multibrand Help Center - Share knowledge base catgories between multiple departments

      Hello, I would like to know if it is possible to share categories between multiple departments when the multi brand feature is enabled. So that then one portal exists per department, but certain categories are visible in multiple portals. After all, we

    • Unable to upload document error on zoho sign

      i am creating a document using laravel php and here is my code and i get this reponse {"code":2005,"message":"Unable to upload the document","status":"failure"} $path = storage_path($file); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://sign.zoho.com/api/v1/requests');

    • Cloud to cloud folder migration from Sharepoint to Workdrive

      I am aware of OneDrive migration: https://help.zoho.com/portal/en/kb/workdrive/migrations/microsoft/articles/migrate-from-onedrive-to-zoho-workdrive#Whats_migrated would this cover a Sharepoint migration meaning I can move a whole Sharepoint (team) folder

    • Zoho Sign / Prefill By You - Editable by Them!

      Zoho Sign seems to have two field options available - an empty field for signer(s) to complete or a field that has been prefilled by you, that becomes read only once sent.  What I would like is an option on the pre-filled by you fields, to leave them

    • How to sort a data in summary report with Monthly ?

      Hi Team, Can any one help me out how to sort a data based on monthly, Month was shuffled based on aliphatic order. i want to sort the below data monthy?

    • Kiosk Studio wrap-up | How our community used kiosks in 2024

      Hello, everyone! Happy new year! The end of 2024 has been busy, and 2025 promises to be bigger and better. As we ring in the new year, let's rewind and look at Kiosk Studio, our no-code customization tool. The past 300 days have seen the CRM community

    • Zoho Crm - Inventory Integration

      Hello, I need help about Map Fields between CRM and Inventory. For Example, I can't match amount of stock between these 2. I can put opening stock number  in Inventory but I can't see it on CRM. Also I want to see categories and parent categories on Inventory, in CRM too. Best Regards.

    • Inventory Valuation Method Feature

      Zoho added another feature so called Inventory Valuation Method of each Item. This is actually good to see and it will benefit us so much but I have a question on this. For Existing Items that already have transactions, Zoho made it a default and assumed

    • Where is the customization and extendibility of zoho inventory?

      After delving into zoho one subscription to test out systems we need for our business, I'm really disappointed after working in Zoho Inventory. Its features and customizability are extremely lacking compared to the other tools like CRM. In our case we

    • Organization Variables - Restrict Access

      Currently, there is no way to restrict the access to organization variables. This leads to a problem when storing API related values that should be kept secret as anyone with access to create and edit email templates, workflow rules, or inventory templates

    • Zoho takes too long to load...

      I am based in Europe and in the last couple of weeks, Zoho CRM takes minutes even to load modules. Is there a specific reason this is happening? Is this happening to other people?

    • Modules are continuously loading

      Hi! We are not able to open the task modules, it keeps continuously loading

    • Next Page