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

        • Tip #10: Automatically add tags to Zoho CRM records using form responses

          You may be using tags to filter records, create reports based on specific tags, or let your sales team to know which clients to give priority to. Don't skip tagging for the crm records added via forms. The tags can be set to be automatically captured during the form submission. How it works When you set up a configuration to push form entries into CRM, you can add a tag to them automatically. The tag value can vary based on the respondent's input (captured using form fields), or you can include a

        • Understanding response time

          We have the following set up for our SLA. When a contact first writes in, the response due and resolution due dates are set. When one of our agents responses, the response due goes away. When a ticket gets a response from the contact, it appears to reset

        • Publish multiple languages at once in Knowledge Base

          Does anyone know if it is possible to publish multiple translated articles at the same time? My knowledge base has about 35 languages, and while I have them set up to automatically translate, I still have to go in and select each language and manually

        • Canvas and Related lists

          Hi, As much as I like canvas, when adding in a asection with related lists,it doesnt mimic the same functionality as the standard view within the CRM e.g left hand panel will show the module and total number of records. Is there a way of indicating this

        • Email address ZOHO suggestions in replying - how to delete unwanted suggestions?

          Hi, I have some "unwanted" email addresses suggestions by ZOHO, and made some mistakes by replying for some tickets already. How can I clear this in ZOHO directly, I deleted all web browser history and cookies . Did not help :/ Below example, where one

        • Subform edits don't appear in parent record timeline?

          Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

        • Zoho Learn vs. Trainer Central

          Hi, I'm currently using Zoho One with a WordPress-based website and WooCommerce to manage my online courses. I would like to know what is the difference between Zoho Learn and Trainer Central and if it's possible for these two platforms to replace WP

        • How to Display a Logo Image on a Public Form?

          I would like to display a logo image in the header of a form. To achieve this, I added an Add Notes field to the form. The code below works perfectly for Zoho users accessing the form. However, when the form is made public, the image does not load properly:

        • Creating a Zoho Online Meeting in a Blueprint

          We are looking for an easy solution to schedule online meetings in a blueprint and ran into the same problem discussed in this topic: https://help.zoho.com/portal/en/community/topic/custom-function-to-set-meeting-to-online-meeting (After connecting Zoho

        • Enabling 'From Number' and 'To Number' fields in the Calls module

          Hello everyone, We've added "To Number" and "From Number" fields in the Calls module as part of our latest update to provide users with the option to enable or disable them through the Calls Preferences tab. When enabled, these fields will be displayed

        • Workaround for Zoho Inventory changing previous Fiscal Year Trial Balance in QBO

          We've run into an issue where Zoho Inventory syncs to QBO and makes adjustments to journal entries from previous fiscal years. Fiscal Year End reporting has been long completed, but the Trial Balance keeps changing. Zoho does not have a fix for this,

        • Route Optimizer

          Does Zoho Inventory offer route optimization for our in-house deliveries? It will save us time to manually route our daily orders. Thank you

        • Can documents attached to different ZohoForms automatically go to different OneDrive folders?

          Hi there, I set a workflow to track and store applications coming in from our website. I created two different Zoho forms, one for unsolicited applications, one for applications to job postings. After any of the forms has been filled in, a new record

        • TeamInbox down?

          Hi everyone, we are getting message "Sorry, this action cannot be performed due to an internal error. Please try again later. We are on the Canadian data centers. Can someone please confirm if the service is down? Thank you! F

        • Purchase Requisition in Zoho Books

          I want to understand if Zoho Books is having the following workflow: PR ( Purchase Requisition ) >> PO ( Purchase order) >>  GRN/SRN ( Goods/Services receipt note) >> Bill

        • Confirmation prompt before a custom button action is triggered

          Have you ever created a custom button and just hoped that you/your users are prompted first to confirm the action? Well, Zoho knows this concept. For example, in blueprint, whenever we want to advance to the next state by clicking the transition, it is

        • Marketer's Space: Streamline marketing and sales by integrating ZMA's Planner with Zoho CRM

          In a competitive market, clear goal-setting and seamless campaign execution are crucial for marketing and sales alignment. When integrated with Zoho CRM, Zoho Marketing Automation's Planner enables marketers to create, manage, and measure campaigns effectively

        • Custom emails for Portals not working

          I changed the standard templates to custom email templates for all three options, but the invitation is still sending the original email layouts. Anyone know why this would be happening? I changed them 2 days ago.

        • Switching scheduled webinars from Live to On-demand

          Now that On-Demand webinars has been added as an option for webinar presenting, is there a way I can edit already scheduled webinars from Live to on-Demand? These scheduled webinars already have people registered. Thanks

        • Zoho CRM v2.1 deprecation or sunset plans ?

          Hi Team Wanted to know if there is any plan to deprecate v2.1 CRM apis https://www.zoho.com/crm/developer/docs/api/v2.1/ and if yes by when

        • Forex Bank Refund Entry

          Hello, please advise how to enter refunds from our bank forex department. The refund was because we were on preferential rates but at the time of USD purchase were not given the preferential rate, therefore the bank calculated the excess that we paid

        • Auto-Populating Custom Field

          This is to request a feature enhancement for our invoicing system. We're currently creating invoices with a single item per invoice and have a custom field called "Related Vehicle." We would like the "Related Vehicle" field to be automatically populated

        • How can i Customize Delivery Note?

          I need to customize delivery note like change the tittle for language purposes and also include only the balance due

        • Delivery note template

          We have some reasonable templates for sales docs but the delivery note one is very limited. It would be nice if we could have the same options as the sales form templates or even create our own by cloning an existing sales template, modifying (ie: removing

        • INTERCOMPANIES INVOICING

          Dears , I paid expenses on behalf of our sister company from my cash account , then month End i issued an invoice to the sister company , my question is how to put the expenses GL in the invoices

        • Zoho CRM Theme Color?

          I've read multiple articles stating it's possible to change Zoho CRM theme colour (top menu bar) from personal settings menu, however, my zoho has no options for this at all and I've looked everywhere........has this feature been removed? I'm currently

        • How can i force the user to select a project when creating an invoice ?

          Hello I tried all the ways that i know , but no way is able to stop creating an invoice without project.

        • Sales

          1/ How can I make a discount on invoice exmple : invoice 5,100 le , custmar pay 5000 and I need to make this 100 le as a discount , how can i make it ?! 2/ Is thare any report can make me match my company’s balance with the customer’s balance?

        • Include Project Hours when Creating Estimates from Projects

          Hi Currently, in Books, you can create estimates from Projects by inserting tasks that pull both the task and the hourly charge rate. But it doesn't pull the budgeted hours for the task, so you manually have to remember the number of hours for a given

        • acc

          Regularly sending statements to customers is an imperative part of many business processes as it helps foster strong customer relationships and provides timely guidance on pay//

        • South African Payment Gateways

          Since the "Demise" of Wave many South African users have moved over to Zoho and yet for years users have been requesting Integration with a South African Payment Gateway to no avail. Payfast was the most commonly requested gateway as it supports recurring

        • CRM Implementation

          I need to implement Zoho CRM. Is there a useful user manual available to guide me through the implementation?

        • Zoho Social integration with Zoho Flow

          Is there any plans for Zoho Social integration with Zoho Flow?

        • Marketing 2.0 has been a catastrophe

          Anyone else having significant issues with their link between their CRM and Marketing automation since moving to version 2.0? We had an easy flow for triggering leads in the CRM to journeys in Marketing Automation but now nothing seems to work properly.

        • Cannot average "Duration (Time)" from Pick List History Tracking in Reports

          Okay, let's say I have a custom module. In this custom module I have a pick-list named "Status" with "New", "In-Progress", "Completed" values. I also have turned ON pick-list history tracking and chose "Time" to track the duration in (instead of "Calendar

        • Customer Statement Template

          Hi. how can i add order number "customer LPO number" in the customer statement. regards

        • Authorize.Net Update: Disable Transaction IP Velocity Filter to Avoid Payment Failures

          Update: The Authorize.Net integration was updated on November 20, 2024. To prevent recurring transaction failures, we recommend disabling the Transaction IP Velocity Filter at the earliest. We’re updating the Authorize.Net integration in Zoho Books on

        • Need to send a single email to up to 20 recipients

          I want to send a single email to ~16 or 20 recipients. It appears that I cannot do this in Zoho email as it gets flagged as unusual activity. I need to be able to communicate with this group on a regular basis. What am I missing that Zoho doesn't allow

        • Unable to Schedule One-to-One Emails in Zoho CRM

          Hi everyone, I’m using the Zoho CRM Professional Edition and facing an issue with scheduling one-to-one emails directly from CRM. While I can send immediate emails without any problem, I don’t see an option to schedule these emails for a later time. I’ve

        • Canvas Detail View Related List Sorting

          Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

        • Next Page