Title: Custom user interfaces with Widgets | Community | Zoho Projects
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
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 DataPrep 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
Introducing Zia LLM: Zoho’s in-house Generative AI solution for CRM's AI capabilities
Hello everyone, We're excited to announce the launch of our in-house Large Language Model (LLM) by Zia to power our AI offerings. What is LLM? LLM stands for Large Language Model, a powerful AI technology that processes and generates human-like text basedAssistance with Setting Default Values for Zoho Chat Custom Fields
I am currently using the Zoho Chat JavaScript API to successfully add custom fields to the chat interface. While the implementation of these fields has been smooth, I am now looking to set default values for these custom fields. However, I couldn't findZoho Advanced Session audit is hogging RAM
Hi! I've been noticing an issue with Zoho Unattended where it occasionally takes up a lot of the RAM on our computers. It's causing issues for me on PCs that are alreayd low on RAM. Does Advanced Audit have to be disabled for our entire organization toRound-Robin with Load Based Assignment, can you limit which Status are considered?
Hello, We are currently using Round-Robin with Load Base Assignment. Is there a way to exclude tickets of a certain Status from being considered by the Round-Robin Assignment rules? For example... I have the following statuses. Escalation Review (meaningUnable to delete Junk Lead and Not Qualified from the Lead Status field
Are Junk Lead and Not Qualified default fields or something that cannot be deleted? I have gone into the Leads module and made sure there are no records using these values. Other values have a minus sign that allows me to remove them, but these two fields do not have that option.Modules are continuously loading
Hi! We are not able to open the task modules, it keeps continuously loadingCustomer Happiness not clickable when using API
Is there a way to automatically add the Customer Feedback links when generating email drafts via the API? Currently, the feedback links are only added when generating an email draft using the UI. I tried using the endpoint described in https://desk.zoho.com/DeskAPIDocument#CustomerFeedback#CustomerFeedback_GetthecustomerfeedbackplaceholderlinkEmmanuel Katto : Zoho Meetings Outlook Plugin Authentication Issue - Help Needed
Hi everyone, I'm Emmanuel Katto, We’ve been facing an issue with the Zoho Meetings Outlook plugin for the last couple of weeks. When we try to sign in via the plugin, it redirects to the authentication page, and after successfully authenticating, it showsTransitioning FESCO Bill Project to Zoho Sheets and Integration Options
Hello Zoho Support, I'm considering transitioning my FESCO bill project from Google Sheets to Zoho Sheets and wanted to know if there are integration options to seamlessly migrate our existing work. You can view our platform here, any guidance would beEmail Alerts for New Audit Log Entries in Zoho Desk
Dear Zoho Desk Team, The Audit Log feature in Zoho Desk is a fantastic tool for tracking changes and ensuring transparency in the helpdesk. However, to make this tool even more effective, I’d like to request an enhancement. Currently, there is no optionZoho Desk Validation Rule Using Custom Function
Hi all, I tried to find the way to validate fields using custom function just like in Zoho CRM but to no avail. Is there a way to do this?Create custom rollup summary fields in Zoho CRM
Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions wereFree user licenses across all Portal user types
Greetings everyone, We're here with some exciting and extensive changes to the availability of free user licenses in CRM Portals. This update provides users with access to all Portal user types for free to help them diversify their user licenses and exploreHow to easy change layout in existing records in Deals?
Hello, So far i have used only 1 layout in Deals. I have about 1000 records. Now i want to make new layout. So i have 2 layouts: Layout Old (1000 records) Layout New (0 records) How to easy change layout from Layout Old into Layout New for existing records?Rollup summary for custom module
Rollup summary feature was introduced almost a year ago: https://help.zoho.com/portal/en/community/topic/introducing-rollup-summary-in-zoho-crm-public-early-access-2023 It does not support custom modules tough and this post aims to track such featureWhat is the Desk API?
I'm trying to fetch a lookup field data from desk to our creator application and it doesn't work. I'm guessing that my search parameter is wrong? On my trial function fetch if I use these: tickets = invokeurl [ url :"https://desk.zoho.com/api/v1/tickets/351081000145244764"Changing Color Theme of Guided Conversations
Hello, We have recently added Guided Conversations to one of our websites, but I am wondering if there is a way to customize the color scheme so it matches the appearance of the website? Thank you in advance!Length of Call
Whenever we place a call from the CRM and we click to log it, the duration / length is not automatically populated. Can you set this up to occur? Thanks!Tip #10: Automatically add tags to Zoho CRM records using form responses
You may be using tags to filter records, create reports based on specific tags, or let your sales team to know which clients to give priority to. Don't skip tagging for the crm records added via forms. The tags can be set to be automatically captured during the form submission. How it works When you set up a configuration to push form entries into CRM, you can add a tag to them automatically. The tag value can vary based on the respondent's input (captured using form fields), or you can include aCRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive
Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage filesINVALID_OAUTHTOKEN using Self Client Access Token (Android)
Hi, I using the Zoho Android Demo app to try to evaluate Zoho Assist. https://github.com/zoho/Assist-Customer-Android-SDK-Demo I am successfully able to get an access token by POSTing the generated code from Self Client via POSTMAN. scope = ZohoAssist.sessionapi.ALLUsing AVG in SQL Query
My current SQL Query is: SELECT "Client Info", avg("Revenue") FROM "Funded Deals" GROUP BY "Client Info" The current table that this is creating: Client Info avg(Revenue) Previous 4175 1st - New 3411 1st - Old 3013 Renew 3069 While this works as I hadPay Contractor Timesheets
I have contractors that fill out a timesheet. Each hour must be assigned to a current client. I need the easiest way to get the contracts paid. They are paid on an hourly bases. How can this be done?OAuth with Bubble.io API Connector does not work although it is working in Postman
Hi, I am new to API programming but have successfully connected Google and Asana with the Bubble.io API connector. Also I have setup Postman and can access Zoho APIs successfully e.g. Projects. Scope used is: ZohoProjects.tasks.CREATE ZohoProjects.tasks.READHow to Parse XML Data Returned by API?
I have several APIs integrated with my CRM and they work great. I am having some trouble though parsing data out of a large string/array in Funtions? I need to be able to pull the DeviceId and the WebSiteDeviceName from each PanelDevice. I would appreciateForeign Currency Bank Account
I have a bank account in USD zero balance but when i run the bank ledger in my company currency in AED it was shown small balance 1.31 AED , how to make it zero also ,ThanksQuick editing of fields in a report view...
I've created a report that unites my advertiser accounts with corresponding contact accounts (which are not a subset of Adv. accounts, contacts are their own section). I want to know if there is a way to edit certain fields while viewing my report soRecipient accidentally added to ticket?
One of my users copied email text from a client into the description of a new ticket. The ticket was intended to be for internal use only, so imagine our surprise when he received an email notification, replied, and his reply was added to the ticket!Notes from Custom Modules linked to Account Modules
The way our ZOHO CRM is set up at the moment, whenever a note is entered under a Task or Event the note is visible under both the Task or Event as well as in the notes section under the Account the Task or Event is associated or related to. I have a coupleUI / UX Suggestion: Allow Users to Set Colors of Flow Steps
For those of us who set up complex Flows, it would be nice to be able to color-code different paths / branches for easier future interpretation or troubleshooting. This could take a variety of forms, either highlighting the textual name of the step orStorage Space Issue
I made a few Header templates in the CRM email that adds some fields ( 2 fields to be exact ) to the subject line, however I ran out of "storage Space" when I need to add it to 3 more members of my team. How do I solve this ? If I need to upgrade , whichServer responds internal server error when requesting token
I am trying to request for token through this url https://accounts.zoho.com/oauth/v2/token I use postman to do this, but everytime I send a request it gives me a 500 response with no messages in it. Below is the screenshot of what i am trying to do. PLeaseHow do I add page breaks to Sales Order templates?
I would like our Terms and Conditions to start on a new page of the resulting PDF. How do I do this? I tried adding <div style="break-after:page"></div>, but this did not work.Task Timer is missing
Hi, new here to Zoho... just discovered it yesterday and it looks like a really excellent application!! I signed up but seem to have actually lost some functionality since I did ?! The handy little way to update your timesheets by mousing over the task and clicking on the green clock is no longer there for me. I am talking about what is described in this post: http://forums.zoho.com/forumHome.do?forumGroupId=2266000000002001&forumTopicId=2266000000027532# Now the green clock icon does not appear.Chronicles of 2024: The Year in Retrospect
As we close out 2024, let’s take a moment to highlight the new features and updates that have enhanced Zoho Invoice in 2024. Among the exciting enhancements, we have launched a new AI-powered chatbot designed to assist you in understanding the app's featuresZoho CRM v2.1 deprecation or sunset plans ?
Hi Team Wanted to know if there is any plan to deprecate v2.1 CRM apis https://www.zoho.com/crm/developer/docs/api/v2.1/ and if yes by whenHide recent projects section?
Is there a way to hide the recent projects section? It's not that useful to us and never gets looked at, but takes up valuable screen real estate. Can't see an option or any button to close it. Can we do this? If not can it be added? Chris.Function not working if more then 1 Record is selected
Hi there! I have a function like this: string button.PCS_TempDruck_Rechnungen(string Modul, int ID) { //Do some stuff here return "finish" } I linked this function to a button in the List View and Mass/Multi-Action of the Quote Module. Arguments: Moduleproject profitability
I would love to be able to see my costs for non-billable tasks without that impacting my revenue budget. My project budget type is based on project and my billing method is based on staff hours. if I turn on the option to include non-billable hours inMove data from any fields or upload files to the attachment section in Deluge.
LeadId = 4857358000014515001; resp = zoho.crm.getRecordById("Leads",LeadId); file = resp.get("Upload_Test"); filelist = List(); if(file != null) { file_Id = resp.get("Upload_Test").get(0).get("file_Id"); getFile = invokeurl [ url :"https://www.zohoapis.com/crm/v7/files?id="Next Page