Let’s face it, large datasets can be overwhelming and intimidating. Just because data begins as an endless shapeless stream of facts and figures, who says it has to stay that way? There are many ways to present raw data in an easy-to-read format.

For many routine business scenarios, Microsft Excel is the tool used to convert flat tables into pivot tables and charts in order to make sense out of the data and help make some business decisions. But by the time it reaches your target audience, it is outdated most of the time.

Getting the data into a readable format is one thing. The more important part is delivering it to your target audience in timely manner and viewable on their choice of platform (PC, tablet or smartphone).

Mobile devices are playing a big role in accomplishing such routine tasks. What’s more, research shows that users are spending more time on their mobile devices, compared to a standard PC, to access information and take quick actions. According to Digital Ad Agency Vertic:

  • Enterprise tablet adoption will grow by almost 50% per year.
  • By 2015 mobile app development projects will outnumber native PC projects by a ratio of 4-to-1.

The purpose of my blog post is to give the reader an overview on new technologies that can be used to convert line of business (LOB) data into a multi-platform mobile compatible format and build mobile web interfaces. The image below can illustrate the basic idea.

Converting flat data into mobile compatible formats like JSON, Web APIs and OData services can be used to achieve common goals. Before going further into more technical stuff, let’s first understand these terms.

The Open Data Protocol (OData) is a data access protocol built on core protocols like HTTP and commonly accepted methodologies like REST for the web. OData provides a uniform way to query and manipulate data sets through create, read, update and delete (CRUD) operations. You can learn more about OData by visiting OData.org.

JavaScript Object Notation (JSON) is a lightweight data-interchange format. It is easy to read and write and for machines to parse and generate. JSON is a text format that is completely language independent and is built on a collection of name/value pairs realized in most modern languages.

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

OData services are web services that expose some resources. You can access these resources via URL. OData protocol specifies how you can access data via HTTP queries. The basic idea is that you can open a URL with parameters that will execute queries against the resources.

There are many public OData services you can use to learn and create sample applications. For the purpose of this blog post, I will use the ficticious company name Northwind OData service. If you open the URL http://services.odata.org/Northwind/Northwind.svc, you can see a list of resources it exposes. By default, it displays the data in XML format but you can easily convert it into JSON format by passing the $format=json parameter.



I could write a whole separate blog post on different ways you can access this data and apply filters as URL parameters, but let’s keep going. So we have cloud enabled LOB data in JSON format, let’s see how we can add a mobile interface to make sense out of it.

There are three types of mobile apps currently being built: native apps, web apps, and hybrid apps. I’m going to show you an example of a mobile web app. There are tons of third-party free/paid tools available out there to build mobile web apps. But I have used HTML5, JQuery, and JQuery Mobile to build mobile web apps successfully and they are all free.

HTML5 is cross-platform and it is designed to work whether you are using a PC or a tablet, a smartphone, or a smart TV. You can learn more about it by visiting W3Schools or HTML5Rocks websites.

jQuery and jQuery Mobile extend the functionality by adding capabilities like data manipulation, event handling, animation and Ajax. The jQuery Mobile framework allows you to design a single, highly branded responsive website or application that will work on all popular smartphones, tablets, and desktop platforms. JQuery Mobile has a really good demo section with examples of mobile features.

As you saw in the above graphic, the Northwind OData exposes resources like Employees, Orders, etc. By writing small amount of HTML5 and jQuery Mobile script, we can create a mobile compatible interface for the “Sales by Categories” resource. Here is what raw data looks like for “Sales by Categories” resource. Doesn’t make much sense, does it?



When we apply the mobile formatting to it, the final result would look like this on an iPhone screen:



If you like to make it bit more interesting for your executive team members, you can use Google Chart API and add some interactive charts to this app.



We also talked about responsive design. So to make it more useful for tablet users, you can use HTML5, CSS3 and jQuery Mobile features to detect screen size and display more content on tablet screens:


Check out the Responsive Web Design blogpost written by Drew Bills to learn more.

This gives you an idea on how you can make flat and boring data accessible on mobile devices. There are many tools available to make this process easy and automate repetitive tasks. For example, Microsoft has done a great job with new version of Visual Studio 2013 which has many in-built features and templates to create Web APIs and OData services.