Exploring Xamarin.Forms controls in our new Global Sales Dashboard

This month, I take you through the creation of a Global Sales Dashboard application using Infragistics Xamarin.Forms controls with app views that adjust their content depending on screen size of targeted mobile device. You can watch video of this application and download source code.

First, Infragistics designers came up with great mockups images of what they wanted the application to look like:

Then I had productive meeting with UX and design teams to talk about how the components of this application will interact with each other. As result, we finalized the app design and user interactions, which you can review on tablet and phone prototypes in Indigo Studio.

 

The biggest challenges implementing this application was layout of Xamarin.Forms controls in shared app views such that they show detailed information on tablets and only summary of sales data on phone devices. In addition, the design called for normalized look and feel of BulletGraph, DataChart, and LinearGauge controls across Android, iOS, and WinPhone platforms. The final challenge was to create data structure for retrieving data based on date range, region, and division of sales.

 

I accomplish all challenges by some creative coding to show detailed views of sales data based on target device, normalizing styling properties on Infragistics Xamarin.Forms controls, and creating 3-dimensional data structure that I called Sales Cube to quickly retrieving information based on user’s selection of date range, region, and division of sales data.

 

Are you inspired to build your own dashboard mobile app? Grab your free trial of Infragistics Xamarin.Forms or simply get source code for this app so you can quickly start creating some in-depth visualizations. Happy coding!