Custom.js File

The first time you generate the Hybrid App package files, the Custom.js file is generated.

In subsequent file generations for the same Hybrid App package, this file will not be overwritten, so any customizations you make are preserved.

These touch points are available for customization: WorkflowLoad, Submit, NavigateForward, NavigateBackward, ShowScreen, MenuItemClick, and Save. At each touch point, a customBefore method is invoked and a customAfter method is invoked. The customBefore method returns a boolean. If it returns true, it continues to execute the default behavior, for example, navigating to a new screen or performing an online request. If it returns false, it does not execute the default behavior, so you can override the default behavior by customizing these methods.

The Custom.js file contains these methods:

Note: You can delegate the implementation of these functions to different functions supplied in other custom JavaScript files. It is not necessary to include all of your customization logic in the single Custom.js file.

Example 1

//Use this method to add custom html to the top or bottom of a form
function customBeforeWorkflowLoad() {

	var form = document.forms[curScreenKey + "Form"];
	   if (form) {
	      // header
	      var topOfFormElem = document.getElementById("topOf" + curScreenKey + "Form");
	      
	      if (topOfFormElem) {
	         topOfFormElem.innerHTML = "<img id='ImgSylogo' src='./images/syLogo.gif'/><br/>";

	         // footer
	         var bottomOfFormElem = document.getElementById("bottomOf" + curScreenKey + "Form");
	         bottomOfFormElem.innerHTML = "<p>Copyright 2010, Sybase Inc.</p>";
	      }
	   }
    return true;
}

Example 2

When using the customBeforeNavigateForward(screenKey, destScreenKey) { } function, if you want to create your own JQuery Mobile style listview, remember that JQueryMobile does not allow duplicate ID attributes. So if there is an existing listview with the same ID attribute, you must:

Delete the existing listview with the same ID attribute.
Re-create the listview.
Call refresh for your listview.

For example:

//Use this method to add custom code to a forward screen transition. If you return false, the screen
//transition will not occur.
function customBeforeNavigateForward(screenKey, destScreenKey) {


..
try {
		if (destScreenKey == 'Personal_Work_Queue') {
			
			//grab the results from our object query
			var message = getCurrentMessageValueCollection();
			var itemList = message.getData("PersonalWorkQueue");
			var items = itemList.getValue();
			var numOfItems = items.length;
			var i = 0;
						
			//iterate through the results and build our list
			var htmlOutput = '<div id="CAMSCustomViewList"><ul data-role="listview" data-filter="true">';
			var firstOrder = '';
	
			while ( i < numOfItems ){
				var currItem= items[i];
				var opFlags = currItem.getData("PersonalWorkQueue_operationFlags_attribKey").getValue();
				var orderId = currItem.getData("PersonalWorkQueue_orderId_attribKey").getValue();
				var operationNumber = currItem.getData("PersonalWorkQueue_operationNumber_attribKey").getValue();
				var description = currItem.getData("PersonalWorkQueue_description_attribKey").getValue();
				try {
					var promDate = currItem.getData("PersonalWorkQueue_datePromised_attribKey").getValue();				
				} catch (err) {
					var promDate = "";
				}
	
				try {
					var planDate = currItem.getData("PersonalWorkQueue_dateStartPlan_attribKey").getValue();
				} catch (err) {
					var planDate = "";
				}
				
				var onHold = currItem.getData("PersonalWorkQueue_onHold_attribKey").getValue();
				
				htmlOutput += '<li><a id ="' + currItem.getFullKey() + '" class="listClick">';
				htmlOutput += '<p><b>Flags: </b>' + opFlags + '</p>';
				htmlOutput += '<p><b>Order Id: </b>' + orderId + '</p>';
				htmlOutput += '<p><b>Operation No: </b>' + operationNumber + '</p>';
				htmlOutput += '<p><b>Title: </b>' + description + '</p>';
				htmlOutput += '</a></li>';	
				
				i++;
				
			}
			
			htmlOutput += '</ul></div>';
		
			//append the html to the appropriate form depending on the key
			if (destScreenKey == 'Personal_Work_Queue') {

				var listview = $('div[id="CAMSCustomViewList"]');
				//Try to remove it first if already added
				if (listview.length > 0) {
					var ul = $(listview[0]).find('ul[data-role="listview"]');
					if (ul.length > 0) {
						htmlOutput = htmlOutput.replace('<div id="CAMSCustomViewList"><ul data-role="listview" data-filter="true">','');
						ul.html(htmlOutput);
						ul.listview('refresh');
					}
				} else {
					$('#Personal_Work_QueueForm').children().eq(2).hide();
					$('#Personal_Work_QueueForm').children().eq(1).after(htmlOutput);
				}
			}	
			//add the listener based on the class added in the code above
			$(".listClick").click(function(){
				currListDivID = $(this).parent().parent();
				$(this).parent().parent().addClass("ui-btn-active");
				
				//special case for bb
				navigateForward("Shop_Display",  this.id );
				
				if (isBlackBerry()) { 
					return;
				}		
			});		
		}