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/

Updated: Mobile Layout is released. See the demo at https://demos.devexpress.com/Dashboard/Emulator?mode=viewer&dashboardId=SalesOverview..

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.

  1. 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

6 comment(s)
Shamil Mustafin

This is very good news!

P.S. it will be a separate product ?

23 November, 2017
Anurag Mahato

what about devextreme(angular) ?

25 November, 2017
Alfred Rakgole 2

Great news!

DevExtreme dashboard viewer would be a great addition, but this is a very good start for mobile enabled dashboard viewer.

26 November, 2017
Sergi (DevExpress Support)

Hello,

@Shamil, Mobile Layout is an addition to the current Web Dashboard product.

@Anurag, at the moment, Web Dashboard does not provide native support for Angular. However, it should be possible to embed our HTML5 JavaScript Dashboard Control to any JavaScript application and use ASP.NET MVC 5 or ASP.NET Core server side as a backend. If you need more information on the subject, please post a ticket to our Support Center. We will be happy to assist you.

27 November, 2017
Consafe Logistics AB

We have been trying this feature for a while.

Quite soon you find that you miss the overview you

get on a designed layout. We use “master filter” in almost every dashboard,

and showing the items “one by one” makes a bad interaction.

- We would like to see way to toggle between the “designed layout”, and the “one by one”

Is that a coming feature?

14 January, 2018
Andrey (DevExpress)

@MARTIN ÅKERLUND,

Thank you for sharing your feedback. It matches our UX testing results of the current CTP product.

Currently, we are thinking over different ways of improving this interaction part.

15 January, 2018

Please login or register to post comments.