DevExpress Dashboards - Tab Support for Windows & the Web

Here’s some great news: we are getting ready to release a highly requested feature - Tabs support within DevExpress 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.

Root Layout Page 1

Root Layout Page 2

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);
}

Automatic Page Switching from Code

More Information Per Dashboard

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:

Shared Filter Elements without Tabs

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:

Shared Filter Elements with Tabs Page 1

Shared Filter Elements with Tabs Page 2

Shared Filter Elements with Tabs Page 3

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.

Display Variations

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!

Filter Elements on a Tab Page 1

Filter Elements on a Tab Page 2

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:

Display Item as Page

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?

25 comment(s)
Ricardo Blasco

Hi, can you get me the CTP?.

Thanks in advance.

11 September, 2018
Jonatas Hudler

I can't believe I'm seeing this! From what is said in this post and seeing the screenshots, the results went way beyond our expectations and usage needs.

No doubt our customers are going to be impressed by all of these possible scenarios.

Thank you so much!

11 September, 2018
Andrey (DevExpress)

Hi Ricardo,

Thank you for your interest! We will email you the CTP details.

Best regards,

Andrey

11 September, 2018
Ryan Smith_2

It is a little sad about how happy I am that this is being added, made my day.

11 September, 2018
Ryan Smith_2

It is a little sad about how happy I am that this is being added, made my day.

11 September, 2018
Aluron

Absolutely great feature! Awesome!

12 September, 2018
Junaid Ahmed 3

Really Its a great feature........

Can I use v18.2 preview (CTP) in our production ???

12 September, 2018
MichailTemelkos

Great Future, pls let me try the CTP

12 September, 2018
Blago Culjak

Great! Can't wait.

12 September, 2018
Rogerio Furtado

Hi,

Great feature!!!

I would like to try the CTP too.

Thanks in advance.

Regards.

12 September, 2018
Andrey (DevExpress)

@Ricardo Blasco

& @MichailTemelkos

& @Rogerio Furtado

I’ve mailed you an invitation email with CTP details.

@Jonatas Hudler

Thank you again!

@ Ryan Smith_2

Thank you! That’s really motivating for us that you find this feature so valuable!

@ Aluron

Glad you enjoy it.

@ Junaid Ahmed 3

I strictly advise against using this CTP version in your production environment because it is an early preview version and it has not been so thoroughly tested as a public release.

@ Blago Culjak

If you are eager to try earlier, I encourage you to try it yourself! Just let me know.

12 September, 2018
Jose Isga

Hi, Every day the dashboard component is more powerful with the new features. Thank you!!! I want to try.

12 September, 2018
Ömer Çarnaçar

I can to try the 18.2 preview

12 September, 2018
Andrey (DevExpress)

@Ömer Çarnaçar

Unfortunately, this CTP is only available to active DevExpress Universal Subscribers. If you'd like to upgrade your current subscription, feel free to contact the DevExpress Client Services Team (clientservices@devexpress.com) for preferential upgrade pricing. Once you've upgraded your subscription, I'll be happy to add your name to the CTP and get you access to our early builds.

12 September, 2018
Igor Laktic

Great Future.

I just wanted to implement the tab,... and here it will be soon :)

13 September, 2018
Igor Laktic

Great Future.

I just wanted to implement the tab,... and here it will be soon :)

13 September, 2018
Igor Laktic

I just wanted to implement the tab and here it will soon be possible.

Great :)

13 September, 2018
Marcin Mroczek

It looks great and I was wondering if it would be possible to use (in Web)  this Shared Filter Element part  as auto hidden menu  under the Dashboard  or as always visible part of menu during scrolling dashboard. It is desired functionality by many users in my company.

13 September, 2018
Andrey (DevExpress)

@Igor Laktic

I am happy that we foresee your intents!

@Marcin Mroczek

I advise you to create a support ticket, so we could discuss both the desired behavior and current (or future) options in greater detail?

13 September, 2018
Mike Calming

Oh no ... I already implemented something similar. You might actually think about what I added.

Based on page control with the following features:

- each page has the display time, then it switches automatically to next

- each page can be refreshed on selecting, or with set interval

- shows the last refresh time and clock on the bottom in status bar

Usage is just adding dashboard xml to the list of dashboards, set parameters and that's all.

Just running 24/7 with at least 10 dashboards.

Great job however, this feature was very missing!

14 September, 2018
Sergi (DevExpress Support)

@Mike Calming,

We plan to implement an API that will allow you to switch between tabs programmatically. If you want to discuss this scenario in greater detail, please submit a ticket to our Support Center at http://devexpress.com/sc.

17 September, 2018
erick alvarez

I was waiting for this option, as it is very useful lashes

17 October, 2018
Customer4237

Hi,

I want in on 18.2 preview, can you send me the mail for that. Thanks in advance

13 November, 2018
Andrey (DevExpress)

@Customer4237

This feature is already released as part of v18.2.

You can find it in your Download Manager.

15 November, 2018
Oleg Khozyainov

Just another post to say thanks, that this feature is a game changer!

Look forward to adopting 18.2 for this.

20 November, 2018

Please login or register to post comments.