Innojam Las Vegas 2012 – Team One – Mumsy-Book App – Source

Innojam Las Vegas 2012 – Team One – Mumsy-Book App – Source.


Innojam Las Vegas 2012 – Team One – Mumsy-Book App – Source

The Mumsy-Book App was designed using Codiqa, which is has a drag and drop interface making it easy to design a HTML5 app using jQueryMobile.

You can test the app on-line, then at a later stage export the entire code base as a HTML5 / jQueryMobile project.


The exported code then needs a little modification. The pictures are typically still held on the Codiqa site, so these need to be modified to be local references.

The code then needs modifying to fetch its data from the Hana system, four tables with test data were created on the system. Team one ran out of time during the innoJam, so only one table was actually implemented.

Here is a code sample of how the data is read and applied to the HTML5 code:

The data was read on the page being loaded:

$(document).bind(‘pageinit’,function(event) {getMembersData()});

The insertion point within the html5 DOM is here:

<ul id=’members-element-id’ data-role=’listview’ data-divider-theme=’b’ data-inset=’true’></ul>

The data is read record by record become line by line within the application:

var nopoint = “ooga”;
function getMembersData()
// URL for calling getRewardsData function with all parameters.
var airline = “AA”;
var myEndpointUri = ““;
// Send the request and define callback methods. {requestUri:myEndpointUri,user:”team01″,password:”InnoJam2012″}, function (data) {
//Success Callback (Received data is a Feed):
var html = “”;
//html += “<ul data-role=’listview’ data-divider-theme=’b’ data-inset=’true’>”;
html += “<li data-role=’list-divider’ role=’heading’>Individual</li>”;

for (var i = 0; i < data.results.length; i++) {
html += “<li data-theme=’c’> <a href=’#page3′ data-transition=’slide’>”;
html += data.results[i].MEMBER + ” ” + data.results[i].POINTS;
html += “</a> </li>”;
//html += “</ul>”;
document.getElementById(“members-element-id”).innerHTML = html;
//Assuming your HTML page has DIV element with id ‘target-element-id’
function (err) {
//Error Callback:
var spacer = “nothing”;
alert(“Error occurred test – ” + err.message);