JavaScript in OAF page

Often we come across the requirements in OAF where we need to use JavaScript to
handle the UI events at run time. For example if you want to know the count of
characters you have filled in a Text box or a warning Alert to popup to user.

For a UI developer it is a child's play as they manipulate the HTML tags directly and
provide desired UI functionality to the page with JS or Angular but for an OAF
developer hardly they ever touch HTML or JS in OAF pages due to its closed box
nature. So let's see how the Pages are formed in OAF.

In OAF view is Implemented using UIX technology i.e. we define the structure of a
Pages in XML file, these XML files will be translated into HTML pages at run time
by OA Framework. So we can never directly manipulate the HTML code of the page
as we hardly have any control on it. Thus if we want to attach some JavaScript
function to the page we need to define it in the Controller Class using given API.

Let's consider a scenario here where I have to display the count of characters entered
in the text box. First we will create an HTML page for this and will test it, below is
the code for the same. In the below code there are two elements, One is a text box and
other is just a span element like Styled text in OAF. I am referring the text area
HTML element and counting the characters in it. The fetched value is being set in
span element. This method will be called on the keyup, keydown and mouseout
events. (If you dont know the events on HTML Elements you can refer W3Schools )

<script type="text/javascript">
function cntRemaingChars() {
var len = document.getElementById("description").value.length;
 document.getElementById("RemainingChars").innerHTML = len+"
characters entered";
}

</script>

<textarea id="description" cols="40" rows="5"

onkeyup="cntRemaingChars();" onkeydown="cntRemaingChars();"
onmouseout="cntRemaingChars();"></textarea>
<br>
<span id="RemainingChars">0</span>

Now once you have tested the Word count logic in HTML Browser we can
Implement the same in our CO Method ProcessRequest() as given below. 3
steps are followed to achieve that.
1. Declare the JavaScript in a String and embed same into page by calling
method defined in Interface OAPageContext
2. Find the webBean on which you want to put the event on which the function
should be called. To put the events we will UIConstants, this Interface has all
the HTML page events defined in it.

+=================================================================
==========*/
package xxcust.oracle.apps.amt.test;

import oracle.apps.fnd.common.VersionInfo;
import oracle.apps.fnd.framework.OAApplicationModule;
import oracle.apps.fnd.framework.OAException;
import oracle.apps.fnd.framework.server.OADBTransactionImpl;
import oracle.apps.fnd.framework.webui.OAControllerImpl;
import oracle.apps.fnd.framework.webui.OAPageContext;
import oracle.apps.fnd.framework.webui.beans.OAWebBean;
import oracle.apps.fnd.framework.webui.beans.message.OAMessageTextInputBean;
import oracle.cabo.ui.UIConstants;

/**
* Controller for ...
*/
public class test extends OAControllerImpl {
public static final String RCS_ID = "$Header$";
public static final boolean RCS_ID_RECORDED =
VersionInfo.recordClassVersion(RCS_ID, "%packagename%");

/**
* Layout and page setup logic for a region.
*
* @param pageContext the current OA page context
* @param webBean the web bean corresponding to the region
*/
public void processRequest(OAPageContext pageContext, OAWebBean webBean) {
super.processRequest(pageContext, webBean);

// Declare a JavaScript function in a String

String customJSFunction = "function cntRemaingChars() {\n" +
" var len = document.getElementById(\"Description\").value.length;\n" +
" document.getElementById(\"CountChars\").innerHTML = len+\" characters
left\";\n" +
"}";

pageContext.putJavaScriptFunction("cntRemaingChars", customJSFunction); // Embed

JavaScript function in the page

// Find the element on which you want to set the events for JavaScript function call.
OAMessageTextInputBean log = (OAMessageTextInputBean)
webBean.findIndexedChildRecursive("Description");
log.setAttributeValue(UIConstants.ON_KEY_DOWN_ATTR, "cntRemaingChars();");
log.setAttributeValue(UIConstants.ON_KEY_UP_ATTR, "cntRemaingChars();");
log.setAttributeValue(UIConstants.ON_MOUSE_OUT_ATTR, "cntRemaingChars();");

/**
* Procedure to handle form submissions for form elements in
* a region.
*
* @param pageContext the current OA page context
* @param webBean the web bean corresponding to the region
*/
public void processFormRequest(OAPageContext pageContext, OAWebBean webBean) {
super.processFormRequest(pageContext, webBean);
}
}

Now as we have set the JavaScript in the page and the event on which to call it. Let's
run the page.
Now in another Scenario we want to show a popup to user when the GO button is
clicked. This can be achieved in Multiple ways, we can create the JS String and assign
it to the button's OnClick event. Instead of assigning string you can directly write it as
well as shown in below code.

Note : We don't need to create function for alert as alert() is a JS function

String showPopup = "alert(\"Hello! I am an alert box!!\");"; //
declare JS Alert

OASubmitButtonBean btn = (OASubmitButtonBean)

webBean.findChildRecursive("GoBtn");
btn.setAttributeValue(UIConstants.ON_CLICK_ATTR, showPopup); // Give
Alert

//btn.setAttributeValue(UIConstants.ON_CLICK_ATTR, "alert(\"Hello! I
am an alert box!!\");"); // Give Alert

Or we can pass the JS String to setOnClick method which will take care of it.

String showPopup = "alert(\"Hello! I am an alert box!!\");"; //

declare JS Alert

OASubmitButtonBean btn = (OASubmitButtonBean)

webBean.findChildRecursive("GoBtn");
btn.setOnClick(showPopup); // Give Aler