Dynamic Applications Solutions

Questions

• What is a dynamic mobile solution?
• How do dynamic mobile solutions fit into the enterprise?
• How do enterprise concerns drive the design of a mobile solution?
• How to build a dynamic form solution?

Dynamic Solutions

What is a dynamic mobile solution?

• An application or web site that can have content changed without reinstall or redeployment
• Line of business applications that can adapt to configurable data models and work order processes

Dynamic Solutions

What is a dynamic mobile solution? - Real World Example

• Based on a mobile solution built for the City of Chicago
• Mobile solution is a data entry point for an enterprise wide system that manages city data
• The enterprise application is completely configurable per deparment for the City of Chicago
• Example of use: Fire inspectors will use the mobile solution to complete different types of inspections while on site
• Mobile solution can be used for many different types of work order processes

Dynamic Solutions

How does a dynamic solution fit into the enterprise?

• City of Chicago has ~2700 mobile devices
• The enterprise system has ~3000 different configurations based on department and entity type
• Deploying a new application each time a new configuration is introduced is not an option

Dynamic Solutions

How do enterprise concerns drive the design of a mobile solution?

• Mobile website versus mobile application
• Deployment is a large concern with so many devices
• HTML5 based online/offline mobile websites are used whenever possible
• Mobile applications are used when native functionality is required (via PhoneGap)

Dynamic Solutions

How do enterprise concerns drive the design of a mobile solution? - Mobile Website

• HTML5 based website
• Offline Web Application API
• Web Storage API
• Website can run in a connected or disconnected state
• Entity data is stored locally until a sync with the enterprise system is available

Dynamic Solutions

How do enterprise concerns drive the design of a mobile solution? - PhoneGap

• Framework for building cross platform applications
• Applications are built in HTML5 and javascript and then wrapped into native applications
• Phonegap implements native functionality in a platform specific language and exposes it via javascript
• The mobile website that runs inside of PhoneGap needs to be implemented as a single page html page

Dynamic Solutions

jQuery Mobile to the Rescue!

• Build cross browser mobile web site that is compatible with Phone Gap
• Keep one code base for both mobile applications and mobile websites
• Render input forms dynamically so redeployment is not necessary
• Create a mobile site based on configurations that has the look and feel of mobile

Mobile Solution

How to build a dynamic form solution? - Goals

• Create a mobile solution that inputs data based on the configurations in the core enterprise application
• Provide offline/online access to the application on device
• Validate inputs against business logic stored in the core enterprise system

Demo Application

Screens - Login

Demo Application

Screens - Locations

Demo Application

Screens - Dynamic Form

Demo Application

How to build a dynamic form solution? - Challenges

• Getting all entity and form data to the mobile solution so that it can be used in online and offline mode
• Rendering unique forms for each entity type and assigning values
• Validating and saving dynamic data back to the core enterprise system

Demo Application

Defintions

Entity - Represents an actual data item in the system. Examples are inspections, permits, licenses or any item that can be bound to a form

Form Template - The meta data that describes how to render a dynamic form.

Demo Application

Screens - Dynamic Form

Demo Application

How does the mobile solution get its data?

• Entity data and form templates are downloaded to the device via a JSON based web service
• Data is downloaded specifically for the user that is logging in
• After each successful save the web service is called again to update any new data

Demo Application

How does the mobile solution get its data?

JSON snippet of a Control

["Control":{
"controlId": "listWidth",
"controlType": "DROPDOWNLIST",
"defaultChecked": false,
"enabled": true,
"entity": "Chicago.Inspection",
"items": Array[4],
"label": "Inspection Result",
"property": "result",
"required": false}]

Demo Application

How does the mobile solution render the custom forms?

• Each entity has a corresponding form template that describes the form
• The form template contains a title, description and a list of controls
• A jQuery Mobile page is created in code and added to the container

Demo Application

How does the mobile solution render the custom forms?

• String templates are used to add controls to the page

var html = '<div data-role="fieldcontain">'
+'<label for="%CONTROLID%">%LABEL%</label>' +
+'<input type="text" name="%CONTROLID%" id="%CONTROLID%" />';

html = html.replace( /%CONTROLID%/g , textControl.controlId);

html = html.replace(/%LABEL%/, textControl.label);

if (textControl.required) {
	html = html + "<span style='color:red'>*</span>";
}

html = html + "</div>";

Demo Application

How does the mobile solution render the custom forms?

• String templates are used to add controls to the page

var html = '<div data-role="fieldcontain">'+
'<fieldset data-role="controlgroup"><legend>%LABEL%</legend><label for="%CONTROLID%">&nbsp</label>' +
'<input type="checkbox" name="%CONTROLID%" id="%CONTROLID%" %CHECKEDATTRIBUTE% ' +
html += ' /></fieldset></div>';

if (checkControl.checked) {
	html = html.replace(/%CHECKEDATTRIBUTE%/, 'checked="checked"');
} else {
	html = html.replace(/%CHECKEDATTRIBUTE%/, "");
}
html = html.replace(/%CONTROLID%/g, checkControl.controlId);
html = html.replace(/%LABEL%/, checkControl.label);

Demo Application

How does the mobile solution render the custom forms?

• After each page is created, it is added to the jQuery Mobile page container

$('.dynamicDataPage').remove();

//create markup
var newPage = $(render.getPageTemplate());

//append it to the page container
newPage.appendTo($.mobile.pageContainer);

Demo Application

How does the mobile solution render the custom forms?

• An array is used to maintain a reference to the controls on a page
• As a control is added to a page an entry is also added to the control array
• Looping through the control array gives us a programmatic way to access each control to retrieve and assign values

Demo Application

How does the mobile solution render the custom forms?

• The control object

function Control(id, property, required, type, controlName) {
	this.id = id;
	this.property = property;
	this.required = required;
	this.controlType = type;
	this.controlName = controlName;
	this.value = '';
	
};

Control.prototype.setValue = function (value) {
	this.value = value;
};

Demo Application

How does the mobile solution render the custom forms?

• The control array

controls.controlArray = [];

controls.addControl = function (control) {
	controls.controlArray.push(control);
};

controls.getControl = function (controlId) {

	var controlSearch = controls.controlArray.filter(function (ctrl) {
		return (ctrl.id == controlId);
	});

	if (controlSearch.length == 0) {
		return null;
	}

	return controlSearch[0];
};

Demo Application

How does the mobile solution validate and save data?

• The control array is used to access controls and retrieve values
• A required field attribute is part of the configuration of each control.
• Values are assigned back to the entity and uploaded to the enterprise application via web service

Demo Application

How does the mobile solution validate and save data?

• The control array is looped through and all controls are accessed using helper methods

controls.loadControls = function () {

//Loop through all of the controls and get the values
  for (var i = 0; i < controls.controlArray.length; i++) {

     if (controls.controlArray[i].controlType == "TextBox") {
	controls.controlArray[i].value = controls.getTextBoxValue(controls.controlArray[i].id);
     }
     if (controls.controlArray[i].controlType == "CheckBox") {
	controls.controlArray[i].value = controls.getCheckBoxValue(controls.controlArray[i].id);
     }
     if (controls.controlArray[i].controlType == "DropDownList") {
	controls.controlArray[i].value = controls.getSelectValue(controls.controlArray[i].id);
     }
  }
};

Demo Application

How does the mobile solution validate and save data?

• The helper methods all use jquery to access the controls in the page

controls.getTextBoxValue = function(controlId) {
	return $("#" + controlId).val();
};

controls.getSelectValue = function(controlId) {
	return $("#" + controlId + " option:selected").val();
};

controls.getCheckBoxValue = function(controlId) {
	return $('#' + controlId).is(':checked');
};

Demo Application

How does the mobile solution validate and save data?

• The final save method

app.saveEntity = function () {

	//Validate the controls
	var validationMessages = controls.validate();

	if (!utils.isNullOrEmpty(validationMessages)) {
		utils.showErrorMessage(validationMessages);
		return;
	}

	//Loop through and set the values on the entity
	for (var i = 0; i < controls.controlArray.length; i++) {
		state.currentEntity[controls.controlArray[i].property] 
                                                 = controls.controlArray[i].value;
	}

	//Clear out the control list and the state.current fields
	controls.clearControls();
	state.currentEntity = {};
	state.currentFormTemplate = {};
	state.currentEntityId = 0;

	$.mobile.changePage($("#Assignments"));
};

Live Application Demo

Demo Application

Improvements

• Performance - cache each page after the first rendering so it doesn't need to be recreated
• Validation - provide different types of field validation based on configurations set in the core enterprise application
• Mulitple Dynamic Pages - support multiple pages added through the form templates
• Navigation - as multiple pages are added to the application provide a nav bar for navigating between

Thank you!

Questions?

Building Dynamic Applications Using jQuery Mobile

Pat McLoughlin

• CITYTECH, Inc
• Technical architect for enterprise solutions
• Background is in services oriented distributed web applications
• pmcloughlin@citytechinc.com
• http://www.citytechinc.com/us/en/blog.pmcloughlin.html
• Will post links to the demo application and source code via blog