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:
- 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
Dynamically catching new file creations
I have a team folder with many subfolders, and in those folders we add new documents all the time. I'd like to have a workflow or script to notify me (and then take other actions) when a file is added anywhere in that structure that ends in "summary.txt".Rotate an Image in Workdrive Image Editor
I don't know if I'm just missing something, but my team needs a way to rotate images in Workdrive and save them at that new orientation. For example one of our ground crew members will take photos of job sites vertically (9:16) on his phone and uploadWorkflow workdrive rollout
Hi! When will workflow be rolled out to all users? Thanks.Creating and managing a Team Folder using WorkDrive TrueSync
Hello everyone, Are you tired of constantly switching between your Desktop TrueSync app and the WorkDrive web app to create and manage Team Folders? We’ve made things easier for you. You can now create and manage Team Folders directly within the TrueSyncEdit images seamlessly with WorkDrive's built-in Image Editor
Are you tired of switching between multiple tools just to make simple edits to your images? We understand the hassle, which is why Zoho WorkDrive now comes with a built-in image editing tool, powered by Zoho Annotator. This tool allows you to edit imagesSupercharge your email workflow with WorkDrive's add-in for Microsoft Outlook
Consider this: You’re handling a critical project, and your inbox is packed with important attachments, email threads, and client communications. The back-and-forth routine of downloading files to your computer, uploading them to WorkDrive, and manuallySecure and promote your content with Custom Watermarking
Imagine this: You’re a professional photographer who regularly shares your work online with potential clients and collaborators. Recently, you notice that some of your images have been reposted without any credit or permission. This not only impacts yourJoin us in Singapore for the Zoho WorkDrive User Group meetup!
Hello, everyone! Exciting news! We'll be hosting an upcoming Zoho WorkDrive user group meetup in the beautiful city of Singapore this November. At this Zoho User Group meetup, we'll guide you through ways to use WorkDrive as a platform and build customWorkDrive TrueSync now supports ARM64-based Windows devices!
We’re excited to announce that the Zoho WorkDrive TrueSync app now fully supports Windows devices with ARM64 architecture! Whether you're working on an ARM-based device or an x64 processor, you can now enjoy the same seamless file synchronization experienceOption to Disable Download for Documents Shared via Permalink
Dear Zoho Writer Team, Currently, when sharing a Writer document using the regular permalink (Collaborators with external users), there is no option to restrict the ability to download the document. While the external share link allows such restrictions,How to Download a File from Zoho WorkDrive Using a Public Link
How to Download a File from Zoho WorkDrive Using a Public Link If you're working with Zoho WorkDrive and want to download a file using a public link, here's a simple method to do so using API or a basic script. This approach helps developers or teamsdomain not verified error
Hi when i try to upload a video from zoho creator widget to zoho work drive iam getting domain not verified error.I don't know what to do .In zoho api console this is my home page url https://creatorapp.zoho.com/ and this is my redirect url:www.google.com.IamLive Webinar: Getting Started with Zoho WorkDrive - A Complete Overview
Hello everyone, We’re excited to invite you to our upcoming live webinar! Discover how to set up your team, bring in your data, and make the most of WorkDrive’s collaboration, organization, AI, and security capabilities. This session is perfect for anyoneCalendly One-way sync- Beta Access
Hello Community, Many of our Zoho Calendar users have expressed their interests in Zoho Calendar and Calendly integration. We've been tightly working on with Calendly team to provide a two-way sync between Calendly and Zoho Calendar. However, there haveThe year that was at Zoho Calendar 2023- Part 2
In continuation with our previous post on all the exciting updates and improvements that have shaped Zoho Calendar over the past 12 months, Lets delve into more: Bring your calendars together- Introducing Zoho Calendar and Outlook calendar synchronisationTip of the week #18: Change the event organizer in Zoho Calendar.
We cannot always be available to conduct an event when we organise one. In these circumstances, you can use Zoho Calendar to change the event organizer at any moment before the event begins. This way, you can avoid cancelling the event while still takingTip of the week #20: Create and manage multiple personal calendars.
Zoho Calendar provides users with the facility to create and manage as many calendars as required. All these calendars can be managed and edited as per user requirements. You can alter the calendar view, make changes to the calendar theme, share the calendarTip of the week #24: Subscribe to the calendars of a Zoho Calendar user.
Calendars that are created by Zoho Calendar users can also be added to your Zoho calendar. All public calendars listed by the users will be available when you enter the email address. You can choose the calendar you need to subscribe to. Once the emailRemoving calendar for zoho email group
How do I make it so that an email group created in Zoho Mail does NOT have a calendar? I have a couple groups for our phone systems voicemails - one for each department. Voicemail recordings are sent to this groups email address so they have access toTip of the week #27: Edit personal calendars in Zoho Calendar.
In Zoho Calendar, the personal calendars you create can be edited to make changes you need to make. Edit a Personal Calendar The following changes can be made to the personal calendar by editing it: Calendar title Calendar color Reminders and DescriptionTip of the week #28: Show/ hide, enable/ disable and empty/ delete your calendars in Zoho Calendar.
The popularity of online calendars has soared in recent years. It's used both for personal and professional reasons. Calendars have evolved into an effective productivity tool in our lives, from creating events for birthdays and anniversaries to schedulingTip of the week #30: Share calendars publicly in Zoho Calendar.
In Zoho Calendar, calendars that are created under My Calendars can be shared publicly. Making your calendar public allows others to view it. When you need to share your calendar with a larger group, public sharing can help. You can restrict others fromTip of the week #31: Share your personal calendars within organization.
Keep your Organization members aware of what's happening. In Zoho Calendar, you can share your personal calendar with all the members in your organization using the Share with org option.When you enable org sharing for a particular personal calendar,Tip of the Week #33: Appointment scheduler in Zoho Calendar.
In Zoho Calendar, you can use the Schedule Appointment option to share your appointment request form with the public, allowing people to fill out the form to request an appointment with you. This form can be embedded on your website or blog. VisitorsTip of the Week #34: Embed Calendars using Zoho Calendar
You can make your calendars public and visible to the general public by embedding them in your websites/blogs using Zoho Calendar. You can use the embed code to add your own calendars to your website's/ blog's HTML code, and the calendar will appear onTip of the week #35: Migrate to Zoho Calendar from Google Calendar.
If you are looking to move your Google Calendar events to Zoho Calendar, never worry about missing out the events from your Google Calendar. You can migrate the events from Google Calendar using the export option and import it to Zoho Calendar and manageTip of the week #36: Migrate to Zoho Calendar from Outlook Calendar.
If you've been using Outlook calendar and looking to migrate to Zoho Calendar, you can seamlessly export your calendars from Outlook and import them into Zoho Calendar without losing any events, participants, and the reminders set for each event. To migrateShared calendar issues and duplications
Apparently there was a calendar update? Now when I schedule an event for a team member that has shared his calendar with me, the event makes me the organizer and adds the event to my calendar as well. Previous to this "update" I would scheduled an eventSubscribed Calendar
Hi i have subscribed to a calendar for Holidays in Canada it shows all the holidays perfectly but every one of them has the word Canada before the rest of the name is there a way to remove that word Canada? It takes up a lot of space in the square onThe year that was at Zoho Calendar 2023- Part 1
Hello, amazing community members! Happy new year from all of us here at Zoho Calendar. As we begin the new year, we'd like to thank each and everyone of our community members for your unwavering support and love that you have shown for Zoho Calendar.Zoho Calendar 2024: A Year in Review
Hello, community members! Happy new year from all of us here at Zoho Calendar. As we turn the page to a new year, we extend our heartfelt gratitude to every member of our Zoho Calendar community for your continued support and enthusiasm. Your feedbackZeptomail API error 500 internal server error
Hi Everyone, getting this eror continuously! Can anyone please guide around the same! Zeptomail API error 500 internal server error Best RegardsWaiting multiple days to buy credits, causing my website to suffer
So I own a fairly large website that gets a lot of registered users. I use transmail send activation emails, and also forgot password emails. I sent an email to zoho's presales team when I was only at 4K/10K emails sent, hoping to buy more credits beforeFollow up
Hello, I sent a message 2 days ago but I don't receive any response and I cannot find my ticket here. this is the ticket: Your ticket has been created with the ticket ID 68925465 and subject "Fwd: Fishing-alert" looking forward to seeing your response.What's new in TransMail!
Note: TransMail is now ZeptoMail. Click here to know more. Hello again, everyone! We've recently crossed the 6 months mark of TransMail's launch. In this time post our launch, we have been constantly working on updating our platform and adding new featuresJune 2021 in TransMail!
Note: TransMail is now ZeptoMail. Click here to know more. Hello again, everyone! Hope you and your loved ones are doing well. If you're doing less than fine, we truly hope that things only get better for you. We've had a few updates in the past monthTransMail has a new name—ZeptoMail!
Tried navigating to TransMail's community forum but see a different name now? That's because TransMail has a new name. TransMail is now ZeptoMail! As we’ve grown from an internal service used mainly by other Zoho products to an up-and-coming competitorJuly 2021 in ZeptoMail!
Note: TransMail is now ZeptoMail. Click here to know more. Hello again, everyone! Hope you and your loved ones are doing well. We've had a few updates in the past month in ZeptoMail—some new features and some important announcements. Take look at whatSend Email From the ZeptoMail BY API
What is Zeptomail:- Transactional email service with reliable and fast delivery How we can Create a Connection for Zeptomail in Zoho CRM Go to the Setup Click on Connection Enter Connection Details:- Generate Consumer Key & Consumer Secret Using ZohoCustomer email on Opencart 3
When I place an order, 2 emails are sent: 1) administrator 2) to the user The administrator receives a beautiful letter, but the user receives a damaged letter (see screenshot). What could be the problem?Next Page