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

    • Offline for Maintenance Option

      Making changes to a live application can cause problems. I'm suggesting a new application settings option to temporary disable all access to an app so the admin or developer can make changes without any user interference. Additionally, while the app is offline, there should be some ability to present the users with a customized notification page (perhaps a view within the app itself). For example, "This application is undergoing maintenance and will be back online Sunday at 5 PM. Please email smith@net.com

    • 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

    • Amazon Integration

      Hi, I am seller on Amazon , & I would like to sign up for Zoho books. However my question is can we automate/integrate invoicing, charges and returns in amazon with Zoho using API? Do you have a developer for this? I did take a look at zapier however it just has a create Invoice function nothing else.

    • Connector working as expected but not when called from an extension

      I am playing around with building a Zoho CRM extension and seeing if anyone has some insight on the below issue I am facing. When I execute the Connector API it works as expected returning me the download URL for a merged document that has merged successfully.

    • Is it possible to set a default field value in a Layout Rule?

      I would like to be able to set a default field value based on a layout rule, rather than a default value in the main layout screen. Example: if Field X is set to 'Banana' then set the default value of Field Y to 'yellow' if Field X is set to 'Strawberry' then set the default value of Field Y to 'red' Is this possible? I don't want to use a workflow rule because a) we've hit our limit and b) it needs to happen straightaway whilst the user is on that screen.

    • Changing Data on Cancelled /Paused Subscriptions

      What's a good way to edit a cancelled subscription without reactivating it? There are some custom fields and data that we'd like to add to these but when we edit it, it reactivates it and creates an invoice. Also need to be able to do this for paused

    • Portal users send notifications to licensed usera

      Is there a way for portal users to leave messages or notifications to licensed users?

    • Help me to retreive my Document

      Please help me to retrieve my documents from any date between 1st February, 2025 to 20th,March 2025 .it got mistakenly deleted on the 21 of March 2025 due to phone screen malfunction I earnestly await your positive response .thank you

    • Zoho Subscriptions -- Zoho Commerce integration

      Is there integration between Zoho Subscriptions and Zoho Commerce? I would like to create subscription plans in Zoho Subscritpions and list them for on my Zoho Commerce store.

    • Inserted Records not showing in Kanban view

      When insert a new record into a report from a workflow, it doesnt show in KANBAN view. When i view the report in a regular list view, the records are there. If i edit the record (while in list view) and then update it at all (even if i dont change anything,

    • Zoho creator dropdown option update using deluge

      Hi how can i add options in dropdown rather than updating manually

    • Add an Iterator Module to Zoho Flow

      Hi Zoho Team, I hope you're doing well. We would like to request a new feature in Zoho Flow: an Iterator module. An iterator is a special type of module that converts an array into a series of bundles, outputting each array item as a separate bundle.

    • Restrict form submissions based on records of another form

      Hi, is there a way to restrict submission of one form based on records of another form in creator? For example, there are two forms: one to collect user registration details, and one for a registered user to submit information. If there is not a record

    • Client Script | Update - Introducing Subform Events and Actions

      Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

    • Canvas Email iMap

      Hi, I want to be able to have this option (seen below) in our custom Canvas design I'm building. But I don't see that option. Being able to see all related emails is important for us. But in our Canvas, it doesn't seem to have any option....

    • Search Mail with URL parameters

      Is it possible to search Zoho Mail by passing URL params like we can in Gmail? eg. mail.google.com/mail/u/0/#search/from:(jane@doe.com)

    • Renaming organization does not reflect on all places like billing and others

      I have renamed the organization name to Novizna from Evnesoft but in billing and email it still displays Evnesoft

    • Forwarding email into Desk - DMARC errors

      Hi, Our email domain is hosted through Exchange Online (Office 365). Customers email support@ourdomain.xyz which is delivered to Exchange. Exchange rewrites the TO email header to the email address associated with our Zoho Desk (support@ourdomain.zoho.xyz).

    • ASAP Chrome Extension not loading

      We have ASAP enabled in Zoho Desk. I installed the ASAP Chrome Extension (Windows 10), but when I click the extension button while on our site, it never fully loads. I just get what's shown below.

    • Why is the Zoho portal not mobile friendly?

      I just got started with the portal and im sort of shocked how it looks. I already filled a hint/complaint about this. On the website you see a wonderful site with a modern design. Yet in real life its a mid 2000 look and feel. One major issue i see thats

    • Unable to access Zoho Help Community on my main browser

      Hi, I have been unable to access https://help.zoho.com on my chrome browser for a while now. Initially I thought it was a glitch from Zoho, but when I accessed from incognito mode, I was able to access it. I have cleared cache - cookies, but still access

    • Controlling Lookup Paths

      When building pivot tables, Zoho automatically selects 'lookup paths' for you based on which columns are configured. Sometimes, I want zoho to not use a look-up at all between two tables.... but that doesn't seem to be an option, as long as any relationships

    • Can you sell Subscriptions using Zoho Commerce?

      In addition to physical products and the apparently coming soon 'Digital Products', it is possible to sell Subscriptions using Zoho Commerce?

    • Does Thrive work with Zoho Billing (Subscriptions)?

      I would like to use Thrive with Zoho Billing Subscriptions but don't see a way to do so. Can someone point me in the right direction? Thank you

    • Free Webinar Alert! Building Your Brand: Solopreneur Tips to Use Zoho Mail

      Hello Zoho Mail Community! We’re excited to invite you to an exclusive session: "Building Your Brand: Solopreneur Tips to Use Zoho Mail." In this webinar, we’ll explore how Zoho Mail helps solopreneurs create a professional brand with custom email domains,

    • Tip 24: How to generate a file preview in a report without downloading it.

      Hi folks, This month we will teach you how to preview a report file before sending it to someone or sending it for approval. While viewing reports in Zoho Creator, users cannot access or preview files uploaded through the File Upload field without downloading them.    In this tip, we'll show you a way to do this. Key concept: The best way to achieve this function is to preview the uploaded file's content using the Add Note field in a stateless form (pop-up window) based on the record ID.   Use case:

    • Zoho Books CREDIT LIMIT is completely USELESS due to a BUG!!! Please fix it ASAP!!

      Credit Limit should not be taken into account if payment terms on the Invoice are without credit. If selected Credit 0 days (Prepayment) why in this world would a notification pop up saying credit limit is exceeded and not allowing to create an invoice?

    • Add additional field to quick search results

      IN the advanced search, we can add any field to the columns. In the regular search results (before you press enter, there is no option to modify the results. It would be super useful to include a custom field where it currently displays the pipleine

    • Zoho CRM API, Python SDK v7 Quoted_Items

      Hello. How do I use this SDK to retrieve the Quoted_Items from a Quote and downstream the items in a Sales Order I can see references to a constant INVENTORY_MODULES_ITEMS = ["invoiced_items", "quoted_items", "purchase_items", "ordered_items"] But I cannot

    • Continue after error for each loop on invoke url

      Hello. I'm trying to upload files to workdrive using invokeurl. It goes through a list of urls using for each. Sometimes the file is larger than 5mb. The whole workflow stops in that event. I'd love a work around to upload larger files, but I don't think

    • Modify the default layout of how task fields are ordered in Project View

      Hi all, I am trying to change the order the columns on project List view when a project is created initially. See image below. Currently, when a project is created, a predefined collumns are created and also its orders. I am aware that I can "hide", and

    • Enhanced Column Customization in Zoho CRM Email Templates

      Dear Zoho CRM Team, I'm trying to create a footer in the Zoho CRM email template based on a specific design, but I’ve encountered limitations with the current WYSIWYG editor. Currently, the editor only allows adding preselected column structures with

    • Zoho Flow Doesn't Detect Desk Custom Field Change

      I have a Flow that is configured to be triggered when a custom field on a ticket changes. I also have a Schedule in Desk that runs a script that changes the custom field. When I change the custom field manually in the Desk interface, the Flow runs as

    • CRM

      I have a portal set up where a contact can see other contacts within an account automatically. When a contact in the portal enters a deal, how do I make sure that deal is assigned to the account so other contacts in the account can see the deal was generated?

    • Page - Gauge - Target Values

      Is there a way to make the Target and Maximum values say a formula or query?  For example, total sales for the month = 109 and I want to make my gauge today's percentage.

    • Instantly refine your CRM dashboard using Filters and download underlying data – all in a few clicks!

      Hello everyone, Imagine you’re a sales manager overseeing multiple product lines across different regions. You're viewing your sales dashboard in Zoho CRM, which gives a powerful overview, but you often need to drill down to see how a specific product

    • Understanding "Deposit from Other Accounts" vs. "Sales Without Invoices"

      Hello, Zoho team! I am a new Zoho Books user trying to correctly input some historical financial data. I'm hoping you can help me understand best practices for when to use "Deposit from Other Accounts" vs. "Sales Without Invoices." I'm an author who receives

    • Unified WhatsApp Number Management in Zoho Desk and SalesIQ

      Dear Zoho Desk Support Team, We are currently utilizing both Zoho Desk and Zoho SalesIQ for our customer support operations. While both platforms offer WhatsApp integration, we are facing challenges due to the requirement of separate WhatsApp numbers

    • Pin multiple columns and adjust column widths in CRM subforms

      Hello all, Subforms act as secondary forms or tables in which you can associate multiple line items to a primary record and thereby ensure more structured and comprehensive data organization. We've made some recent enhancements to subforms. Here's what's

    • Can't create Workflow for Module 'Service Appointments'

      Hey everyone. I am trying to create a workflow from FSM to Desk. When I start the creation process I select the Module (Service Appointments) and then title it and hit next and it just sits there. Now If I select a different module it works fine. Have

    • Next Page