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:

1. Delete the existing listview with the same ID attribute.
2. Re-create the listview.
3. 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.getKey() + '" 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;
				}		
			});		
		}