Mobile Workflow Apps

Today I would like to demonstrate how to build a HTML5 Web application for mobile phones. My example application will display business data from a back-end application provided by a RESTfull service interface. The data is in json format, which is a common data format especially for mobile applications. Here you can see the result:

This simple application looks nice as it makes use of JQuery Mobile. This is a powerful framework to build mobile apps with HTML5. The data displayed in my app comes from the Imixs Office Workflowproject. This is a workflow suite for small and medium companies. Imixs Workflow provides a RESTfull service interface which allows you to access any kind of business data. For example to access the current projects I use a RESTfull service URL like this:

The method getJSON expects three parameters. The first one is the url of my service interface. The second provides an array with optional params. These params will be added to the end of the URL in the way ?count=5&start=0. The last param is my callback method. This method is called by the JQuery API if the request of data was successfully.

Lets look how I put the data into my html page. With the line

$.each(data.entity, function(i, workitem) {
....

I iterate over the json data structure – where ‘entity’ is my root node. The logic here depends on the layout of your json data format. In my case – as I am using the Imixs Workflow Service – the ‘entity’ node which is the root node, contains a collection of WorkItems. Each WorkItem has a set of items with key/value pairs. To get only the interesting properties ‘txtworkflowwtatus’ and ‘$uniqueid’ I iterate over the array of Items