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


    Zoho Desk Resources

    • Desk Community Learning Series


    • Digest


    • Functions


    • Meetups


    • Kbase


    • Resources


    • Glossary


    • Desk Marketplace


    • MVP Corner


    • Word of the Day


      Zoho CRM Plus Resources

        Zoho Books Resources


          Zoho Subscriptions Resources

            Zoho Projects Resources


              Zoho Sprints Resources


                Zoho Orchestly Resources


                  Zoho Creator Resources


                    Zoho WorkDrive Resources



                      Zoho Campaigns Resources

                        Zoho CRM Resources

                        • CRM Community Learning Series

                          CRM Community Learning Series


                        • Tips

                          Tips

                        • Functions

                          Functions

                        • Meetups

                          Meetups

                        • Kbase

                          Kbase

                        • Resources

                          Resources

                        • Digest

                          Digest

                        • CRM Marketplace

                          CRM Marketplace

                        • MVP Corner

                          MVP Corner




                          Zoho Writer Writer

                          Get Started. Write Away!

                          Writer is a powerful online word processor, designed for collaborative work.

                            Zoho CRM コンテンツ






                              ご検討中の方

                                • Recent Topics

                                • Multiple date selection

                                  Hello, we want create app for our company. We need create tasks for our employers. For example - 1 employer have task every Friday the whole year. Second have task every Monday for 6 months. For simple way create Multiple date selection in date form
                                • Last payroll of the year gives me an error

                                  Trying to run the last payroll of the year. The payment doesn't get to the employee until 1/1/25, which is correct. However when I try to process it I get the following error: Tax calculation is not supported for the year 2025. Please change the Pay date.
                                • Partner with HDFC And Sbi Bank.

                                  Hdfc and sbi both are very popular bank if zoho books become partner with this banks then many of the zoho books users will benefit premium features of partnered banks.
                                • Set organization level access to Knowledge Base and manage duplicate article permalinks (with date appended to them)

                                  Hello everyone, We have introduced two important updates in the Knowledge Base module: Permissions - A new permission called "Admin access" has been introduced under module permission. Permalink alert - Users will be alerted when an article with the same
                                • Language Field on Contact Person-level

                                  Dear at Zoho Books, would it be possible for you to have a Field for 'Language' for the Contact Persons under a Company. In CRM and Bigin we could create a Custom Field (Dropdown) for this effect but without any present in Zoho Books we could never sync
                                • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

                                  I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the
                                • How to Implement Time-Based Filters in Zoho Workflows?

                                  Hi everyone, I’m looking for a workaround to implement time-based filters in Zoho workflows. Specifically, I need a workflow to trigger only within certain hours (e.g., between 10:00 AM and 8:00 PM, Sunday to Friday). Currently, Zoho workflows execute
                                • Zoho Books email notifications

                                  Hi, We are currently implementing Zoho books for our organisation. I have 2 questions. 1. Are we able to embed HTML into our emails to make them look as part of our business ? Branding is very big issue for us and i would like to make sure that all branding efforts are carried across into the notification emails.. 2. Is there a way to preview the notifications that are sent out to our customers so we can make sure the look and feel is as we require ? thanks
                                • Multiple templates (Settings > Email templates)

                                  Hi Zoho, We would like to have more options to select a template when sending an email in Zohosign. Currently we can only add 1 template per option: Is this possible? Kind regards, Tristan
                                • Add an action to set agent as a member of a team in zoho desk

                                  Hi, Please add an action to zoho flow to set agent as a member of a team in zoho desk (add to a team or remove from a team). Regards, Ram
                                • Zoho email setup in office365

                                  When i am trying to setup zoho mail setup using my domain in office365 and it is not working and it says that we couldn't log on to the incoming (IMAP) server and please check your email address and password and try again. I was able to login using my
                                • Plug Samples #12: Verify Customer Mobile Numbers with OTP to Avoid Spam Entries

                                  Hi Everyone! Verifying customer information is critical in business to filter out junk data and spammers. Whether it’s lead generation, appointment booking, or any other operation, ensuring quality data is essential for driving meaningful outcomes. A
                                • All notes disappeared

                                  I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,
                                • I need help in setting up a script that works for my calling service

                                  Please i need your guidance and expertise in how to go about a particular scripting. You see, we are a call service that assists companies to receive calls for them, i need to create a system in my Zoho CRM whereby i will receive call from my already
                                • Cost Center accounting

                                  Hello all. We are looking at switching from MYOB to Zoho books. Love all the features in books - esp. CRM integration, but the big gap for us is the lack of cost-center accounting feature. Are there firm plans to develop this feature in Zoho Books? If
                                • Impuesto automatico en cotizaciones

                                  Buen dia Mi pregunta es como se puede poner alguna operacion para que las cotizaciones me salgan automaticamente con impuestos ya que uno al cargarla al final tienen que añadir el porcentaje de impuesto Saludos
                                • Formatting of Gantt Chart for PDF export

                                  Hi all, There really needs to be some improvements to the presentation of exported PDF Gantt Charts. An exported format is the way that most people on a project (other than the PM directly) will consume this data. The current PDF export options are lacking a lot of control. - I'd like to firstly have control over the export size of the PDFs (A4, A3 etc), Currently it seems arbitrary - very large aspect ratio print sizes. - Next i'd like to be able to specify the print date range, and scale (show
                                • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

                                  Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of
                                • タスクを問い合わせテンプレートに追加

                                  タスクを問い合わせテンプレートに自動で追加されるようにしたいです。どうしたらいいですか
                                • Placeholder for Agent Signature in Email Templates

                                  Dear Zoho Team, I hope this message finds you well. We currently face a limitation when designing email templates in Zoho Desk. While we can create email templates and include a footer at the end, the agent signature is always appended by default at the
                                • Custom Profile Agents Unable to Update Mandatory Phone Number in tickets under Zoho Desk

                                  Hi, While working in the Ticket module in Zoho Desk, agents with a custom profile are unable to update the Phone Number field (which is mandatory) under Account Information. The agents need to enter values such as "NA" or "Nil" in the field to close the
                                • Response Violation - Zoho Desk

                                  Hi Team, I just need an information regarding the zoho desk - Response Violation and how can we avoid the tickets from getting the tickets response violated.
                                • How to Replace an Assessment in a Job Opening on Zoho Recruit

                                  Hi everyone, I’m currently using Zoho Recruit and would like to replace the assessment linked to a specific job opening. I want to remove the existing assessment and add a new one. What is the best way to do this without losing any important data or affecting
                                • Updating existing values in a list

                                  Is it possible to update an existing value in a list? For example if I wanted to append text to an existing string value that I had previously added to a list is that possible? I'm able to extract the existing value (get() function) and append the additional text, but can't find a way to add the new value back to the list in the same index location. One work around I found was to delete the existing list entry and then add the new value, however this changes the index location to the last entry in
                                • Host not reachable

                                  Good morning. I have four mail accounts and they have been working well for years. Now, suddenly, I am unable to send any e-mails from any of them. I allways have this pop-up: Thank you. Regards. Luis Fernández
                                • BIN Locations

                                  Hi, I’m new to Zoho inventory and unless Im missing something, I cannot find BIN locations anywhere in ‘items’? please tell me it’s there somewhere?!? Thanks
                                • Zoho Marketing Campaign

                                  I want a details report of marketing API . which API i can use to get a full flexed detail of email campaign , sms , social media ,and all other campaigns ?
                                • Zoho Marketing Automation APIs

                                  When I want to create New lead in marketing automation , I want to add First Name and Last Name as well along with Email but there is no option like this in API . Can you please give me the API which will fulfill my condition ?
                                • Adding Folders in Android App

                                  Is it possible to create a new email folder within the Zoho Mail Android app?  Or can this only be done from the desktop version of Zoho Mail? Cheers!
                                • Collaborative editing of spreadsheets by multiple users simultaneously - Is it really possible?

                                  I work in a SharePoint 2010/SharePoint Server 2010 environment and we use MS Office 2007(Excel 2007) . I have been trying to create a MS Office document which will allow multiple users to work on a spreadsheet simultaneously. For that I have: 1) Created a excel workbook and published as a workspace as suggested by Andrea Kalli in her link: http://www.wonderhowto.com/how-to-collaborate-files-between-sharepoint-and-office-2007-182172/ 2) Set up and saved the Excel Workbook as "Shared" and made it available
                                • Ability for customer to give feedback after receipt of an order

                                  Is there any way we can receive feedback from customers regarding their order after delivery (other than just an email, obviuosly)? This is not the same as product reviews, as it may concern other points, but would ideally have an inbuilt reference to
                                • Issue with EU MArketplace

                                  Hi It's super frustrating that many CRM / Zoho (whatever) extensions are not available in the EU Market place Example: https://marketplace.zoho.com/app/crm/time-tracker-extension-for-zoho-crm For now, can the team address the extension above, but on the
                                • Conversion of functions from Google Spreadsheets

                                  Hello! I use this formula "=QUERY(ResumoOrdemVencimento!A3:O38;"SELECT A,B,C,D,E,F,G,H,I,J,K,L,M,N,O WHERE C != '' ORDER BY C,G")" in Google Sheets but when importing my spreadsheet into Zoho Sheets the formula was not converted. The QUERY function brings data from another spreadsheet, and then I sort and apply conditional formatting. The order of data will change automatically as I update the source spreadsheet. What Zoho Sheets function is equivalent to QUERY? I have some other spreadsheets to
                                • Zoho Books Sandbox environment

                                  Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a
                                • Zoho Books | Product Updates | November 2024

                                  Hello users, We are back with exciting new features and enhancements in Zoho Books. From multi-criteria workflows to writing off customer opening balances, discover the new updates designed to make your bookkeeping swift. Attach XRechnung to Invoices
                                • Spell check sucks

                                  Come on guys, it's 2024 and your spell check is completely retarded. You gotta fix it.
                                • Signature image logo not displaying in recipient mail clients

                                  Whenever I send an email to another person the image that forms part of my logo is not displayed just a broken link to: https://mail.zoho.com/mail/ImageSignature?fileName=Email-log.jpg&accountId=47238000000007001&storeName=NN1:-3205531763309921492 I can see the logo because I've got a zoho account and I'm logged on but others without a zoho account can't see it. How do I fix this? Thanks -Martin
                                • Sales Order, what are the statuses under Confirmed and Closed

                                  Hi, I have to build a workflow in Deluge which should be triggered when Sales Order status is Confirmed or Closed. But these 2 states don't exist when you fetch a sales order. Which of the statuses are considered as Confirmed or Closed ? Here is a list
                                • Notifications for calendar meetings

                                  So we have been happy users for a few months now. This is an important problem we face, since I have forgotten meetings already cause of lack of notifications. The problem: I have notifications (email, popup and notifications) set for my calendar by default.
                                • attributed automatically database section

                                  Hello everyone and happy holidays... here in zoho CRM, I created 3 bases: - Properties (House, apartment ...) - Transactions (Notaries, ...) - Real estate ads I want when the address is identical on these three bases, that in "Properties" the transactions
                                • Next Page