Generic Livechange Event for SAPUI5 Input control

Use cases of this blog/codebase –

  • Validate and Update each character as and when the end-user types each character/digit
  • The need for a generic framework/APIs
  • Re-usable and Scalable codebase

Category: SAPUI5 Development

Code: XML and JavaScript

Files: *.view.xml and *.controller.js or any other utility.js

UI5 Controls:

  • sap.m.Input


  • Change, liveChange


  • Generic API to Validate and Update Input field as and when the end-user types each character
  • Re-usable and Scalable API


Generic LiveChange Event for SAPUI5 Input control – In View.xml Code


Generic LiveChange Event for SAPUI5 Input control – In Controller.js Code

onLiveChangeInputValidate: function(oEvent){ var inputValue = oEvent.getParameter('value').trim(); var newValue = inputValue; //determine the value range that should be allowed var sCondition = oEvent.getSource().data()["liveChangeAllow"]; sCondition = sCondition? sCondition: ""; switch (sCondition){ case 'digits': newValue = newValue.replace(/[^d]/g, ''); break; case 'characters': // /^[A-Za-z]+$/; newValue = newValue.replace(/[d]/g, ''); break; case 'uppercase': newValue = newValue.toUpperCase().replace(/[d]/g, ''); break; case 'lowercase': newValue = newValue.toLowerCase().replace(/[d]/g, ''); break; case 'signfloat': var firstchar = newValue[0]; newValue = newValue.replace(/[^d.]/g, ''); if(firstChar == '-' || firstChar == '+'){ newValue = firstChar + newValue; } break; case 'CUSTOM_RULE': break; default: break; } //determine max length to be allowed var maxLength = oEvent.getSource().data()["liveChangeMaxLength"]; if(maxLength){ newValue = newValue.substring(0,maxLength); } //warn on invalid input var msgOnInvalidInput = oEvent.getSource().data()["liveChangeMsgOnInvalidInput"]; if(msgOnInvalidInput && (newValue != inputValue)){ for(var i=0;i


New NetWeaver Information at

Very Helpfull

User Rating: Be the first one !