Sunday, 22 May 2016

Convert af:inputText value to upperCase, lowerCase, and initCap using JavaScript in ADF

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="http://java.sun.com/JSP/Page" version="2.1"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
       <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:
Thus, the solution to our requirement.
If you like the post, then comment, share and do like me on Facebook.

Thanks & Regards,
Susanto Paul