Xamarin.Forms UI Controls - Building the Logify Client App (Part 1)

As you may already know, Logify is our 24/7 application crash monitoring platform. Its runtime exception monitoring services and crash reports are available via an intuitive web interface.

Though Logify’s existing web interface does allow you to view and process individual crash reports on mobile devices, we felt it was time to deliver an optimized client for today’s mobile world.

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.

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 Logify and extend the capabilities of our Xamarin.Forms UI controls where appropriate.

We expect the Logify mobile client to include the following app screens. If you’re currently using Logify or expect to do so in the near future, we would love to hear from you. Please tell us if the user interface below addresses your business needs.

If you are new to Logify or 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.

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

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

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.

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.

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

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.

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

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

At present, DevExpress Xamarin.Forms UI components are included in our Universal Subscription (a new Xamarin-only subscription will be announced later this year). If you’ve yet to try our Xamarin.Forms UI controls or would like to discuss your business needs further, please write to us at info@devexpress.com.

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 comment below.