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


    Nederlandse Hulpbronnen


      • Recent Topics

      • 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,
      • Easy way to delete attachments

        I've reached my data limit and would like to run a view/report, and mass delete attachments. Is there an easy, fast way to do this? Moderation Update: Post Summary: There are two features the post discusses a) Easy way to remove Email attachments Will
      • 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.
      • 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
      • 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
      • Assign task owner using Deluge

        Use Case: Each task is a document development task wherein once the developer has completed the first draft, the next step in the process is for the document to be QA-ed by the project's assigned auditor. Thus, I am currently working out a blueprint where
      • Using AVG in SQL Query

        My current SQL Query is: SELECT "Client Info", avg("Revenue") FROM "Funded Deals" GROUP BY "Client Info" The current table that this is creating: Client Info avg(Revenue) Previous 4175 1st - New 3411 1st - Old 3013 Renew 3069 While this works as I had
      • The Next Chapter for CRM for Everyone: Moving from Early Access to Phased Rollout for Customers

        #CRM25Q1 Hello Everyone, Until now, CRM for Everyone has been available in early access mode exclusively for users who opted to try the new version. We are now transitioning to a phased release, starting with the basic edition. We are thrilled to announce
      • 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
      • Meta and Facebook data report discrepancy

        I have been currently gathering manually facebook follower data thru meta. In zoho marketing plus the social media reporting only allows for page likes, and so there is a discrepancy with the data. please the difference in files attached. Is there way
      • Links in Instagram

        Hi there, I have been using Later for a while now but keen to come back to Zoho Social as Later doesn't offer tagging of pages on Facebook but they offer something Zoho doesn't. You can add a link to your bio which opens up your profile feed where images
      • Sort By Date - Deluge

        I have the following code, which normally works to sort calls by created time. Every once in a while, it doesn't work and something sneaks through in the wrong order and I can't figure out why. calls = zoho.crm.searchRecords("Calls","(Owner:equals:" +
      • If I turn off the Task Prefix & ID in the Portal Configuration section, will it remove the dependencies in my projects?

        Hi all, basically the title, I am new to zoho projects and trying to get my head around some basic principles. Unfortunately I have not found this information via the search option and after deleting yesterday some Phases I had created in the Phases tab,
      • Enter dates in tasks with just "tue" or "+10" or "5d" ???

        Is there any way to enter due dates in tasks without typing the whole date or making time consuming clicks in the calendar? I don't see anything online in the help or third party videos.
      • Multiple time zones in zoho projects

        We are working in an international team. We need to set up different time zones in the organizational settings or at least for one project within zoho projects. Any ideas or help? Thx in advance
      • Zoho Desk : Field for 'Layout'

        I have many different layouts on my helpdesks and I want to be able to identify the stats for each one, however I can not find the field in the raw data from the Zoho Desk datasource. I thought it might be in the "Tickets" table but there is nothing.
      • Customize Zoho One Dashboard and URL?

        Hi everyone, Is there a way to customize my Zoho One URL to be different from the default portal URL? The current portal URL is: one.zoho.com/zohoone/[organization] I want to map it to its own standalone domain that we own. eg) domain.com instead of one.zoho.com/zohoone/[organization]
      • Enable Sending Direct Messages to Self in Zoho Cliq

        Hi, I would like to request a feature enhancement for Zoho Cliq to allow users to send direct messages to themselves. Currently, Zoho Cliq does not have the option to send a direct message to oneself. While creating a channel with just one member (the
      • Emailing lookup field but placing this as an ID or number rather than text

        Hi there, First time poster and have been a user of Zoho Creator for approx 6weeks so forgive my ignorance as I learn to code. We have a need to send an email to a specific email address with some of the fields triggered by the submission of a form. In
      • JOB Sheet can not send PDF as service rapports and more info needed other topic

        Goedendag, - Jullie hebben nu job sheet erin gedaan en dar is echt super goed, enkel kunnen we de werkbon ( JOB sheet) nu niet verzenden als PDF als een service rapport naar onze hoofdaannemer hoe we dat nu doen als bewijs van de levering van het werk
      • Tax Deduction at Source (TDS)

        I issued a sale invoice outside UAE , the customer apply TDS on the invoice , i checked my Zoho ( professional version ) i couldn't find the option of Enable TDS to let it appear while posting the incoming payment , please how to make it and how to configure
      • UNAPPROVED record management

        When the unapproved list of duplicates is long, one needs the some tools to manage them - when this list has over 1500 records, we cannot manage it without some tools, such as: 1. The ability to apply a filter - ie similar to creating a CREATE a NEW VIEW
      • Zoho mail filter Add to WorkDrive doesnt't work

        Hello, We have a problem with using the filter in the email. So, we want that when a bulk payment confirmation from the online store arrives, this email is automatically saved in HTML format on the drive using the action 'Add to Zoho WorkDrive -> Email
      • Introducing Zia GenAI: Zoho's Native Generative AI for Zoho Desk

        Hello everyone, Zia GenAI is available on Early Access for Zoho Desk Enterprise subscribers. Kindly fill out this Registration Form to request early access. We are excited to announce the Beta release of Zia GenAI in Zoho Desk, now available through our
      • Add blueprint buttons to listview and kanban

        Hello, just started to use the Blueprints feature - really useful. I have one suggestion to help this work even better - can there be transition buttons that appear on the top of listview & Kanban? Maybe an option as well - "Blueprint transitions appear
      • Deleted message in SPAM

        In one of my gmail accounts (getnickifit@gmail.com) I had an email from PayPal in the SPAM folder. I thought I was moving the message to the inbox from the zoho mobile but it looks like it was deleted. It is no where to be found--inbox, trash, etc. Can it be restored?
      • 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
      • Multiple Facebook Pages under Single Brand

        Hi everyone, I'd like to know if there is a possibility of connecting multiple Facebook pages under a single brand on Zoho? At the moment, there are different Facebook pages of a single brand and would want to keep under the same brand on Zoho as we
      • Zoho Books Estimate to Zoho CRM quote?

        I'm not sure why this isnt automatic, but maybe I'm missing something. When we create a quote in zoho books we have a custom function that pushes the contact into a deal within the CRM. I can not for the life of me figure out how to push an estimate from
      • Zoho Developer Hangout (ZDH) – Episode 17 | Optimizing Organizational Processes through Automation

        Hey developers! Running a business can get quite overwhelming especially when juggling multiple tools like those in the Zoho ecosystem. Although integrating most of them is a piece of cake, manual intervention is needed at times. Being able to automate
      • User Emails Blocked

        Community: I keep running into issues where our users stop receiving notifications from CRM because their email addresses get blocked in on the backend some how. I reach out to support, they confirm, they fix, and we carry on, but then it happens again.
      • Apple Messages for Business in Omnichannel communications?

        Hello, Apple launched "Apple Messages for Business" but Zoho CRM or Zoho Desk don't appear in the list of possible integrators. Zoho already promotes https://www.zoho.com/crm/omnichannel.html Omni Channel integration, but Apple Messages does not yet appear.
      • Kaizen #140 - Integrating Blog feed scraping service into Zoho CRM Dashboard

        Howdy Tech Wizards! Welcome to a fresh week of kaizen. This week, we will look at how to create a dashboard widget that displays the most recent blog post of your preferred products/services, updated daily at a specific time. We will leverage the potential
      • Next Page