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


    • Recent Topics

    • Merge Tickets Directly from Contact Page in Zoho Desk

      Dear Zoho Desk Support Team, We are writing to request a new feature that would allow users to easily merge tickets directly from the contact page in Zoho Desk. Currently, the only option to merge tickets is from the Tickets list view page, which can
    • when I open my sheet ,it always start at "A1" despite I left it at "N234"

      when I open my sheet ,it always start at "A1" despite I left it at "N234"  Is it possible to make the sheet open where I left it? 
    • Leistungsdatum in Rechnungen (Zoho Books)

      Hallo, ist es irgendwie möglich den Leistungszeitraum in der Rechnung aufzuführen? Beste Grüße Aleks
    • Why is this an Invalid Collection String Error?

      Here's the code snippet: Enddate = EventEnd.toDate("yyyy-MM-dd"); EventCollection = Collection(); EventCollection = zoho.crm.searchRecords("Events", "(End_DateTime:starts_with:"+Enddate+")"); for each eventday in EventCollection { //create a list of events
    • ZDC Hackathon 2024 Category-wise Winners !

      Zoho CRM Client Script Hey everyone! After rigorous evaluation by our 14 expert judges, we’re beyond excited to announce that two incredible teams have won the Zoho CRM Client Script – Product Category award for their outstanding innovations! Team 1:
    • What does "Tickets for Review" do?

      What is the purpose of the va nilla view " Tickets for Review?"
    • Firebase Functions integration

      Hello Zoho Team, Please advise how I can configure SMTP in my account to facilitate Firebase-triggered email functions. Please note that I desire to send an email with a JSON object collected from Firebase Firestore and included in my mail to forward
    • How to provide recommended KB articles in the welcome message

      I'm new to Zoho and am looking to replicate something I did for a previous employer. I want all newly created tickets to receive an automated welcome message that includes a few recommended articles from our knowledge base. Ideally there would be a way
    • Zoho Desk View Open Tickets and Open Shared Tickets

      Hi, I would like to create a custom view so that an agent can view all the open tickets he has access to, including the shared tickets created by a different department. Currently my team has to swich between two views (Open Tickets and Shared Open Tickets).
    • No more IMAP/POP/SMTP on free plans even on referrals with NO NOTICE

      Outraged. Just referred a colleague to use her domain (not posting it publicly here) to Zoho, just as I have other colleagues, clients, friends. Expected the exact same free plan features as I have and as everyone else I ever referred got. I was helping
    • Canva Integration

      Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,
    • Join us at the Canada ZUG Meetup: What’s New in Zoho CRM

      Hello Zoho Community! Start your year with fresh insights into Zoho CRM’s latest updates and tools. Whether you're a CRM beginner or a experienced user, this meetup is crafted to help you optimise your processes and leverage new features. Explore practical
    • So many tools...

      As a low- to no-code user and no funds to budget, there are so many options to choose to get my work done and when I start thinking about workflows for people other than myself, I get confused about the most streamlined way to move forward if I can get
    • Pull Price Book and Product info in a single report

      i want to be able to produce price books for my engineers. If i could produce a report with the retail price as an option that would be great. This seems to be an old issue to please what are the plans. Moderation Update (16th Feb 2024): The option to
    • Custom TaskList and Tasks creation based on project custom field

      Hello, I'm trying to configure Zoho Project for a specific use. I have created a custom multiselection field in project template and I would like to create one tasklist with multiple tasks in it depending on the multiselection field on each project. For
    • Zoho Creator to Zoho Books

      Hi, I use Zoho Creator and Zoho Books. I use Creator to produce and send invoices (for specific reasons) but want to create a corresponding invoice in Books. Has anyone done this and if so, how? I have the following documentation but can't make sense
    • Subform Zoho Form to Creator

      Hi, I would like to be able to retrieve the values of a Zoho Form subform to create an entry for each in Zoho Creator. To send from Form to Creator, I use Zoho Flow. I have a custom function, which should normally retrieve each field value then create
    • Multi Select Between Modules

      Hi, I'm not sure if this is possible, but I want to "import" or "mirror" the multi select options from one module to another. For example... I have Module "Clients" with a Multi Select Field of "Enrolled Services" I also have a Module "Services" with
    • Doesn't Catch Duplicate Accounts

      Zoho is very bad at catching duplicate accounts. If we have an account in Zoho, and we import the same account but with "Inc." or "LLC", it doesn't catch it, it just duplicates it. When importing from another app (like ZoomInfo) I set it to catch duplicates
    • email Signature from Contact page not working

      Hey guys, I just set up my signature for the email i integrated with ZOHO. It works when I'm using the email client but when I send an email from the contact or lead page it doesn't add the signature. problem on my end or ZOHO's? thanks for the help!
    • Create Quote does not show the "Product Description" entered as part of the Product setup.

      The product description created as part of the product setup page, does not show in the Create Quote module; The module allows for an additional description to be added but without access to the original stored description. By selecting the product from the "Product Name Lookup" pop-up, the "Product Description" part should be populated from the product record where the user is allowed to further modify it.
    • 554 5.2.3 MailPolicy violation Error, help?

      This message was created automatically by mail delivery software. A message that you sent could not be delivered to one or more of its recipients. 554 5.2.3 MailPolicy violation Error delivering to mailboxes I am not sure why i am getting this, please
    • New Customization options in the module builder: Quick Create and Detail view

      Hello everyone, We have introduced two new components to the module builder: Quick create and Detail view. The Quick Create Component It is a mini form used to create a record and associate it to the parent record from a lookup field. For example, if you have a Deals lookup in the Contacts module, then you can associate existing deals or create a deal and associate it with the contact. You can customize this Quick Create form by adding standard as well as custom fields. There is no limit to the number
    • Créer un second centre d'aide dans Desk

      Bonjour, je souhaiterai pouvoir créer un second centre d'aide dans Desk afin d'avoir un service complètement indépendant du premier. Le premier fonctionne bien, il est pour notre service client. Mais j'aimerai maintenant pouvoir créer un nouveau service
    • 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
    • User Tips: Auto-Create Opportunity/Deal upon Quote Save (PART 1)

      Problem: We use quotes which convert to sales order but Users / Sales Reps do not create opportunities / deals and go straight to creating a quote. This leads to poor reporting. Implementing this solution improves reporting and makes it easier for users.
    • Email Campaigns overview page is missing SENT DATE and # people sent to!

      I would like to see the date the email campaign was sent, so I can understand and track when each email campaign was sent. Right now, unless you go to a contact who received a campaign, you cannot see when the campaign was sent (!!!!!!). So, if my boss
    • Create an event from mail

      From mail I can create a task but I cannot create an event.  What am I missing?
    • How to customize Check Out form, process & design

      Hi Just set up my first shop and changed the design quite a bit. Like it so far! However, did not manage to change either Design, nor Content, nor Process of the Check Out. Where can I change this? E.g. - change the font of the check out forms - change
    • How do I use Deluge to search a Ticket by its Account?

      Usecase: with Zoho Flow, my task is to filter Tickets in Zoho Desk based on a few criteria and then use that information to edit and invoice in Zoho Billing. To achieve that, I'm using the Deluge search API to get all tickets from each Account (our clients)
    • Issue with bulk importing into commerce (updating existing products)

      Hello All, I'm struggling to bulk update my existing products within my shop. I have exported all the products and appended the image url (copied from another product within the file) and then important back into commerce. The file is accepted but flags
    • Option to Re-order from past orders

      Customers would like to place a repeat order with the business entity. Currently there is no option to support this and everytime the customer has to check out following the same process. Can a option be given to reorder from the past orders?
    • Coupons are not being accepted. (Saying expired)

      I am putting together a coupon for our company's store. When I went to test it, I received a notification that the coupon is expired. (the date range should be fine though) I've tested different options for the coupon along with one of my other colleagues
    • Issues with Agent Forwarding Card in Zobot

      I implemented an Agent Forwarding Card in a Zobot that I created. There are a few issues with the way the card functions in an actual chat. The way it is designed right now is not easy to use and is not intuitive. Here are a few of the issues I have with
    • Drop Shipping

      We have manufacturers drop ship all of the items in our ecommerce store. that means that each item needs to have its own unique zip code to acquire real time shipping rates from that zip code. and then the manufacturer of that item gets an automatic email
    • apple pay

      if a customer is accessing via an iphone etc and we are taking payments via stripe would they be able to use apple pay?
    • is Zoho eCommerce dead?

      Hello, we have Zoho eCommerce in our Zoho One Suite. After a year's break, we took a look at Zoho eCommerce this week. Very little has been developed. The normal eCommerce 2023 standard features are missing. Ok, Zoho eCommerce cannot be compared with
    • Issue with Cart API Implementation - Products Not Being Added to Cart

      I am writing to report an issue I'm experiencing with the Cart API implementation. I have tried multiple approaches to add products to a customer's cart programmatically, but I'm encountering difficulties. API Request Approach I am making a POST request
    • Pre-orders at Zoho Commerce

      We plan to have regular producs that are avaliable for purchase now and we plan to have products that will be avaliable in 2-4 weeks. How we can take the pre-orders for these products? We need to take the money for the product now, but the delivery will
    • Zoho Desk Onboarding Assistance - How to do bulk taging

      Hi How to apply a particular tag to multiple tickets in one go.
    • Next Page