Hybrid App UI Functions

Example 1

To completely override the behavior provided by updateUIFromMessageValueCollection for a given screen, provide a UIUpdateHandler object for that screen. That UIUpdateHandler object has a screenName property, which indicates which screen's behavior it is overriding, and a callback function that indicates the function to call for that screen. That function is passed in the relevant MessageValueCollection object and it is its responsibility to update the controls' values based on its contents. An example of this is:

function MyListViewUpdateHandler() {
	    this.screenName = "Prev_Expenses";
	    this.values;
	}

	MyListViewUpdateHandler.prototype.callback = function(valuesIn)  {
	    // Rows returned from RMI Call
	    this.values = valuesIn;

	    // construct our table
	    try  {
	        var mvc = this.values.getData("PurchaseTrackingJC_findOtherRequests_resultSetKey");
	        var txt = "";
	        var htmlOut = "<p>";

	        // Do we have any rows to display?
	        if (mvc.value.length > 0) {
	            // Start the table and header
	            htmlOut += "<table id='MyPrevExpensesTable' class='altrowstable'>";
	            htmlOut += "<tr><th>Item Name</th><th>Cost</th></tr>";
            
	            // Draw the rows+H15
	            for (var rows = 0; rows < mvc.value.length; rows++) {
	                var mvName = mvc.value[rows].getData("PurchaseTrackingJC_itemName_attribKey");
	                var mvCost = mvc.value[rows].getData("PurchaseTrackingJC_itemCost_attribKey");
                
	                if (mvName && mvCost) {
	                    // Alternate the row colors
	                    htmlOut += "<tr onclick='navigateForward(\"Prev_Expenses_Detail\", " + mvc.value[rows].getKey() + ");'";
	                    if (rows % 2 == 0) {
	                        htmlOut += " class='evenrowcolor'>";
	                    }
	                    else {
	                        htmlOut += " class='oddrowcolor'>";
	                    }
                    
	                    htmlOut += "<td>" + mvName.getValue() + "</td><td>" + mvCost.getValue(); +"</td></tr>";
	                }
	            }
            
	            // Finish the table
	           htmlOut += "</table>";
	        }    
	        else {
	            htmlOut += "No rows returned.";
	        }
	        htmlOut += "</p>";
        
	        //Now add the table to the document
	        var form = document.forms[curScreenKey + "Form"];
	        if (form) {
	            //var topOfFormElem = document.getElementById("topOf" + curScreenKey + "Form");
            
	            var topOfFormElem = document.getElementById("PurchaseTrackingJC_findOtherRequests_resultSetKey");
	            topOfFormElem.innerHTML = htmlOut;
	        }
	        
	    }
	    catch (e) {
	        alert(e.message);
	    }
	} // function callback

	function customAfterWorkflowLoad() {
	    //Setup UIHandler to draw our Listview Screen
	    UIUpdateHandlers[0] = new MyListViewUpdateHandler();
	}