SAP UI5 – Simplified Utility Framework APIs – Input LiveChange Validate and Update

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

Events:

• Change, liveChange

Advantages:

• 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