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

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

    • Opening & working multiple tickets

      We work in multiple tickets at the same time. Currently to do this, we have to open multiple instances of Desk.  Is there a way to do this by just opening multiple ticket tabs within 1 instance of 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?

    • Is this link the transparent pixel used to track opens?

      Could someone please help me identify this highlighted link? It is automatically created by Zoho and a lot of contacts receiving campaigns will click on this link. I don't believe that it is the "update your preferences link" because on the Link Clicks

    • 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

    • Values in multi pick list are not copied to copied deal

      Hi, After a deal is completed in our sales funnel we copy the deal to an automatically created new deal in our project funnel. All fields are copied properly, but only a Multi Pick List is not copied. How can we copy the selected values in this field

    • 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

    • Execution failure when fetching a Name field from another app

      In creator I have one app [Employee Directory] with a form [Employees]. One of the fields is a name field called [Name]. Here is a sample that works, if executed from the Employees app: test_Employee = Employees[Name.first_name == "Alex"]; info test_Employee.Name;

    • Accessing Subform Data using getRecordByID

      I am getting data from Zoho Creator using deluge zoho.creator.getRecordByID task, from another application. The report contains a subform, and that subform is in the detail view of the report. I do not appear to have any subform data in the JSON response,

    • Allow "add new" option to picklists and multiselection fields from add or edit pages

      Hello zoho, please insert an add option (ie +)sign) to pick and multiselect fields so we can add new options while entering or editing records. For example. in my lead module, while adding a new record, I realized I had a new lead source. I went to my

    • Allow customer to select meeting duration

      I would love to see a feature where I can give the customer the option to select the meeting duration they require based on a dropdown list which I have predefined in the service settings. For example: 15, 30, 45, 60, 90 minutes.

    • Can you internally tag/categorize posts for campaigns?

      Would love to easily sort through posts by tags or categories (i.e. we have multiple memberships and share studies from each. It would be nice to pull reports in a second for "membership A studies" for a campaign etc.).

    • Zoho and Hostaway webhok integration.

      I want to receive data coming from hostaway webhook and receive it in zoho crm to create or update record in a module based on conditions. The hostaway webhook sends data every time a reservation is created or modified or cancelled. The hostaway sends

    • Function 56: Automatically enable the option for customers to pay via bank account

      Hello everyone and welcome back to our series! One of the key features of Zoho Books is its integration with multiple payment gateways, allowing you to receive online payments for your invoices. This ensures faster payments, automates payment tracking

    • Connect multiple Facebook ad accounts to Zoho Social

      Hi there. I'm doing the Facebook Ads and Zoho Social integration to automate the leads that come from Potential Customer campaigns on Facebook to Zoho CRM. I have a company (1 fanpage, 1 brand), but within the business or brand on Facebook, I manage several

    • Custom service report or Zoho forms integration

      Hello, So far the experience with Zoho FSM and the integration with Books has been good, however there are limitations with service reports. As with my business, many organisations send technicians to different types of jobs that call for a different

    • Creation of Path and subpath

      In order to improve the structure of the website for better organization, I would like to consider that when publishing a page, it can be within a section and sub-section. For example, if I have an events option in the menu, I can put past events and

    • Zoho vault uses only password to unlock not a TouchID

      TouchID works when normally openning app but when called from keyboard while browsing or trying to log to another app it shows only password option to unlock. This behaviour is only on iPad Mini witch latest 18.2OS

    • Next Page