Requirement: Convert af:inputText value to upperCase, lowerCase, and capitalize(initCap) by using Java Script in ADF

Solution: For solution to the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create a demoPage.jspx page in the ViewController project of our application.

Step 3: Open demoPage.jspx page. Add threeaf:inputText by drag and drop from the component palette on thedemoPage.jspx. For the first af:inputText set the label=”First Name” and clientComponent=”true”. Drag and drop af:clientListener from the component palette inside the first af:inputText and set method=”toUpperValue” and type=”blur”.

Similarly,for the second af:inputText set the label=”Middle Name” and clientComponent=”true”.Drag and drop af:clientListener from the component palette inside the second af:inputText and set method=”toLowerValue” and type=”keyUp”.

Similarly,for the third af:inputText set the label=”Last Name” and clientComponent=”true”. Drag and drop af:clientListener from the component palette inside the second af:inputText and set method=”toInitCap” and type=”keyDown”.

Step 4: Right click ViewController project of our application and create a demo.js. Write the codes for toUpperValue , toLowerValue, and  toInitCap  as shown below:

function toUpperValue(event) {
	var inputComponent = event.getCurrentTarget();
	var componentId = event.getSource().getClientId();
	var value = inputComponent.getSubmittedValue();
	if (value != null && value != '') {
		document.getElementById(componentId + '::content').value = value
				.toUpperCase();
	}
}

function toLowerValue(event) {
	var inputComponent = event.getCurrentTarget();
	inputComponent.setValue(inputComponent.getSubmittedValue().toLowerCase());
}

function toInitCap(event) {
	var inputComponent = event.getCurrentTarget();
	var componentId = event.getSource().getClientId();
	var value = inputComponent.getSubmittedValue();
	if (value != null && value != '') {
		document.getElementById(componentId + '::content').value = value
				.charAt(0).toUpperCase()
				+ value.substr(1).toLowerCase();
	}
}

Thus, the complete demo.js file is shown below:

Step 5: Open demoPage.jspx and drag and drop af:resource  from the component palette and place it in between af:document  and af:form. Set the type=”javascript” and source=”resources/js/demo.js”.

Thus, the complete demoPage.jspx page is shown below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1"
	xmlns:f=""
	xmlns:af="">
	<jsp:directive.page contentType="text/html;charset=UTF-8" />
	<f:view>
		<af:document title="demoPage" id="d1">
			<af:resource type="javascript" source="resources/js/demo.js" />
			<af:form id="f1">
				<af:inputText label="First Name" id="it1" clientComponent="true">
					<af:clientListener method="toUpperValue" type="blur" />
				</af:inputText>
				<af:inputText label="Middle Name" id="it2" clientComponent="true">
					<af:clientListener method="toLowerValue" type="keyUp" />
				</af:inputText>
				<af:inputText label="Last Name" id="it3" clientComponent="true">
					<af:clientListener method="toInitCap" type="blur" />
				</af:inputText>
			</af:form>
		</af:document>
	</f:view>
</jsp:root>

Step 6: Save all and run the application . Thus the ran application is shown below:

Now type First Name as Susanto,Middle Name as KUMAR, and Last Name as PAUL. So, irrespective of the case we enter in the various af:inputText, the First Name is displayed as SUSANTO, Middle Name as kumar and Last Name as Paul as shown below:

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 486 total views,  1 views today