SAP UI5 – Simplified Utility Framework APIs

Generic Change or Select Event for SAPUI5 Input controls

There are instances where user actions on an input field follow the same set of field binding retrieval, processing and updating. This leads to redundant codelines (owing to repetition of above mentioned binding sequence) for all input fields.

Use cases of this blog/codebase –

• If a project demands a short development timeframe
• The need for a generic framework/APIs
• Re-usable and Scalable codebase

Category: SAPUI5 Development

Code: JavaScript

File: controller.js or any other utility.js

UI5 Controls:

• sap.m.Input, sap.m.Select (and other UI5 input controls – just add new cases to the switch-case condition in the code below)

Events:

• Change, Select, etc.

Advantages:

• Generic API to read Field Binding Details
• Validate one or more fields bound to the model at a single point of reference
• Update one or mode fields bound to the model at a single point of reference
• Re-usable and Scalable API

Generic Change or Select Event for SAPUI5 Input controls – JavaScript Code

//generic API
getFieldBindingDetails: function(oEvent){	
	var oBinding = {bBindingFound: false, oModel: null, sPath: null, oCurrentItem: null, sCurrentField: null}; //set default return parameters
		
	//determine field binding
	var sFieldBinding;
	var sFieldType = oEvent.getSource().getMetadata().getName();	
	switch (sFieldType){
		case "sap.m.Select": sFieldBinding = "selectedKey"; break; //for field "sap.m.Select", the bound parameter is "selectedKey"
		case "sap.m.Input": sFieldBinding = "value"; break;	//for field "sap.m.Input", the bound parameter is "value"
		//similarly add new controls here
	}
				
	if(sFieldBinding){
		var oBinding = oEvent.getSource().getBinding(sFieldBinding);
		var oContext = oBinding.getContext();
		var sCurrentField = oBinding.getPath();		
		var oModel = oContext.getModel();
		var sPath = oContext.getPath();		
		var oCurrentItem = oModel.getProperty(sPath);		
		oBinding = {bBindingFound: true, oModel: oModel, sPath: sPath, oCurrentItem: oCurrentItem, sCurrentField: sCurrentField};	
	}
		
	return oBinding; 	
},

//custom field change or Select Event depending on business usecase
onChangeOrSelectActions: function(oEvent){
	var oFieldObj = this.getFieldBindingDetails(oEvent);
	if(oFieldObj.bBindingFound){
		//add business logic to validate fields (accessible in oFieldObj.oCurrentItem)
						
		//business logic to set new values to selected item (1 or more fields) in the model
		oFieldObj.oCurrentItem.sCurrentField = "newvalue"; // update current Field
		//optional - bulk update other fields in the same bound model path
		//oFieldObj.oCurrentItem.FieldName1 = "newvalue1"; //replace FieldName1 with the appropriate Fieldname of your bound model
		//oFieldObj.oCurrentItem.FieldName2 = "newvalue2"; //etc.
			
		oFieldObj.oModel.setProperty(oFieldObj.sPath, oFieldObj.oCurrentItem); //bulk data update to model
		//oFieldObj.oModel.refresh(true); //optional statement to re-invoke formatters
	}
},