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.

/*===========================================================================+
 |   Copyright (c) 2001, 2005 Oracle Corporation, Redwood Shores, CA, USA    |
 |                         All rights reserved.                              |
 +===========================================================================+
 |  HISTORY                                                                  |
 +===========================================================================*/
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