Building extensions #7: Create custom widgets for a simplified end-user experience

Building extensions #7: Create custom widgets for a simplified end-user experience

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

    • Related Module in Sharing Rules

      Zoho CRM team recently added the feature to filter records by Related Records It will be really beneficial if we can have this feature for Sharing Rules as well

    • Assignment Thresholds Resetting After Lead Conversion

      Hello everyone, We're facing an issue with Zoho CRM's lead assignment thresholds that makes them unsuitable for our workflow. I'm hoping to find a potential workaround or solution from the community. Here’s our current process: A new lead is created automatically

    • Territory view for custom modules?

      I have recently activated territories however I can't seem to find how to use territories for custom modules? These modules have territories:  Contacts /  Accounts / Opportunities These modules don't have territories:   Buildings (custom module) and 

    • Approval Process Comments

      Is it possible to view the comments entered during the approval or rejection of a record in the approval process? If not, is there a way to require a field to be completed upon approval or rejection?

    • Login for test case

      Had a few questions regarding authentication test cases and couldn't find an answer in the the docs. 1. If an app like Zoho Creator requires authentication before providing access, do I need to create a login function and add it to each test case? 2.

    • Zoho / Outlook Calendar sync

      The current Marketplace -> Microsoft -> Meetings integration needs 2 changes. 1. The current language for the Two-Way sync option should be changed. It currently states, "Sync both your Zoho CRM Calendar and Office 365 Calendar meetings with each other."

    • Customer members area

      Does FSM support a customer members area? If not what do you propose we use if we want the data used in FSM for customers to give them an area / login to see past orders, create new orders and general announcements.

    • Notes created in mobile can no longer be accessed in desktop

      Working with a 2013 Mac running OS 10.14.6; Desktop Notebook version 4.5.3. Using Motorola Moto G Power 5G - 2024; Android app version 6.7 I have been using Notebook for some years. Starting several weeks ago, the notes newly created ion the phone can

    • Function #49: Manage varying installment payments using Zoho Books

      . Hello everyone, and welcome back to our series! Last week, we discussed automating the collection of fixed installment payments in Zoho Books. But what if your payment structure involves charging varying percentages of the invoice total as installments?

    • Is it possible for contacts to "Re-enter" a workflow in Zoho Campaign?

      We are currently working on a way to automatically add users to from one list to other lists based on specific criteria, but can't seem to find a native way of doing this so we are trying to use Workflows to do this. So, for example, if a user's status is set to "Active," then they should be added to the list "Active Users." If the same user's status is then set to "Paused," they should be added to the list "Paused Users" and removed from the list "Active Users." This works fine for the first go

    • Bulk upload images and specifications to products

      Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.

    • Out of Office for Just One of My Alias Email

      Can I set up the Out of Office Reply for Just One of my Alias Email Addresses?

    • Can I map multiple Surveys into the CRM using the same fields?

      Hello, We are a healthcare practice that offers two distinct services (Nutrition and Primary Care). We use Zoho Survey for our lead generation form (Get Started Survey), which allows people to express interest in one of the two services and even allows

    • Dealing with API responses where integers have more than 16 digits

      Hi there How do I deal with an api response contaning an int or float with more than 16 digits (before any decimal places for a float). I constantly receive the response "Unable to cast the 'BigInteger' value into a 'BIGINT' value because the input is

    • unblock e-mail

      please unblock my e-mails info@meatnews.gr and myrtokaterini@meatnews.gr

    • Add Zoho Mail for users who do not need Zoho One

      We have licenses for ZOho One for teams that need to use the suite of products that Zoho One offers.  We have 8 more people who only need email access and we would like to add just a Zoho Mail.  They do not need the Zoho One license.  We are currently

    • ZML vs HTML Snippet - which is better?

      Are there certain use cases where one is better than the other?

    • Auto CheckOut Based On Shift.

      This Deluge script runs on a scheduled basis to automatically set the 'Actual_Check_Out' time for employees who haven't manually checked out. If the current time is past their scheduled 'Shift_End_Time', the script updates the check-out time to match

    • Infinite loop of account verification

      Hi I can't do anything on my zoho account.  I always get this message Hi Sheriffo Ceesay As a security measure, you need to link your phone number with this account and verify it to proceed further. When ever I supply the details, it displays that the number is associated with another account. I don't have any other account on zoho so this is really annoying. 

    • Load PO_Date field (Purchase Order) with current date in Deluge

      Hi, I'm not a full time developer, just helping to customize our CRM, in the small company I work for. There must be something wrong with me, because I can't do something so simple as complete a field with the current date in a function using Deluge.

    • Zoho CRM in Microsoft Power Automate Custom Connector

      Hi everyone, I’m building a Power Automate flow that integrates Microsoft Bookings with Zoho CRM. The goal is to automatically create a meeting (event) in Zoho CRM whenever a new appointment is booked via Microsoft Bookings. To achieve this, I created

    • Spell check sucks

      Come on guys, it's 2024 and your spell check is completely retarded. You gotta fix it.

    • Zoho One Login Issue - Unable to receive OTP

      Hi Support Team, I am experiencing a unique login issue with Zoho One. I am attempting to log in from India using Zoho Login credentials provided by a USA-based client. Their Zoho account is hosted on a US data center. After entering the username and

    • In the Zoho Creator Customer Payment form i Have customer field on select of the field Data want to fetch from the invoice from based on the customer name In the Customer Payment form i Have subf

      In the Zoho Creator Customer Payment form i Have customer field on select of the field Data want to fetch from the invoice from based on the customer name In the Customer Payment form i Have subform update Invoice , there i have date field,Invoice number

    • Problem of Import Client Users From CRM and or Expense

      I am premium plan user on Projects. I have about 500 customers on Expense and CRM that integrated with each other. According to at below link, I am trying to import clients from CRM, system not allowed to select any customer. If I import from Expense,

    • equest to Disassociate Bigin from Zoho One and Migrate to Standalone (Upgrade to Bigin Premier – 3 Seats, Annual)

      Dear Zoho One Support Team, I’m writing to request your assistance to disassociate (remove) the Bigin application from our Zoho One organization while preserving all existing Bigin data. After the disconnection is successfully completed, we intend to

    • billing

      hi, I am being billed $12/year, and I can't remember why. My User ID is 691273115 Thanks for your help, --Kitty Pearl

    • Unable to enable tax checkboxes

      Hi Zoho Commerce Support, I'm writing to report an issue I'm having with the tax settings in my Zoho Commerce store. I've created several tax rates under Settings > Taxes, but all of them appear with the checkbox disabled. When I try to enable a checkbox,

    • Zoho Commerce - Enable Company Name and Tax Number collection for B2B orders in Global Edition

      Please enable Company Name and Tax Details option on checkout settings in Zoho Commerce Global Edition. It is still important to collect Company Name and Tax Number for B2B sales in many countries. My business is based in Ireland (in the EU) and I have

    • ZohoSign and ZohoBooks Integration/Workflow

      Hello All, We utilize ZohoSign for signatures on tax eFiles. We utilize Dynamic KBA. Additionally, we use ZohoBooks for invoicing for these services. Is there a way to accomplish the following: Send a copy of the Tax Return, Invoice and eFiles in one

    • Manage monthly tasks with projectsf

      Hi All I run a finance and operations team where we need both teams to complete monthly tasks to ensure we hit our deadlines. Can Zoho projects be used for this. There many finance focused tools but we have Zoho one so want to explore Thanks Will

    • Zoho Suite is very slow

      Since today Zoho is incredibly slow over all applications! What's going on?

    • Combine and hide invoice lines

      In quickbooks we are able to create a invoice line that combines and hides invoices lines below. eg. Brochure design         $1000 (total of lines below, the client can see this line) Graphic Design           $600 (hidden but entered to reporting and

    • Zoho Devops

      We have a Zoho one account which we have integrated with an SAS educational product, sold on a subscription model, using webhooks and API calls. We make some use of custom fields and cross module lookups and relationships. We utilize CRM, Books and billing

    • Fuel up your sales with the Zoho SalesIQ + Bigin integration

      Hi everyone! We’re happy to bring you the all-new Zoho SalesIQ + Bigin integration. With this, every prospect from your website instantly becomes a contact in Bigin, complete with transcripts and follow-up tasks, so you never lose a lead again. Let's

    • Introducing AI-powered Assessments & Zoho's native LLM, Zia

      We’ve shipped a cleaner, faster way to create assessments in Zoho Recruit. 🚀 Instead of manually building question banks or copying old templates, you can now generate ready-to-use assessments in just a few clicks, all tailored to the role you’re hiring

    • Ability to Reset Visitor Fields During an Active Chat Flow

      Hello Zoho SalesIQ Team, We hope you are doing well. We would like to propose a feature enhancement to Zoho SalesIQ regarding the management of visitor fields within Zobot flows. Use Case: Our bot asks the visitor to provide information about a 3rd person

    • External ID in Zoho CRM

      Hello everyone! We know that Zoho CRM allows you to integrate third-party apps and manipulate data through APIs. While you integrate a third-party application, you may want to store the third-party reference IDs in Zoho CRM's records. To meet this need

    • Some emails are not being delivered

      I have this problem where some of my mail just seems to disappear. When I send it, it appears as sent with no mention of any problem, but my recipient never gets it, not even in the Spam folder. Same for receiving, I have a secondary e-mail address, and

    • New in Zoho Chat : Search for contacts, files, links & conversations with the all new powerful 'Smart Search' bar.

      With the newly revamped 'Smart Search' bar in Zoho Chat, we have made your search for contacts, chats, files and links super quick and easy using Search Quantifiers.   Search for a contact or specific conversations using quantifiers, such as, from: @user_name - to find chats or channel conversations received from a specific user. to: @user_name - to find chats or channel conversations sent to a specific user. in: #channel_name - to find a particular instance in a channel. in: #chat_name - to find

    • Next Page