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

    • 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

    • 🔍 How to effectively organize data in a CRM? – My approach and questions for you

      Dear ZOHOssians! While working on organizing data in a CRM, I decided to use the native modules: Leads, Deals, Contacts, and Accounts as a solid foundation for managing processes. However, I’m now exploring the next steps and considering various options

    • Stock Count

      The stock count is a nice new feature, but we cannot figure out how to: 1. Use it without assigning to a person, we have a team or one of multiple do stock counts as do most any company. 2. Add any extra fields to what the "counter" sees. The most important

    • Annoying Pop-Up Zoho Advertisements and Announcements Within Apps

      It is beyond frustrating to have to close out Zoho's announcements for Webinars, Zoholics, updates, events, etc while working within ANY of the Zoho apps. I see it when accessing Zoho One, Cliq, Creator, and CRM. Zoho boasts to be a professional solution

    • Images uploaded onto text notes through the mobile app won't render

      When uploading am image onto a text note, exiting the note and going back in, the image is gone and shows an error icon in its place, and also won't display directly on other devices, including on the desktop version. Uploading the same image on the same

    • Marking a Desk ticket as Unread after merge

      We have a custom script that runs against every new ticket and auto-merges it with any existing ticket that matches our criteria. That works fine but there is no functionality that reverts the newly-updated ticket back to an "unread" state. I found the

    • Trying to do commission tracking with zoho crm, can i do a Lookup against multiple fields in a module?

      So i'm still designing my zoho one crm as i come over from salesforce. One of the things i'm trying to build is a commission tracking module. At some point i'll probably hire someone to help with custom code, I'm just proof of concepting it. I"m not sure

    • Internal Support and Assigning Tickets

      I want to set up an Internal Desk Support system. Here is what I need... We need our internal "Support" staff to be the Ticket Owner We need to be able to identify who the "Account Manager" is on that client and get emails as part of the ticket. I'd like

    • Filter a Zoho Creator main report by a field and display other related reports in sections on a Zoho Creator page

      Hi, How can I filter a Zoho Creator main report by a field and display other related reports in sections on a Zoho Creator page? Part of what I was given below is setting up sub-reports, but the subform field prompted me to link a form, not a report.

    • FAQs on Approval Process - Post your Questions

      Dear All, Greetings! Approval process allows to validate records and streamline the process across organization to ensure a systematic approach. To resolve your probable queries, we are constantly gathering relevant FAQs and publishing them to address

    • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

      We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

    • Introducing Social Toolkit

      Hi everyone, We're thrilled to launch Social Toolkit, a one-stop dashboard to help take your social media presence to new levels by letting you create aesthetic profiles and share content that your audience will actually enjoy engaging with. Social Toolkit

    • Requesting a file upload in Zoho Workplace not possible?

      I’m new to Zoho Workplace and am mostly liking it. However, it seems as though collecting/requesting documents is not available in the workplace version of WorkDrive. Am I missing something, or would I need to subscribe separately to another WorkDrive

    • Poor Email Delivery

      Our company used Zoho about 2 years ago and always had trouble understanding why a great deal of our emails from Zoho CRM and Zoho Marketing Automation ended up in the recipient's spam folder regardless of the email content and despite having our domain

    • No table view in "All departmens" mode

      Hello, I would like to have an overview of all tickets, so I have to switch to "all departments". But here I don't have the possibility to activate the table view. But this is mandatory, so that I can see certain fields without having to open each ticket

    • Where to Map Candidate fields to Employee fields in Zoho People 5.0

      I can not find options anywhere on Zoho people 5.0 where I can choose how the data fields are mapped from the candidate form to the onboarding form

    • Get Creator Form Record ID and Subform ID's

      Good Afternoon everyone. I have a Creator form with a on success workflow. I'm trying to get the form record ID and the subform record ID(s) but they keep coming up null. There is data in the subform I use it elsewhere. Can anyone help me pull the ID's.

    • WhatsApp and Zoho Creator Integration

      How we have integrate WhatsApp App with Zoho Creator without using external application ?

    • Guidance on Making Zoho Desk Connections Available for All Data Centers

      Hi Team, I’m currently developing an application using Zoho Desk connections to manage OAuth for my third-party products. Could you please advise on the steps required to make it available across all data centers? Looking forward to your thoughts on

    • Can we create Sprint with tasks from Multiple projects?

      Hi Team, We were using Zoho Sprints for quite sometime. Currently we have started the process of Sprint method. We couldnt create the active sprint board with the tasks from multiple projects. I would like to know whether this is possible or Any timeline

    • Ability to use Dynamic goals in Motivator

      Is there any way to create dynamic goals in Zoho Motivator? By "dynamic" I mean: not the same target every period, but varying from period to period. For example, in our organization, sales reps are supposed to target beating the same month's sales last

    • Using Snippets in Comments

      One of our Agents asked about using snippets in comments. We don't see this as an option at this time, only in reply mode. Is there a way to enable this?

    • Calendar - "super compact" week view

      every time i go to my calendar i have to re-engage the "super-compact view" for the week view...is there a way to make "super-compact" a default view so I dont have to keep on setting it manually?

    • zoho calendar week view - "super compact by default"

      every time i go to my calendar i have to re-engage the "super-compact view" for the week view...is there a way to make "super-compact" a default view so I dont have to keep on setting it manually?

    • CRM portal: no Create/Edit options available for custom module

      I'm experimenting with setting up a CRM portal. I'm not able to select Create and Edit permissions for a custom module, even though the data sharing settings for this module has been set to Public Read/Write/Delete. What other settings do I need to enable

    • Which are the IP addresses to use for 'split delivery' with Office 365? (Zoho mail inbound gateway)

      Hi, I'm trying to set up 'split delivery' (email routing) with Office 365. I'm following the instructions to set up Office 365 as the primary server (https://www.zoho.com/mail/help/adminconsole/coexistence-with-office365.html) One of the prerequisites

    • Allow submitter to type a choice in a 'Multiple Choice' field

      Is there any way to allow the person filling out a form to manually type in a choice in the 'Multiple Choice' field? So like have the option of allowing the last field to be 'Other' with an input field...

    • How to Add Portal Users in Zoho Creator's Development Environment for Testing?

      Hello, I’m working on a Creator app with a customer portal and implementing filters based on the logged-in user (customer). To test these filter functions, I'd like to simulate or add customer portal users in the development environment/database. Is there

    • Mapping a custom picklist to another picklist when creating a connected record with a workflow

      Hi, I have some workflows that move records between pipelines, the issue is that when setting up the workflow that creates the connected record, there is no option to map the value from a picklist in one pipeline to another. Please watch: https://www.loom.com/share/4e5fa969b21043748414154c036cdd47?sid=dca0fd16-73f2-4fe6-a9d3-7a4c0c40c2e6

    • Initiate data import using Deluge script

      Is it possible to open the screen to begin the importing of new records using Deluge? So for example, my users would click a button on a form that starts a workflow action. This action would then open the screen to "Import Data for Current User Projects".

    • Whats App Automation

      It would be nice to be able to send out an automated whats app message template on moving stages or creation of a ticket (same as you can do for automated emails). Currently only automated emails can be sent. Also, if whats app could be used more effectively

    • Unable to add organization consultants and contractors in Zoho People

      Hello Team: I am unable to add my few consultants and contractors in Zoho People. How to add these people as Users?

    • Lookup field - Can I avoid using advanced search?

      I have a lookup field in my app that has surpassed 500,000 records, now basic search is disabled and I'm forced to use advanced search. That adds multiple steps to what used to be very simple. Before: Select field > Type last digits of product code and

    • Forced Tooltip on Maps View

      Please remove the forced tool tip data points and ONLY include those listed in the "Include Columns for Tooltip" area. Also, disable the tool tip if no fields in there. With a lat/lng map, it forces showing those (and color field, lat count) and will

    • Last sync date/time as a widget

      Is there any way to get the last date/time that the data shown (reports and dashboard) was last updated. For example, If I have our data being synced every 3 hours and the last was done 2 hrs ago, I would like to show date/time of update OR updated #{hrs}

    • Function #19: Associate invoice templates automatically based on branch

      Much like the custom function we shared last week, today's function also aims to facilitate the automatic association of invoice templates. When you're managing business operations across various branches, there may be a need to create and send invoices

    • how to create view in leads module to that will show all leads + converted leads?

      is it possible to make custom view that combine all leads + converted leads? how to do that

    • Milestone

      New to Zoho and trying to get acquainted. According to PMI a milestone "anticipates what the project is supposed to achieve at a pre-set date. It should describe a desired state of affairs, a desired future situation. There are two important aspects to this. First, the concept refers to a point in time, not a period of time. Second, it looks forward to what we want to create, not how we create it." Why are Zoho milestones defined between two dates and as bins for tasks? Why would you even consider

    • 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,

    • Report to see committed stock vs quantities on order with suppliers

      Hello Zoho Community, I am looking for a report in Zoho Books / Inventory that will show the committed stock from sales orders, and show what quantities of the same part are on order from purchase orders. I have found the committed stock details report,

    • Next Page