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

<!-- important to add xmlns:customData --> <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:customData="" controllerName="zlocal.view1" xmlns:html=""> <Page title="Title"> <content> <Label text="Account Number (Expected: Number only; max length = 6)" /> <Input value="" tooltip="tooltip text" customData:liveChangeAllow="digits" customData:liveChangeMsgOnInvalidInput="# is not allowed" customData:liveChangeMaxLength="6" liveChange="onLiveChangeInputValidate"/> <Label text="Account Name (Expected: Alphabets only; max length = unlimited)"/> <Input value="" tooltip="tooltip text" customData:liveChangeAllow="characters" customData:liveChangeMsgOnInvalidInput="# is not allowed" customData:liveChangeMaxLength="" liveChange="onLiveChangeInputValidate"/> <Label text="5 characters - Uppercase Only" /> <Input value="" tooltip="tooltip text" customData:liveChangeAllow="uppercase" customData:liveChangeMsgOnInvalidInput="# is not allowed" customData:liveChangeMaxLength="5" liveChange="onLiveChangeInputValidate"/> <Label text="5 characters - Lowercase Only" /> <Input value="" tooltip="tooltip text" customData:liveChangeAllow="lowercase" customData:liveChangeMsgOnInvalidInput="# is not allowed" customData:liveChangeMaxLength="5" liveChange="onLiveChangeInputValidate"/> </content> </Page> </core:View> 

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<inputValue.length; i++){ if(newValue[i] != inputValue[i]){ msgOnInvalidInput = msgOnInvalidInput.replace('#', inputValue[i]); if((sCondition == "uppercase" || sCondition == "lowercase") && newValue[i] && (newValue[i].toString().toUppercase == inputValue[i].toString().toUppercase)){ msgOnInvalidInput = "auto-converted to " + sCondition; } if(i == maxLength){ msgOnInvalidInput = 'Exceeds max length:' + maxLength; } //alert(msgOnInvalidInput); oEvent.getSource().setValue(newValue); oEvent.getSource().setValueState("Warning"); oEvent.getSource().setValueStateText(msgOnInvalidInput); break; } } }else{ oEvent.getSource().setValue(newValue); oEvent.getSource().setValueState("None"); oEvent.getSource().setValueStateText(""); } },


New NetWeaver Information at

Very Helpfull

User Rating: Be the first one !