• Jim Beers

Device-Responsive Reporting with DevExpress

This tutorial demonstrates how to add a device-responsive document viewer to a web application.

Add a Report to an existing Web Application

DevExpress is flexible when it comes to report storage, but an easy way to use reports in a web app is to create a new report directory. To do this, open an existing web application in Visual Studio.

1. Reference the DevExpress assembly in your project's references (Right-click references > "Add Reference" > "Extensions" > "DevExpress.Web.Mvc5")

2. Add a new folder to the project named "Reports"

3. Right click the reports folder >”Add DevExpress Item”>”New Item”>”XtraReports Wizard Web”

4. Provide a name for the report and click add. Select empty report and click ok

5. With the report designer open, click the reports smart tag > “Open/import”> navigate to your report definition, select the report and click open

To learn how to bind a report with a document viewer, view this tutorial.

Make a Document Viewer Device-Responsive

To support device-responsive reporting, you must use the HTML5/JS based document viewer, and enable mobile viewing.

To enable mobile viewing, toggle open a document viewer's smart tag, and select "Mobile Mode"

By default, a report added to a document viewer appears in its full-size format, and can be zoomed-in to view report details. To create a report that is truly device-responsive, we developed two versions of our reports. One that can be viewed in standard desktop platforms, and one scaled to fit a mobile screen size.

Then, in the web application, make a simple call to check the screen size of the browser the page is being viewed in using javascript. Decide what break point will determine which report to pass to the document viewer, and use this to determine which report to instantiate.

#DeviceResponsiveReporting #MicrosoftDynamicsGP #OlympicSystemsReporting