OAF: How to invoke Javascript in Oracle Applications Framework

In this post, I will show few options to invoke javascript from OA Framework pages.

Before showing the options, I will just copy paste the note relating to javascript from the OAF Developer Guide.

"UIX and the OA Framework are rapidly adding new features to provide a more interactive user experience (partial page rendering, automatic table totaling, and so on). You are certainly encouraged to leverage these features as they are released, however, you should not attempt to implement them yourself before they're ready. 

As a customer, you may add your own Javascript code to OA Framework applications through controller customizations using setter methods for Javascript events that are exposed on form web beans such as check boxes, text inputs, and so on. However, as with any customization, Oracle does not support or entertain bugs on such custom Javascript usage. As a customer, it is your responsibility to certify your custom Javascript code, ensuring that it does not break the functionality of the page and is compliant with usability, security and browser standards."

• Specify the javascript code directly on the bean.

In the below example I have specified a javascript alert on the onLoad event of the OABodyBean.

 OABodyBean bodyBean = (OABodyBean) pageContext.getRootWebBean();  
 String javaScriptStr = "javascript:alert('Javascipt invoked on PageLoad');";  
 bodyBean.setOnLoad(javaScriptStr);  

• Attach the javascript function into the page using a RawTextBean.

We create a OARawTextBean in the page declaratively/programmatically and attach a javascript method as the Text property of the Bean. You can attach any number of javascript functions.Then you can call the methods in that anywhere in the page. In the below example I am calling the js function from a Button click.

 String jsStr = "<script>                                          "+  
                "    function submitCustomOnClick()                "+  
                "    {                                             "+  
                "       alert('Custom On Click invoked [RawText]');"+  
                "    }                                             "+  
                "</script> " ;  
 OARawTextBean rawTextBean = (OARawTextBean)createWebBean(pageContext, "RAW_TEXT", null, null);  
 rawTextBean.setText(jsStr);  
 webBean.addIndexedChild(rawTextBean);
  
 OAButtonBean buttonBean = (OAButtonBean)webBean.findChildRecursive("jsButton");  
 buttonBean.setOnClick("submitCustomOnClick();");  

• Attach the javascript function into the page using putJavaScriptFunction() method.

You can attach one javascript function to the page using this function. Once added to the page, you can call from any bean in the page.

 String customJSFunction = "function customJSFunc(){ alert('Custom On Click invoked [putJavaScriptFunction]'); }";  
 pageContext.putJavaScriptFunction("customJSFunc",customJSFunction);
  
 OAButtonBean buttonBean = (OAButtonBean)webBean.findChildRecursive("jsButton");  
 buttonBean.setOnClick("customJSFunc();");  

• Create a .js file and attach the file to the page using putJavaScriptLibrary() method.

If you need to use many javascript functions, or you want to use same function in multiple pages, then you can create a .js file and put all the functions inside this file. You need to place this file under $OA_HTML. You can create a subfolder inside the $OA_HTML and put the file(s) inside that. You can then specify the file using the putJavaScriptLibrary() function.

The above file CustomJavaScript.js placed in a folder called customJS under $OA_HTML.

 pageContext.putJavaScriptLibrary("CustomJSLibs", "customJS/CustomJavaScript.js");  
 OAButtonBean buttonBean = (OAButtonBean)webBean.findChildRecursive("jsButton");  
 buttonBean.setOnClick("methodFromJSFile();");  

• You can also call javascript using the setAttributeValue, ex :- ON_CLICK_ATTR

 OAButtonBean buttonBean = (OAButtonBean)webBean.findChildRecursive("jsButton");  
 buttonBean.setAttributeValue(oracle.cabo.ui.UIConstants.ON_CLICK_ATTR, "alert('Custom On Click invoked [ON_CLICK_ATTR]');" );  

Related: Mukul's Oracle Technology Blog: JavaScript In OA Framework

Feel free to point out if anything is missing/wrong in this blog