Here’s some great news: we are getting ready to release a highly requested feature - Tabs support within DevExpress BI Dashboards! As you might imagine, our implementation is based on user feedback and a number of unique usage scenarios.
This new feature will be supported across the following platforms:
- WinForms, WPF
- ASP.NET WebForms, MVC, Core
- HTML5/JS Web Dashboard
Before we get into details of our implementation, here’s a word of caution. One of the main priorities of any dashboard is to display information in a simple format that is easily understood. It should be free of distraction and utilize visual mechanisms that allow a user to access relevant detail at a glance. For all those reasons, UI specialists warn against the use of structures that hide information, even temporarily. Tabs can obviously be understood as a means of hiding information in this context. We recommend to take great care when tab structures are defined, and to keep an eye on the aspects described above at all times!
With that out of the way, here’s what we came up with.
Sometimes it makes sense to create several dashboards that display related content. Typically, this content is not so closely linked that it should be combined in one dashboard, but it is beneficial to offer the information in (almost) the same place. Sometimes, dashboards can even be switched programatically, for example when entering or leaving a presentation mode.
To support these scenarios, it is now possible to use a Tab container in the root layout group.
Code API
It is possible to hide tab headers for the container and use the API from code to select the visible tab. This little WinForms code snippet can be used to switch tab pages on a timer event. We are frequently asked how a slideshow-style dashboard view can be implemented, for instance for status monitoring on dedicated screens. This can now be done quite easily!
// during initialization
tabContainer.ShowCaption = false;
...
private void Timer_Tick(object sender, EventArgs e) {
int selectedIndex =
dashboardViewer.GetSelectedTabPageIndex(tabContainerName);
int pageCount = tabContainer.TabPages.Count;
dashboardViewer.SetSelectedTabPage(tabContainerName,
++selectedIndex % pageCount);
}
Many customers have asked us for tab support because they would like to include more information in one dashboard layout. As long as all information needs to fit one screen, there are tight limits on the number of controls that can be shown at the same time without cluttering the UI. As mentioned above, we don’t recommend arbitrarily adding tab pages with additional information. However, we have identified several scenarios where tabs can be beneficial.
Shared Filter Elements
A very useful scenario is that of using common filter controls for multiple large elements in a dashboard. In the past, such a dashboard would easily appear quite crowded:
Instead, it is now possible to share the filter controls across tabs, which results in a cleaner UI and more space for each data control:
Of course, as an extension of this scenario, you could also consider decluttering your dashboard by using tab pages to split controls into groups without making shared filter elements available.
Display Variations
Tabs make it easy to show the same data in multiple different ways, leaving it to the user to choose the control that helps them analyze and understand the data most effectively.
Filter Elements on a Tab
Another useful separation is to move filter elements to their own tab page. This maximizes space for data controls, but makes it a bit less convenient to change filter settings. As with the other suggestions for tab use cases, we recommend analyzing your users’ requirements carefully!
Display Item as Page
If you have another look at the illustrative image in the section Display Variations above, you’ll notice that there is a combination of title bars visible at the top. The caption of the tab sits above the caption of the content element on the page. We have implemented a feature called Display Item as Page that can combine these elements like this:
For this feature, we would like to hear your feedback. It is currently implemented only for WinForms, and we have encountered some technical difficulties with it, specifically to keep the behavior intuitive when a user modifies the layout at runtime and includes additional elements on the tab page. What do you think? Is this merging feature important? Do you expect to use tab pages with single items?
State of the Dashboard Tabs Feature
Tabs are implemented as a cross-platform layout feature. They require support in the platform-specific previewer components. At this point, we have implemented this support for all previewers, targeting WinForms, WPF, the various ASP.NET flavors and HTML5/JS.
As explained above, Display Item as Page is currently supported only by WinForms. Per-tab export is currently unsupported for the Web previewer, but it will be included in the final release.
Try it now!
If you are an active Universal subscriber and would like to test this feature prior to its official release, please email our support team at support@devexpress.com or create a private ticket in the Support Center. With that, we can verify your account and provide you with a v18.2 preview installation privately.
If you are using a trial and want to try this feature today, you can purchase a DevExpress Universal license online (this will give you access to early builds such as this CTP). If you own a non-Universal subscription and are ready to upgrade, email us at clientservices@devexpress.com for preferential upgrade pricing.
We are very interested in your thoughts! What do you think about tabs in dashboards? Do you have other scenarios in mind than those described above? Do you think we are missing something with our implementation?
Free DevExpress Products – Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We’ll be happy to follow-up.