Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

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.

  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

Published Nov 22 2017, 09:00 AM by
Filed under: , ,
Bookmark and Share

Comments

Shamil Mustafin

This is very good news!

P.S. it will be a separate product ?

November 23, 2017 9:18 PM

Anurag Mahato

what about devextreme(angular) ?

November 25, 2017 8:50 PM

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.

November 26, 2017 5:49 PM

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.

November 27, 2017 5:02 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners