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

        • Calculate months and years between 2 dates on subform

          I am looking for a function syntax for an employment candidate to calculate the number of years and months (decimal format. eg 1.2 years) they are employed. I have their start date entered, but if the end date is blank, that tells me they are still employed

        • Combine related grouping values into categories in CRM analytical components

          Hello everyone, Analyzing large datasets can be challenging when dealing with numerous individual data points. It's often difficult to extract meaningful insights when information is scattered and ungrouped. To address this, we're adding options to create

        • How Kiosk Studio can simplify sales for bank employees | Kiosk Studio Session #4

          Hello everyone, Banks can boost revenue by cross-selling to their current customers. For example, they can sell credit cards, personal loans, and more to existing account holders. To do this, bank employees move all around the CRM, open and close records,

        • Tip #19 - Create checkbox tracker in your spreadsheet

          Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sample

        • Integrate Oracle with ZOHO CRM

                               Please let me know if its possible to Integrate Oracle with ZOHO CRM. If yes then help me in doing it. 

        • UUIDs

          Has anyone coded a Universal Unique Identifier (UUID) generator in Deluge?

        • Introducing signer groups: Streamline signature collection and make it even faster

          Hello everyone, We're excited to introduce signer groups, a feature designed to make your signing process quicker, more efficient, and collaborative. With signer groups, you can send an envelope to a group of people, and any member of the group can open

        • Calendar - Recurring Event - End of Month and Last Weekday of Month

          How do I set a calendar event to recur on the last day of every month? How do I set a calendar event to recur on the last weekday of the month?

        • Duplicate Zoho Invoices and Sales Receipts

          We have been running into an issue where upon saving an invoice or a sales receipt, we get a duplicate: same information saved twice but with a different invoice id/number and sales receipt id/number. I have logged a ticket but so far no response. It

        • Introducing revamped Zoho Creator Developer Console—a powerful platform for developing and distributing apps

          Hello everyone! We're thrilled to announce the launch of the revamped Zoho Creator Developer Console—a dedicated platform designed specifically for Creator developers and Partners to build, test, and distribute apps to your clients. Developer Console

        • Phone App of CRM doesn't find contacts

          I open the crm to and do a contact search but nothing comes up. If I do a full zia search it will find an old note that is attached to a contact and I can open the contact. BUT I still can't enter notes of calls, set appointments, etc. It requests I go

        • [Product Update] Deprecation of 'Inbound Transport Details' module in Zoho Analytics - Amazon Seller Central integration

          Dear Customers, Please be informed that the Amazon Seller Central will be deprecating the 'Inbound Transport Details' module APIs effective December 20, 2024. As a result, this module will no longer be supported in the Amazon Seller Central - Zoho Analytics

        • Is there any support for Drivers license and other forms of ID scanning capabilities?

          When scanning a drivers license barcode for data input to a Form, the scanning tool receives all the raw data but there doesnt seem to be a function to limit or remove the unnecessary fragmrnts, like a prefix. Is there any support or info in the help

        • Exciting Update: Multi WhatsApp Business Account (WABA) Support Now Available in SalesIQ!

          We’re pleased to share an important update that will enhance the way you manage your WhatsApp Business accounts (WABAs) within SalesIQ. With the launch of Multi WABA support, you can now connect and manage multiple brands more effectively, each under

        • Gravity Forms plugin not passing some fields

          I use the gravity form zoho plugin to push data from my lead form into my lead page in Zoho CRM. Everything was working file for about 6 months. Suddenly on Oct 1st, some of the fields are no longer getting passed to Zoho. The fields with the problem

        • Can't delete bank transactions (i changed from 14 days trail to free just now)

          Hi, I manually added one bank transaction When i try to delete it, it say below: What should I do?

        • Feature Request: Search in the PC client. Some thoughts about the search.

          Hi all. I'm really excited to start using Zoho Notebook, but I'm missing some of the search capabilities on my desktop. There are also some thoughts on improving search in general. Search is very important to me, without it it is difficult for me to use

        • Leave Policy for Brazil

          Hi, Brazil asked us to configure Zoho People to apply the following policy: · To block starting vacations 2 business days before holidays or weekends; Employees cannot start their vacations 2 days before holidays or weekends. Example: If December 25th

        • Adding date field to each individual Items when creating Invoices?

          When adding items into an invoice I need to be able to have a date for each item. Example below: Date Item Description Qty Rate Discount(%) Tax Amount 31/07/13 Brown Sugar Performance 1.00 3,000.00 0.00 10% $3300 Is this possible or will it be in the

        • Auto-Create OneDrive Folder Structure Upon Lead Creation

          Hello, New to Zoho and looking for help on a critical process automation I'm looking to implement. My company currently utilizes OneDrive for file management and the folder structure is Proposals -> Client Name -> Address (where I need to initially create

        • Profile Page View Customization

          I need to change the fields, sections from the profile view of an emplyoyee.

        • What do the Image Sizes mean in Zoho CRM Email Templates?

          Below you can see the image options in email templates: Banner, Fit, Small, Medium, Original, Custom. Can someone from Zoho please share with me: What each is/means? How each will look on desktop AND mobile? How to edit "custom"?  If I choose "Custom"

        • Translate any published presentation to the language of your choice

          As part of our constant effort to enrich your presentation experience, Zoho Show has rolled out a new feature for translating published presentations. Consider the following scenario: Zylker IT services, a multinational corporation, has announced product

        • Blueprint: multi-select lookup field not available in the criteria option

          I read this old forum post which stated that multi-select lookup fields are now selectable as an option in a Blueprint transition configuration: https://help.zoho.com/portal/en/community/topic/blueprint-multi-select-lookup-field-not-available-within-blueprint-transition

        • Apply Credit Note Automatically

          We need the ability to apply open Credit Notes toward invoices generated by recurring invoice as the first, priority payment. This should be an option that we can enable/disable in the recurring profile and/or the Credit Note. Other invoicing systems can do this. I'm not sure why Zoho Invoice doesn't have it. Here's an example for a Recurring Invoice... If a customer has open Credit Notes, and a saved credit card set for auto-pay, once an invoice goes out, the credit balance gets automatically applied

        • Workflow for "Expenses" module?

          Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflows

        • Record Template - Conditionally printing sections

          Is there a way to conditionally print a section of a Record Template? More specifically I am printing records from a Form "Invoice". That Form has 3 SubForms. I'd like to print the content of those SubForms using a Record Template but only if they have at least one line item. If they have no line items, I'd like to hide the headers for that section on the printout.

        • User can choose the PDF report

          Hi. I would like to find out if a user (Creator or customer portal) to choose from the different PDF customised reports that have been built?

        • Query table pull last 12 months

          I am tying to pull the following criteria and the date is always what causes me the issue. I want to pull people (pco_id) who have entries of "event_id" being these 2 events and whos "kind" is Regular or Guest and where the event_starts_at (date column)

        • PLEASE FIX Search options and consider a Global seach option

          A recent update has removed the ability to search for addresses and phone numbers under contacts. We cannot find where this moved to (If it is still available). Please put these options back as we cannot locate specific projects anymore. Also please consider allowing for a Global search. This would really improve the search engine. For example: If I search for "Sally Jones" then all invoices , estimates, vendors etc.. would populate.. Please let me know if you need any more information. Thank You....

        • Customize your calendar based on personal preferences

          Greetings, We're happy to introduce a few new capabilities to the Activities module's Calendar View! Now you can tailor your calendar's appearance and notification settings to suit your needs. In the past, the Calendar View lacked customization options

        • BUG ALERT: Client Script + Commands -> $Page contextual data is not updated

          When using the new Client Script Commands feature, there is an issue with the Client Script $Page contextual data not accurately being updated each time a Command is run. Assuming a Client Script Command called "Client Script Command Bug" with the following

        • Show iFrame of related List inside of Blueprint Transition

          Hey, is it possible to show an iFrame of a related list like this inside of a Blueprint transition?

        • Lookup Fields not Converting

          I manage holiday properties. I have a lookup to the Accounts (Properties) in the Leads module. The lookup is connected to the property address field. When I convert it the lookup field does not update in Deals, although the property address does. There

        • 2024: A Year of Transformation with Zoho Forms

          As we close the curtain on another exciting year, it’s time to reflect on the strides Zoho Forms has taken in 2024. From empowering businesses with advanced tools to simplifying workflows and enhancing user experiences, our updates this year were all

        • Stop selling out of stock Items.

          Hi I have been using Zohobooks for a around 8 month now. I am not involved in selling process but my staff cant stop selling product which they do not hold in stock, this is a big headache for me as physical count never matches what is shown on the books. 

        • Bigin API Token Request ("invalid_client")

          Hi people, I tried to connect to the API without success, I've read all of the documentation multiple time and tried just about everything. I tried to do it with Python Request module and with Postman, passing the information through both the URL parameter

        • Customer Happiness not clickable when using API

          Is there a way to automatically add the Customer Feedback links when generating email drafts via the API? Currently, the feedback links are only added when generating an email draft using the UI. I tried using the endpoint described in https://desk.zoho.com/DeskAPIDocument#CustomerFeedback#CustomerFeedback_Getthecustomerfeedbackplaceholderlink

        • Send To Zoho Sign not Showing

          The button send to Zoho sign is not showing on my Zoho CRM . Is there additional steps I need to take after installing Zoho Sign to CRM ?

        • How to Get An Image's URL once it's uploaded to library?

          I manage to find URLs to the images I uploaded to my library, but after a day, it seems the links stop working like its only temporary. Where can I find the ACTUAL solid URL for my images that I upload to my Library so I can use them for my custom template / HTML coded template? Thanks, Mac

        • Next Page