Custom Widgets in YouTrack
YouTrack lets you track activities in different projects and get an overview of the current status of your own tasks on a dashboard. There is a standard set of widgets in YouTrack that you can use at any time. But sometimes you want to view the data in a different layout or track information from other applications. That is why we added functionality that lets you create custom widgets and add them to your dashboards. With this feature, you can extend the functionality of your dashboards to grab content from external sources or present issue data in a unique format.
In this article, I’m going to walk you through the basic steps for creating a custom widget and tell you about the widgets that are available in the JetBrains Plugins Repository.
Anyone who knows JavaScript can create a custom widget and share it with the community. We provide a custom library for JavaScript that includes an API for working with widgets. If you don’t want to create your own widget, feel free to grab an existing widget from the JetBrains Plugins Repository.
A custom widget consists of the following components:
- A widget manifest.
- An index file that serves as an entry point for the widget.
- The widget script.
Our open-source Ring UI library includes a package that automatically generates a project for a custom widget. The generator creates all of these components, including a sample custom widget.
Once you have built a custom widget, you can:
- Test the widget on the widget playground page in YouTrack.
- Upload it to your production environment and add it to your dashboards.
- Share the widget with the community by uploading it to the JetBrains Plugins Repository.
A complete tutorial for building custom widgets is available in the YouTrack documentation.
Currently, there are five custom widgets available in the JetBrains Plugins Repository. These widgets are open source, so feel free to use the source code as a springboard to develop your own widgets.
The Agile Board Status widget displays the status indicator that tracks the number of issues in each column on an agile board in YouTrack. Clicking a column opens the Issues list and shows the issues that match the query.
You can use this widget to track the progress of your development team during the sprint.
Another useful widget is the Stack Overflow widget that shows you a digest of questions from Stack Overflow that match one or more tags. Clicking a question opens the corresponding page in Stack Overflow.
This widget is useful for those who want to stay on top of questions related to specific tags. For example, we use it in the YouTrack team to quickly respond to questions related to YouTrack and Hub.
The YouTrack Issues List widget is an enhanced version of the Issue Widget that is built into YouTrack. The built-in widget simply shows a list of issues that match a query, saved search, project, or tag. The custom version lets you set one of these items as a context, which means you can show a list of issues that are sorted manually.
You also have the ability to expand an issue in the list to show the values for custom fields.
If you want to have a list of members from different teams on your dashboard, you should get the Project Team widget. It’s useful for those who communicate with people from various projects and helps you quickly find the right person.
For example, as a Product Marketing Manager, I communicate with designers, other PMMs, and internal development teams. The Project Team widget helps me quickly find the right person in the right team.
And of course one of my favorite widgets that was developed by our community is the Cats widget. When I open my dashboard in the morning, I’m greeted by an animated and cute fluffy cat!
You can either find a favorite cat and put it on your dashboard, or set up a random rotation to see a different kitty every time you refresh the page or widget.
Sounds exciting? Download an existing widget or create your own and share it with the community!
Subscribe to YouTrack Blog updates
