Xamarin.Forms DataPages and DevExpress OData Service

If you have used DevExtreme Project Templates to create mobile apps you know how fast and easy you can get a simple solution working. With just passing the Url of your OData service on the wizard all the views for your entities are generated in a master- detail way. This is a great solution when you need to give access to some data to your users without having to create views, models, bindings, etc. It is all created for you, it is quick and more important, it works. But as a C# developer that is the end of my road. If I have to do any customization at all I then move to Xamarin where I feel more at home.

I was reading an article last week about Xamarin.Forms DataPages and my first thought was: Will it work with DevExpress Odata Service? Spoiler: Yes, It does. 

I won’t go over the implementation of the DataPages because Microsoft does a good job right here. Instead I am going to focus on using a Odata V3 service in their sample app.

After following every step, I added my service url: https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json and nothing. Blank screen.

After a little research I found that the format of our services are not exactly what we need. It comes with a __metadata field and more information that the JsonDataSource is  not expecting. For more info about OData payload take a look here, more specific check  section 7. Representing Entries.

After figuring that part out with a lot of trial and error and using https://www.json-generator.com/ to create a payload that the it could actually be read by our app I finally comment the Xaml that assigned the data source and I did a little parsing (this was a proof of concept so don’t judge me 😁) on the code behind.

Commenting the DataSource

Code behind

And voila: (Master and Detail shown below)

Check Source code here.

To check how the JsonDataSource was implemented I used http://xamarinforms-source-browser.azurewebsites.net/.

Odata Out!

References:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/datapages/

https://brax.tv/lesson/xamarin-forms-intro-to-datapages/

Leave a Reply

Your email address will not be published.