Generic Change or Select Event for SAPUI5 Input controls, SAP UI5 – Simplified Utility Framework APIs

SAP UI5 – Simplified Utility Framework APIs: 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 } },

New NetWeaver Information at SAP.com

Very Helpfull

 

 

User Rating: Be the first one !