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:
- A connection between Zoho Projects and Zoho Desk.
- An extension configuration process that includes:
A. Creating an extensionB. Configuring the plugin manifestC. 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> <script src="" target="_blank">https://js.zohocdn.com/projects/js/client_sdk.min.js"></script> <script src="" target="_blank">https://code.jquery.com/jquery-1.12.4.min.js"></script> <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" } }; var url = "https://desk.zoho.com/api/v1/articles/search?title=" + subject + "*"; //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
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
Sticky Posts
Building extensions #10: Fetch customized user inputs, store them globally at the app level, and access them across entities
This data storage concept enables you to store data related to your extension for both entity properties and extension properties. In our previous piece, we looked at how to store data for entities using entity properties. In this post, we'll look atBuilding extensions #9: Store, retrieve, and access entity-specific data in widgets using data storage
Data storage - Overview Storing data related to the extension you are working on is essential. It can be saved as key-value pairs for an entity or extension, known as entity and extension properties, respectively. Data can be saved for the following entitiesBuilding 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 ZohoBuilding extensions #6: Custom user interfaces with Widgets
Welcome to our post on Widgets for Zoho Projects! In our last post, we explored the significance of the connections feature, showed how to use it, and provided an example use case. In this article, we'll look at the importance of widgets, another featureBuilding extensions #5: Integrating applications with Zoho Projects through Connections
In our last post, we discussed the essential features that a Zoho Projects extension can provide. Starting with this post andin every subsequent post going forward, we'll go through each of those features in depth, one by one, with an example use case.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Change rate after xxxx kilometers
Is there a way to change the miileage rate after a certain mileage. After 5000 kilometers, we want the rate to automaticly change. Thank !Sync desktop folders instantly with WorkDrive TrueSync (Beta)
Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:Can't attach
I am having problems sending attachments. I am trying to attach some PDFs to an email (as I do several times every day) but the progress bar on the attached file gets stuck somewhere between 20%-70% and when I hit send I get the error message 'AttachmentWhatsApp Channels in Zoho Campaigns
Now that Meta has opened WhatsApp Channels globally, will you add it to Zoho Campaigns? It's another top channel for marketing communications as email and SMS. Thanks.Existing subform data is being changed when new subform entries are added
I'm having trouble with existing subform data being changed when new subform entries are created. I have the following setup to track registrations for a girl scout troop: Main Form: Child Subform: Registrations The data are a one-to-many relationship where each Child record has many Registrations (new Registration will be created for each year the child is in the troop.) Per the instructions, I have created the subfom, added it to the main form, gone back to the subform and created the bi-directionalBigin: filter Contacts by Company fields
Hello, I was wondering if there's a way to filter the contacts based on a field belonging to their company. I.e.: - filter contacts by Company Annual Revenue field - filter contacts by Company Employee No. field In case this is not possibile, what workaroundButton on Deal screen to automate changing deal dates?
Hi I spend a lot of time working with our accounts managers here moving deals around the calendar, qualifying things etc. I'd like to have an easy way to change the closing date on a deal, from the deal screen table, rather than either click in to theAttention API Users: Upcoming Support for Renaming System Fields
Hello all! We are excited to announce an upcoming enhancement in Zoho CRM: support for renaming system-defined fields! Current Behavior Currently, system-defined fields returned by the GET - Fields Metadata API have display_label and field_label propertiesHow to authenticate my domain on ovh
I don't succeed in adding an domain authentification on ovh. Should i first create a subdomain? But this doesn't work either, ti gi ves te same screen and the next button is greyed out when adding the info received from zohoUndelivered Mail Returned to Sender
commerciale@etruriadesign.it, ERROR CODE :550 - "The mail server detected your message as spam and has prevented delivery." I have been corresponding with the receiver and they wrote "Ciao, ho fatto verificare ma purtroppo non è un problema che derivaKaizen #190 - Queries in Custom Related Lists
Hello everyone! Welcome back to another week of Kaizen! This week, we will discuss yet another interesting enhancement to Queries. As you all know, Queries allow you to dynamically retrieve data from CRM as well as third-party services directly withinNotifications no longer being sent to my email address for any scheduled events
The last few weeks, I stopped receiving email notifications to my email for events I have scheduled and have a selected reminder option checked.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 theGroup to shared mailbox conversion
Is it possible to convert a group in Zoho mail to a shared mailbox?Mail Merge Stuck in Queue
I am trying to send Mail Merge's and it never sends out to the full list. It always hits a portion and the rest remain in the "Queue" - the emails I am sending are time sensitive, so I need this to be resolved or have a way to push the emails throughwhy do I get error message each time I open zoho mail
why do I get error message each time I open zoho mailCross-department Parent-Child ticketing for faster and efficient ticket resolution
Hello everyone, Organizations frequently need to have multiple departments set up in their customer service ticketing system. However, when a customer raises an issue or an internal process that requires agents to collaborate with their peers, a lackCan't setup email on outlook (Android Phone)
Dear All Support, I have tried many time to setup this zoho mail over the android phone (outlook app) . But it's always show me to check username/password of my email . But i can login from the webmail , that's why i confuse , How can i able to accessHaving problem with MX records and SPF
Hi there, I have been facing a problem that my zoho mail doesn't receive mail. See Error in below The MX Records of your domain(s) mydomain.com are not pointed to Zoho and you may not receive emails in Zoho SPF entries in your domains DNS are not configuredZOHO Mail App Not working
There seems to be an issue with Zoho Mail App today. It is not connecting to server, internet is working fine, tried uninstalling app and reinstalling, loading circle keeps spinning round. Is there an update on the way?Account with own domain, IMAP vs IMAPPRO
Hi, I have email account with my own domain. I use Em Client email plan and when I use IMAPPRO incoming host, email comes in Em Client only when I restart program. If I use IMAP incoming host everything is ok. Port is 993 both option. Why so? What´s differentAutomatic Display the Price from CPQ
Is it possible to display the discounted price from CPQ that I created for my customer? For example, when the customer selects Product A, instead of showing the default price, it should display the discounted CPQ price.Enhancement - Financial Reports
Hello Everyone, As part of enhancing reports in Zoho Books, we have added an option`Compare With` in Financial reports. Using this, you can compare the current period with Previous Year(s)/Previous Period(s) (Maximum 3 periods). This option is available in the following Financial Reports: * Profit and Loss * Cash Flow Statement * Balance Sheet Please feel free to share your feedback. We are glad to hear from you. Regards, Nithya - Zoho Books Team.Associating Multiple Work Orders with a Single Invoice in Zoho FSM
Hello Everyone, Is it possible to associate multiple Work Orders with a single Invoice in Zoho FSM? Best Regards, Subhash KumarSent emails not going and showing "Processing"
Hello Team, Could you please assist with sent emails showing "processing" and not actually going through? Many thanks and regards, CycologyFree Plan mail accounts details
In the zoho mail pricing there's a free plan that includes: FREE PLAN Up to 25 Users 5GB* /User, 25MB Attachment Limit Webmail access only. Single domain hosting. I need to make sure that I'm able to create multiple email accounts in the form of: name@domain.comSpf cannot verify
Hello, Thank you for your service. I am not able to configure my SPF. I have follow several times your instructions but it does not work. I cannot verify. My domain is ptjpt.co.id Please help meCustom Function : Copy multilookup field to text field
Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2Introducing Global Sets for easy management of similar picklists in CRM
[Update | Sep 2024] We've increased the maximum count limit for global sets. These new limits are now live for AU and JP data centers and will be gradually opened to all. Please check this link for the updated limits. Hello folks, As administrators whoTikTok (and other social platform) Messages and comments of the past
When I link a social channel, Zoho will show in "Inbox", "Messages" and "Contact" sections the interaction done in the past? (comment, messages...)Announcing Zoho Community Developer Bootcamps in India – Extensions
Hey everyone! We're back with another line-up of Zoho Community Developer Bootcamps in India! Following the success of the first leg of bootcamps on Extensions, we're now ready with the second leg. These bootcamps focus on empowering developers of allUnable to send message:mail rate exceeded limit
Hi Admin I just got an email that outgoing has been blocked, I know why is the reason said " Mail rate exceeded limit", but I don't know the rule of Mail rate , so please tell me how to avoid the situation and fix this issue , my email id is morgan@homemesh.com.tw.Error when using fetchById in Client Script
When using client script when creating page (onLoad), I suddenly getting error "Cannot read properties of undefined (reading 'Accounts')" when using: var account_details = ZDK.Apps.CRM.Accounts.fetchById(account_id); I'm getting this error whenever tryingLos correos que envio, llegan como spam (Bandeja de correos no deseados)
Estimados, Buenas tardes, necesito su soporte, los correos que envío desde mi cuenta llegan como spam. (no deseados). ya sea hacia cuentas de hotmail, gmail... etc.. El dominio lo tengo alojado en nic.ar (argentina). Por favor, necesito resolver estoZoho say my domain seems to be already associated with another account
I created a website on zoho and associated my domain (bompescado.com) on it. You can see the A record and CNAME are working to it. Now I need to associate the same domain as webmail, but when I try it return with: " This domain name seems to be already associated with another account. If you own this domain, please contact us for assistance." Im following the advice and conctacting you to say I've not been associated this domain on zoho before. What do I need? Well, I need you manually remove itZoho Mail Not Receiving or Sending Email
My zoho mail is not sending or receiving mail. What's the fix for this?Cannot add new mail client
Hi Guys, I've just got a new laptop and am trying to set up Outlook to connect to my Zoho account. No matter what I do, I cannot connect I'm using IMAP for incoming mail, it's enabled in my account settings, and I'm using the setting shown on the accountZoho Payroll: Product Updates | April 2025
At Zoho Payroll, we’re always working to make every payday feel effortless. And sometimes, that means listening closely to your unique needs. This month, we’ve focused on adding features that give you the flexibility to pay your employees based on yourZoho CRM to Zoho Projects Workflow {"error":{"code":6831,"message":"Input Parameter Missing"}} connecting
void automation.Untitled_Function(String ProjName) { resp = invokeurl [ url :"https://projectsapi.zoho.com/restapi/portals/" type :GET connection:"zohoprojects" ]; info "Portal API Response: " + resp; portalId = null; if(resp != null) { if (resp.containsKey("portals"))Zoho mail Virus Scan Virus Detected (but I checked it with VirusTotal)
Dear all, since this morning we can;t send any attachments out. Zoho says there is a virus in it, but clearly there is not when I checked the file on VirusTotal.com. Please help us out!Next Page