Xamarin UI Controls - Case Study: Building the Error Monitoring Client App (Part 1)

The Error Monitoring Mobile Client – Powered by DevExpress Xamarin.Forms UI Controls

To help showcase the capabilities of our Xamarin.Forms UI controls and to deliver the best possible user experience, we chose to create native Android and iOS apps from a single shared C# code. Our mobile app will allow users to view and process individual crash reports on mobile devices from a exception monitoring platform (Logify).

This blog series will detail the process from beginning to end. We will solicit feedback and hopefully work with you to deliver a great mobile client for error monitoring and extend the capabilities of our Xamarin.Forms UI controls where appropriate.

NOTE: To reserve your free copy of our Xamarin Forms UI suite, simply point your browser to: https://www.devexpress.com/xamarin-free/. If you have never seen or used our Xamarin Forms UI controls, please review our YouTube videos and our online documentation for more information.

Building the Error Monitoring Mobile Client – UI Mockup

We expect the Error Monitoring mobile client to include the following app screens.

If you are primarily interested in our Xamarin.Forms UI controls, this blog series should offer deeper insights into what is possible with DevExpress Xamarin.Forms components and how you can deliver amazing mobile user experiences in the shortest possible timeframe.

The Error Monitoring Mobile Client - Main Menu

The Error Monitoring client will include multiple views. As such, we need to create a well-organized navigation menu. We will use the DevExpress Xamarin.Forms Drawer control with a title and links to individual application pages.

This Drawer control is our implementation of the Xamarin.Forms MasterDetailPage control.

Reports

The Error Monitoring client's main workspace will display a list of crash reports/exception events. As you can see in this image, the exception report list requires an advanced UI template. We will use our Xamarin.Forms DataGrid View with a single column. Since our Xamarin Grid supports cell templates, it can be customized as a traditional ListView.

A cell template is a Xamarin.Forms DataTemplate. When the grid is bound to a collection of data objects, the elements specified in the DataTemplate are bound to properties of each data object. This defines the manner in which the component displays values.

The DevExpress Xamarin.Forms Data Grid supports gestures. The Error Monitoring client will use the following gestures within the Reports workspace:

  • Swipe Actions – We will implement common actions, including Ignore and Close.

  • Load More – For maximum UI efficiency, we will avoid loading too many items within the list and use “load more” to populate the list.

Filters

The Error Monitoring mobile client will display its filter panel within a sidebar (we will use our Drawer component for the sidebar). This panel will allow users to configure custom filters by individual application and report status type. It will also allow users to modify the subscription and team memberships.

Note: As you may know, the Xamarin.Forms MasterDetailPage allows us to position a drawer UI element on the left side of the screen. We've decided to use our custom DrawerView to maintain better control over screen position and UI behavior.

Crash Reports View

In the Reports list, we only display application name and the exception associated with individual reports. We will activate the Crash Reports View when a user taps an item in the report list and display detailed information on each exception/crash event.

The Error Monitoring client divides exception information into logical blocks. These blocks can be quite large and can consume significant screen real-estate. To help improve readability, we will use TabView and provide a separate tab for each information block. Custom templates allow us to modify the appearance of tab headers.

Monitored Apps View

This image illustrates how we expect to display a list of tracked/monitored applications within the Error Monitoring mobile client. 

We will use our Xamarin.Forms Data Grid and custom templates to create the appropriate UI. Each item within this list displays a chart that specifies the number of logged reports for a given app. At present, we do not have a special control for this purpose. We will revisit this as we move forward in this project.

App Detail View

When a user taps an individual application item, the Error Monitoring mobile client will display additional information within its Detail View. 

This view includes application name, API key, description and proportion of active crash reports.

Statistics

The Error Monitoring client’s Statistics screen will allow users to visually inspect the overall “health” of an application. 

To improve readability, we expect to organize individual charts within separate tabs.

Your Feedback Matters

As this project progresses, we expect to regularly share implementation details via this blog. Should you have any questions about this project or would like to share your Xamarin experiences with us, feel free to contact us at info@devexpress.com or leave your comments below. 

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Eric Upton 1
Eric Upton
This is awesome. I'm glad to see DevExpress giving more focus to building your Xamarin suite of controls.
24 July 2019
DataWerkes - Keith
DataWerkes - Keith
Can these controls be connected to an XPO apps datasource?
24 July 2019
Dalibor Stys
Dalibor Stys
Great news, waiting for more components.
24 July 2019
Dennis (DevExpress)
Dennis (DevExpress)
@Customer84476:
Although we do not yet have examples with these controls, it is possible to use XPO in Xamarin apps. XPO is technically a data access library that is not tied to any specific controls.
I hope these examples will help you get started: https://github.com/DevExpress/XPO/tree/master/Tutorials/Xamarin.Forms.
Do not hesitate to contact us in case of any difficulties.
24 July 2019

Please login or register to post comments.