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.
//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; }
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; } }); }