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

<!-- important to add xmlns:customData -->
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
controllerName="zlocal.view1" xmlns:html="http://www.w3.org/1999/xhtml">
<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("");
	}
},