In this article, Assad shows some tips in order to add custom JavaScript code in our device screens when using Convertigo Mobility Platform.



 
For this sample, our data source will be XML files but this could be any data source actually (Database, Legacy, Webservice, …). The source code for this sample can be downloaded here: sample_customJs.car.   In the xml directory of the project, you can find all XML files used for this sample.
 

Device back button

In many applications, we need to do server side operations between two pages, for example requesting a list of names in a database table, etc … In Convertigo, we have Sequences, a powerfull tool that lets you do complex operations without coding. On a device, when you access a page from a previous form, Convertigo provides tools in order to get the Sequence response (See for more informations: http://www.convertigo.com/document/latest/reference-manual/convertigo-templating-framework/listening-for-a-c8o-requestable-response/ ). While navigating through the screens, there will be a time when the user would try to get to the previous screen by using the device back button. At this moment, since there is no call to the server, there will be no c8o response, and so the dynamic data won’t be present. In order to prevent this, there is a caching option in the JqueryMobile API. We just need to add the following code to our custom.js:    
$(document).bind("mobileinit", function(){   
     $.mobile.page.prototype.options.domCache = true;
});
   

Data-c8o-custom attribute

Convertigo provides several patterns for conditional templating using CTF (See for more informations: http://www.convertigo.com/document/latest/reference-manual/convertigo-templating-framework/html-templating/ ) In some cases, you may need to add specific business logic. Convertigo lets you do it, you just need to add the data-c8o-custom attribute in order to execute your own JavaScript function. In our sample project, we have to check a radio button depending on the value of a datasource field (“yes” or “no”). We add to our input radio button tag the data-c8o-custom attribute:
  data-c8o-custom='__{"formatter":"fmt_radio", "find":"playable"}__'
where “playable” is the name of a field in our XML file. And in our custom.js, we add the following code:
	function fmt_radio(value) {
		var $check = $(this);
		$check.prop( "checked", value == $check.val());	
	}
If the value of the field is equal to the radio button value, we set the property “checked” to this radio button.

“xml_response” hook

In the custom.js file, there is a hook that lets you manipulate the XML response received from the server. In some cases, you may need to use it when you cannot use CTF templating. In our sample, we add a JqueryMobile panel to a screen and we would like to call a Sequence in this panel. From this call, we would like to add data from the response to our current panel. CTF templating doesn’t support yet panels. In order to be able to use our Sequence response, we can use the xml_response hook. Here is the sample code from our project:
C8O.addHook("xml_response", function (xml, data) {
	if(data.__sequence == "Battlegrounds_Sequence"){
		$doc = $(xml.documentElement);
		$battleground = $doc.find("battleground");
		if($battleground.length>0){
			$("#listBattlegrounds").empty();
			$battleground.each(function(){
				$("#listBattlegrounds").append(
						$("<li></li>").append($("").text($(this).find('name').text()))
				);
			});
		}
		$("#listBattlegrounds").listview("refresh");
	}
	
	return true;
});
We first test from which Sequence we came from because this code is executed each time we access a page after a server call. And then we build our list by using Jquery API.

Conclusion

We can see that Convertigo Mobility Platform is not a closed framework, it gives you powerfull tools but you still have the freedom to add your own business logic easily. Enjoy testing this sample and we hope to see you on the forum to share with us your feedbacks.

Leave a comment