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

      • How do I add more schedules to Zoho Creator?

        At the moment, the number of schedule calls we have in Zoho Creator are 1800 per month and I was wondering if it was possible to upgrade that amount to something higher. I'd like to know my options as well as the pricing.

      • Conexion CREATOR x CRM

        Buenas tardes, Tengo un problema con un código que crea un registro en CRM. Revisé el CRM para eliminar los campos obligatorios, pero cuando ejecuto el programa, aparece el siguiente mensaje de error: {"code":"MANDATORY_NOT_FOUND","details":{"api_name":"data"},"message":"required

      • Invoices with billable time and expenses

        I cannot seem to get a straight answer. We are looking to create an invoice to send to our clients, but it needs to have the following on it: 1. Billable hours for each employee. All hours for the pay period on one line, by employee. 2. Expenses for each

      • Search Bar Improvement for Zoho Commerce

        Hey everyone, I've been using Zoho Commerce for a bit now, and I think the search bar could really use an upgrade. Right now, it doesn't show products in a dropdown as you type, which would make finding items a lot faster. On Shopify, for example, you

      • Send Whatsapp with API including custom placeholders

        Is is possible to initiate a session on whatsapp IM channel with a template that includes params (placeholders) that are passed on the API call? This is very usefull to send a Utility message for a transactional notification including an order number

      • Can't get form response to populate custom PDF template

        I've created a template and set it to default but can't figure out how to get the response to populate that template. It keeps giving me the default summary.

      • Zoho Sheets not compatible with Excel/Google Sheets

        In order to share a copy of a Zoho sheet with someone that does not use Zoho, it must be downloaded as MS Excel format and then added to an email.  This is a labor intensive, and frankly confusing process.  I have forgotten to do this before, only to

      • Add Ability to Designate Decision Branches as "Error Branches"

        Zoho Flow gives the ability to track down, troubleshoot, and fix errors with the Status and Filter dropdowns in the History tab. This works well for when a "normal" Flow action registers with an error. However, there are other times where it would be

      • Visitors sending message via Whatsapp are not saving on contacts

        Visitors who sends me messages from Whatsapp when i finish the chat do not populate on contacts, how can I add them as contacts?

      • ChatGPT only summarize in English

        Hello i' v enabled chatgpt in salesIQ, it works great inside conversation (revise, Rephrase etc) add tags works well with another language than English. But when I want to summarize it render only in English, despite sales IQ is set to another language.

      • Brand with multiple facebooks pages

        HI, We are a small publisher that has different FaceBook pages for each of our product lines. All are within the same FB account.   Is it possible to add all of these pages to our one brand in zoho social so I orchestrate the posts between the different products?    Cheers, Joe

      • How do I connect Sales IQ to Shopify

        How do I connect Sales IQ to Shopify.    

      • DORA compliance

        For DORA (Digital Operational Resilience Act) compliance, I’ll want to check if Zoho provides specific features or policies aligned with DORA requirements, particularly for managing ICT risk, incident reporting, and ensuring operational resilience in

      • Create Ticket from Chat with Rest API

        Hi to everyone, is possible to create a ticket from Chat with Rest API? In user interface is possible by clicking on the button "Convert chat as a ticket". Anyone know how to do that? Thanks

      • How to send binary data in invokeurl task?

        Hello, I am using Adobe's Protect PDF API. Source: https://developer.adobe.com/document-services/docs/overview/pdf-services-api/ Everything works fine in Postman. But for some reason after encrypting the file, it is empty after password protecting the

      • How Can I Customize Sales Reports in Zoho CRM to Better Track Our Sales Team's Performance?

        Hello everyone, I'm new to using Zoho CRM and need some help with customizing our sales reports. We want to track our sales team's performance more effectively and visualize trends that can inform our strategy. What specific customizations or features

      • Items should display under specific warehouse

        I have configured the multi warehouse but it show all the items under all warehouse which is not correct according to our business logic, so i want that items should only display under that specific warehouse not under all the warehouses not even with zero quantity. Some items should be common but not all so is there any option for that purpose so i can specific the items to its warehouse. Regards

      • Package Dimensions

        Packages need to have dimensions that are sent to carriers in addition to just the weight. Without the package dimensions being transmitted to carriers, the correct dimensional weight is not calculated for the label price, which results in corrections

      • Theft Prevention Sensor Integration in Zoho Inventory

        Is there a way to integrate a theft prevention sensor with Zoho Inventory, so items cannot leave the store unless they've been scanned at checkout? Any insights or existing solutions would be greatly appreciated.

      • Zoho Workplace gets yet another security boost: The addition of Zoho Vault

        Hello Community, Passwords are often the first line of defense, yet they're also one of the most common weak points. We're thrilled to announce that Zoho Vault is now integrated with Zoho Workplace! Zoho Vault Standard is now included at no extra cost

      • "notes"-field in a task to full width?

        Hi, Is there someone that can tell me how to adjust the "notes"-field in a task, to full width? I already played around with 1 or 2 columns, but this has nu effect on the standard width. Thx in advance for your help. Cheers, Ralph.

      • How to download Job Sheets in Zoho FSM?

        Hello, I'd like to download copies of completed job sheets as PDF's for upload to a workdrive to keep an audit record of completed Job checkout sheets. I do not see download of this file type as an option - any help is appreciated!

      • [Webinar] Zoho Writer for law firms and legal professionals

        Are manual processes slowing down your legal practice? Are you ready to simplify document management and free up more time for your team to focus on what truly matters? Join us on January 16, 2025, for an exclusive Zoho Writer webinar designed specifically

      • Introducing Bin Locations In Zoho Inventory

        Hello users, We are excited to let you know that your wait for the Bin Locations feature has now come to an end! Yes, you heard us right! We are here to introduce the much-awaited Bin Locations now in Zoho Inventory. But before we dive into the feature

      • How to send mail with js SDK

        Hell o I'm using https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js, for my widget in CRM (built with sigma) Is it possible to send email from js file, I try ti use that ZOHO.CRM.API.sendMail({ "Entity": "Accounts", "RecordID": sharedVariableEntityId,

      • Cannot add Zoho Forms link to LinkedIn

        Hello, We have encountered a problem where we are unable to share a Zoho Forms link on LinkedIn. This is what we got from LinkedIN, but we have not heard back from Zoho Support as yet, and we are meanwhile stuck... "It seems the URL does not scrape the

      • Feature request - pin or flag note

        Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less important

      • i keep see there is a connetion issue connecting 3rd party api on zoho when using zia

        hi there , i have set up open ai api to zoho zia (copied and pasted to zoho zia) but I keep getting notificaiton "there is a connetion issue connecting 3rd party api on zoho" when using zia on top when click zia and try to type in word there

      • SendMail in CRM Deluge function rejects a validated email address

        In a CRM Deluge function, the email address is considered invalid. Is there another method by which it can be validated? It's unacceptable in my current situation to use either the zoho.loginuserid or adminuserid as the From address.

      • how do i remove a specific Zoho Service from my account

        I no longer need Zoho CRM, ZRM Assist nor ZRM BugTracker. How do I remove them from the list of apps for my account?

      • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

        Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers

      • Unveiling Cadences: Redefining CRM interactions with automated sequential follow-ups

        Last modified on 01/04/2024: Cadences is now available for all Zoho CRM users in all data centres (DCs). Note that it was previously an early access feature, available only upon request, and was also known as Cadences Studio. As of April 1, 2024, it's

      • Pay Contractor Timesheets

        I have contractors that fill out a timesheet. Each hour must be assigned to a current client. I need the easiest way to get the contracts paid. They are paid on an hourly bases. How can this be done?

      • Set up slack alert based on a field changing from one option to any other

        Hi, I'm trying to set-up a workflow to send a slack alert if a field changes from one option to any other. I've set-up a workflow to trigger on Edit and when a specific field gets modified but the only option I have 'is modified to' when really it should

      • Better UI more user friendly

        Hello everyone, I think all finance apps, especially Zoho Books, would benefit from the following suggestions/ notes: 1. Grouping Fields in Zoho Books: Unlike Zoho CRM, Zoho Books does not seem to have an option to create sections or group fields. This

      • Chronicles of 2024: The Year in Retrospect

        As we close out 2024, let’s take a moment to highlight the new features and updates that have enhanced Zoho Invoice in 2024. Among the exciting enhancements, we have launched a new AI-powered chatbot designed to assist you in understanding the app's features

      • Power of Automation :: Automatically archive your inactive Projects

        Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

      • 554 5.1.8 Email Outgoing Blocked

        HELP!!!!! My e-mail marymariya@zoho.com is blocked. Error: 554 5.1.8 Email Outgoing Blocked The third day I am writing to the forum, but zohosupport is not responding. Why? What is the problem? I ask to help solve the problem, because I can not communicate with my customer base.

      • Zoho Inventory: Rewinding 2024

      • Custom Modules Now available for Standard and Professional Editions with Expanded Limits across all editions

        #CRM25Q1 Hello Everyone, We are here with an exciting update to Custom Modules in Zoho CRM. Custom modules will now be available to Standard and Professional Edition users, with expanded support across all editions. The standard modules offered in Zoho

      • Next Page