Building 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 feature available in Zoho Projects.
Importance of widgets
Widgets are graphical user interface components that enable you to customize the user interface to provide users with easy data access and the flexibility to perform data operations. Zoho Projects offers widget support in multiple locations to enable users to further customize the UI in the location that most suits their needs.
When and where can widgets be used?
Widgets can be used for multiple purposes, some of which include:
➤ Collect and organize data from multiple sources before presenting it to the end user in a customized style.➤ Display data to end users to allow them to make an input decision, then use that input data to carry out business processes.
You can also load and utilize widgets in multiple locations in Zoho Projects based on your business needs.
Configuring widgets in plugin-manifest.json
To include a widget in an extension, it must be configured in the plugin-manifest.json file. As we explained in an earlier post, the plugin-manifest.json file includes a sample widget named "Projects Extension" in the task details tab by default.
However, as part of an extension, you can add multiple widgets at various locations. In order to include a widget, you need to provide values for the below three keys:
- name - The name of the widget.
- location - The location in which the widget must be loaded. You may find the value to be used for each specific place in the widget locations document.
- url - The path to the HTML file containing the widget UI that must be rendered.
Depending on the functionality of your extension, you can configure as many widgets as you want in your plugin-manifest.json in this manner.
Support for Widgets in Zoho Projects - JS SDKs
Zoho Projects offers JS SDKs that allow widget code to interact with the extension. In order for the javascript widget code to communicate with the extension, Zoho Projects provides JS SDKs support for multiple functionality. Some example functionalities include:
- Initializing the extension
- Fetching current user details
- Getting details of portal, task, and much more
- Setting details for tasks, issues, projects, and so on
- Invoking connections inside the extension
Prerequisite for using the JS SDKs
- In order to use the JS SDK methods as part of the extension, the following CDN URL must be included in the javascript widget code: https://js.zohocdn.com/projects/js/client_sdk.min.js
- If you want to use the Zoho Projects style, include the following link in your code: https://css.zohocdn.com/projects/styles/zps-extn/client_sdk.css
Note: It is important to invoke the init method in order to initialize the extension and utilize the other JS SDKs. All other JS SDK methods can be used only once the init method is invoked.
A few use case examples
- Streamlining Zoho Projects developers' work by displaying Zoho Desk articles related to the task's subject as a tab on the task details page. This allows them to find any existing references related to the task at hand that they can refer to and get a head start on the work.
- Managing your Zoho CRM open cases from within Zoho Projects to efficiently track and prioritize the cases based on their status.
- Uploading and associating files with ease to a third-party file management service, such as Sharepoint or Dropbox, right from Zoho Projects. Similarly, having access to and managing third-party files within the Zoho Projects module of your choice. These synchronized data exchanges between applications help you stay organized and save time.
- Managing your company's expenses and project budgets by collaborating with Zoho Books to allocate funds and generate invoices for each project. As a result, you can easily create estimates, invoices, and deliver the generated bills to the project client while maintaining all of your finances in one place.
These are just some of the examples of what widgets can be used for. Widgets provide you more control and flexibility over the UI design and help in simplifying the user experience.
We hope you found this information useful. Keep following this space as we will explore more such sample business solutions along with their implementation in our upcoming posts!
SEE ALSO:
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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
Is it possible to set a region lookup table so that my deal country can lookup this lookup table
Hi there, I would like to be able to add a data lookup table with the following fields: Country, Region. And then in my deal report, i can then lookup this table to fish out the region in my report. This will be important for my sales process to categoriseTest Emails Show Sent "via zcsend.net" in My Gmail Account
I noticed the following info... However, a few email service providers such as Outlook and Gmail will display that the email was sent by zcsend.net (Zoho campaigns’ server) on your behalf instead of just your from email address. In order to prevent this, you can go for either of these options: Do not select the check box meant for DomainKey Signature which is listed under Unverified sender domains. Include our mail servers by advanced authentication method such as SPF/ Sender ID and DomainKey/ DKIM.'UnAuthenticated Connection: zbooks_connection'
I have a zoho connection in Zoho Books, the link name es zbooks_connection, but I like to validate if exist, by example if I use this line in my code: response=zoho.books.getTemplates("", "","zbooks_connection"); But I don't have the connection I likeCalling the new 'Custom API' feature from within a Custom Widget
From what I've learned it is not possible to call an endpoint from the new "Custom API" feature within a Creator Widget. The SDK's doesn't support it yet, when calling it natively you end up with CORS issues or at least I couldn't get it working evenCannot post to Instagram. I get the error: Insufficient permission to publish on this page. Check with your page Admin to update permissions.
We had another admin that left the company. Since he left, we get this error when posting to Instagram.Zoho desk desktop application
does zoho desk has a destop applicaion?Ability to re-order Workflow Rules
We really need the ability to re-order workflow rules within departments. Either the ability to drag/drop them into a different order or something.Create an article template
I have a question concern the Knolwedge Database from Zoho Desk. There is any possibility to create an article template ? Exemple of what I research : TODAY : I want to create a lot af articles with the same baseline > I create one article > I copy/pasteChange of Blog Author
Hi, I am creating the blog post on behalf of my colleague. When I publish the post, it is showing my name as author of the post which is not intended and needs to be changed to my colleague's name. How can I change the name of the author in the blogs?? Thanks, RamananZoho FSM API Delete Record
Hi FSM Team, It would be great if you could delete a record via API. Thank you,Instant Messaging Update | Now migrate your WhatsApp Business phonenumber from another BSP to Zoho Desk | Dec'23
Hi All, Everything seems to move at lightning speed these days, and time is certainly flying by for the IM team. But we are delighted at how much ground we covered this year. 🚀 For one, we enabled WhatsApp business phone number migration so that youUpload ticket attachments via Drag-&-Drop
Hello, if you want to upload a file to the ticket attachment you need to click the button and use the file browser to select and upload the desired file. In many cases, it would be much more efficient if you could simply drag the file to the browser window...Can we disable add to cart in Zoho Commerce?
Hello, Our sales happen on the phone. During the call the customer is directed to our website to inspect the products together with the sales rep. So we need a way to present our inventory. I figured Zoho Commerce is a good fit for this use case. HoweverIntroducing WhatsApp integration in Bigin
Greetings! In today's business landscape, messaging apps play a significant role in customer operations. Customers can engage with businesses, seek support, ask questions, receive personalized recommendations, read reviews, and even make purchases—allZoho One account closure vs deactivation
I wonder what are the best practices and guidelines around deactivating vs deleting Zoho accounts in organisations? Any practical considerations?Schedule Zoho CRM reports only on Business Days
Hello, Is it possible to schedule reports only on business days ? We currently get daily sales reports on weekend which has no value since the sales team doesn't work on weekends. ThanksHow to track a contact or customer's past product purchases in Bigin Premiere?
Hello there. I am the sole user of Bigin for a small company (chess club), and would like to track current and past purchases made by a contact (player) or company (family which includes the player). Players may register for multiple tournaments, takeLENTITUD EN RECIBIR MAIL
Buenas tardes, Estamos experimentando lentitud en la recepción de correos electrónicos.Deactivated Zoho One account can sign in
I am concerned by the fact that deactivated users in Zoho One have the ability to sign in even after their account has been deactivated (not deleted). these inactive identities have no access to individual Zoho apps or data. based on my experience theyItems should display under specific warehouse
I have configured the multi warehouse but it show all the items under all warehouse which is not correct according to our business logic, so i want that items should only display under that specific warehouse not under all the warehouses not even with zero quantity. Some items should be common but not all so is there any option for that purpose so i can specific the items to its warehouse. RegardsPartial refunds
I am trying to process refund for a one item invoice, however the refund is partial: i am getting this error while creating credit note, can anyone share some wisdom about thisBest practice importing items and matching assemblies
Hi, I was wondering what would be the best practice to import items and composite items (assemblies) From my backup, what should I import first? The items or the composite items? I am on Zoho one, using inventory and books. Kind regards, SabineBulk Fill In & Edit PO/Bill/SO/Invoice
Hello, I am adding stock in bulk on a PO, the system is automatically populating the Rate (price) and Tax from the item data. Problem is that the bill rate is different from the rate on the item data, so I have to manually erase each and enter the price.Items Below Reorder Point Report?
Is there a way to run a report of Items that are below the Reorder Point? I don't see this as a specific report, nor can I figure out how to customize any of the other stock reports to give me this information. Please tell me I'm missing something sCancelled Transfer order problem
Hello, We've canceled a transfer order, and we can't add the related items to a new Transfer Order. The system tells us that the bin doesn't have the required quantity, but when we check the item, it indicates that there are 2 units in the bin. It alsoCreating a Chart from a Report
In Zoho Analytics, is it possible to create a chart from a Pivot View report? We are looking to use Zoho Analytics to replace Excel for Sales reports and would like to be able to show both the table and the chart together.Email Insights included in Bigin emals are marked as SPAM everywhere
Today I noticed that email recipients who use Office 365 never receive emails sent from Bigin. Further examination showed that all Email Insights links in email headers are marked as spam/phishing by Office 365. Example screen included. The problem isData Import | Zoho Analytics Custom Query Window Size
Please increase the window size for the Custom Query Data Import. It's impossible to work with such a small query window.Name changed in settings for mailbox but still not changed when typed in To field
In the email account secretary@ i have updaetd the new staff members details but the old members name still appears when I type secretary@ in the To field. I cant work out where Zoho is finding the old name from. I have deleted the browser cache. If ICannot add my name to my domain name
I want to have My name@mydomain.com and it says my name is linked to another account already. Please fix it since I do not have another account.Establishing new Zoho email account on laptop
Good Morning: I am very long time Outlook business user and decided to try your email service last night and had established an account. I am trying to verify my account; how do I establish my Zoho email account on my laptop? I opened the account withunable to send message reason 550 5.4.6 unusual sending activity
My email account can't send message. It shows unable to send message reason 550 5.4.6 unusual sending activity detectedhow to add email to existing organization i w
I am already registered my organization and i have an email id. I need one more email id but i can't find anywhere .i want the cheapest email id . how to add ?e-mail bloqueado
Estou com meu e-mail lucas@peplus.me bloqueado, preciso desbloquear para retorno de usos em minhas atividades.zoho labels api not working
We're using n8n to automte email reply using zoho api. I'm facing issue with label api. I added the required scopes but its not working. i followed zoho api documentation but didn't work. also, where do i find/how do i create zoho oauth token mentioneeedDesk DMARC forwarding failure for some senders
I am not receiving important emails into Desk, because of DMARC errors. Here's what's happening: 1. email is sent from customer e.g. john@doe.com, to my email address, e.g info@acme.com 2. email is delivered successfully to info@acme.com (a shared inboxStreams/Shared email doesn't show up in windows trident app. It works fine on MAC. Is there any difference between 2 install ?
I can see streams/share email boxs on my MAC version of trident app but i can't see them in windows version of trident app. Is there any difference between 2 install? I try to find setting but not able to see any setting to add stream/share email boxes.add zoho account
How to add a zoho mail to previous zoho account? I have twoZoho Desk Mobile App Year-End Roundup - 2025
Dear Zoho Desk users, Greetings! As you gear up for the festive season, we are excited to share a quick journey into all that is released in 2025! Zia's generative AI capabilities Zia insights can be highly beneficial in helping agents manage daily supportNarrative 17: The role of Zia AI in customer support
Behind the scenes of a successful ticketing system: BTS Series Narrative 17: The role of Zia AI in customer support Overview Zia in Zoho Desk is a layered AI assistant that combines generative AI, prediction, and automation to support agents, automateNext Page