Dashboards: Mobile Layout for the Web (v17.2 CTP)

Now that the DevExpress Dashboard has been out for a few releases, we're seeing a growing demand from our customers for improving the Web Dashboard usage on mobile devices.

Good news! In this v17.2 release, we have experimented with a Mobile layout to make dashboards more user-friendly and interactive on mobile devices, as they are on Desktop browsers. This new mobile layout will be available as a CTP (Community Technology Preview) in the v17.2 release.

This was a challenging task to adapt a Dashboard that has many visual controls on it and shrink it to fit on mobile browsers. There are some difficulties centering around the Dashboard concept itself. For example, in dashboards, a user interacts with multiple connected items at the same time; but that is not possible on smartphone apps because of the small viewing area.

However, we've come up with a good solution. Our new mobile version will attempt to find a balance between usability of the entire dashboard versus viewing and interacting with one particular Dashboard Item.

To see this in action, check out this animation:

Visit our online demo and experience yourself: https://demos.devexpress.com/Preview/Dashboard/

Gallery View

In our mobile layout, we utilize a well-known mobile UI pattern – the Gallery.

The Gallery allows users to slide between dashboard items sequentially for data analysis or jump directly to an item for futher research.

Besides implementing the Gallery, we rethought a concept of the Dashboard Title and Items' toolbars so that they adapt to become mobile-friendly.

How to enable Mobile Layout

You can use mobile layout with any approach – Web Forms, MVC, .NET Core (CTP), or in a native Client-Side Approach. Follow this link to find more info about extensions: How to work with extensions.

To enable the mobile layout, follow the steps below:

1. Make sure that your HTML page is mobile-friendly by setting the corresponding ViewPort metatag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This meta tag is a common requirement for Mobile Browsers.

2. Go to the Web Dashboard declaration and register the Mobile Layout extension using the following code snippet:

function onBeforeRender(sender) {
  var dashboardControl = sender.GetDashboardControl();
  dashboardControl.registerExtension(
    new DevExpress.Dashboard.MobileLayoutExtension(dashboardControl)
  );
}

That’s it. Note that a mobile layout does not replace the classic layout; it’s enabled only in certain conditions:

• The Web Dashboard control is set to the Viewer / ViewerOnly mode
• The page is open in a mobile browser

Tip: You can use the Device Mode in the Chrome Developer Tools to test mobile views.

Project Status

Once again, this is a CTP version. Report any issues, missing functionality, or suggestions as regular Support Center tickets. We'll be happy to review your feedback and optimize the API based on what we hear. This also serves as a reminder that the API is subject to change until we officially release.

Known limitations

This current version of the Dashboard's mobile layout does not visually indicate a Dashboard Item Group. This means that dashboard items filtering may not work in an obvious way for the end users. To avoid this issue, we recommend that you not show a dashboard with Groups in the Mobile Layout.

We'll continue to work on improving the Dashboard before the final release.

Are you excited by the DevExpress Web Dashboard's Mobile Layout? Drop me a line below.

Thanks!

Email: mharry@devexpress.com

Twitter: @mehulharry