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

Mobile Team Blog
23 July 2019

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

As you may already know, Logify is our crash reporting and error 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.

Building the Logify Mobile Client – UI Mockup

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.

The Logify Mobile Client - Main Menu

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

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

Filters

The Logify 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 (just like Logify’s web interface).

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.

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.

Monitored Apps View

Logify’s web UI displays a list of all registered applications (apps that are tracked/monitored by Logify). This image illustrates how we expect to display the information within Logify’s 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 Logify 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

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

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.

4 comment(s)
Eric Upton 1
Eric Upton 1
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.