JavaScript in ADF
- One of standardway to add Java script to ADF page
- AF:Document -> Facets -Document -> Meta Container
- Meta Container -> insert inside -> adf faces -> Resource & and select type as JavaScript
- Show Alert on some action
- Create javascript function inside af:resource tag
- function displayAlert(event){
alert ("I am from Java Script Function");
} - Call the java script function from adf components(input Text)
- Insert ClientListner inside any adf faces inputText
- Provide the JavaScript function name which is created & select the type(trigger when to invoke the function eg: keyDown, Click.. )
- Java Script function to Toggle - Collapse pannel splitter
- var component = AdfPage.PAGE.findComponent('ps1');
component.getProperty("collapsed");
component.setProperty("collapsed",true); - Toggle the layout between Horizontal and Vertical
- Set ClientComponent property of PageGroupLayout element property to True
- var component = AdfPage.PAGE.findComponent('pg1');
component.setProperty("layout","vertical"); - How to invoke ADF component method defined on button action from JS code
- var component = AdfPage.PAGE.findComponentbyAbsoluteId('button1');
AdfActionEvent.queue(component,component.getPartialSubmit()); - How to open popup in JavaScript
- var popup = AdfPage.PAGE.findComponentbyAbsoluteId('p1');
popup.show(); - Show date popup automatically with out allowing user to enter manually
- function disableInputdate(event){
event.cancel();
} - ClientListner to Call above function on keyPress
- Execute code once the page/document is loaded. JS script inturn executes method in backing bean
- AF:Document-> add Client listner -> provide method name "loadPage" and action as Load
function pageLoad(event){
var source = event.getSource();
AdfCustomEvent.queue(source,"callserver",{},false);
} - JS code to access backing bean code
- AF:Document -> add Server listner -> provide type "callServer" & method from backing bean
- loadPage()
var source = event.getSource();
AdfCustomerEvent.queue(source,"callServer",{},false); - Send Parameter from Client to JS -> backing bean. Show Employee details on double click of dept row
- Add clientListner & serverListner to the table component
- clientListner type is dobleclick & method as tableDBClick
- function tableDBClick(event){
var source = event.getSource();
var name = source.getProperty("deptName");
AdfCustomEvent.queue(source,"calltableserver",{deptName<param>:deptName<value>},false);
} - serverListner type as calltableserver and method as backing method depttabledblclick
- public voice depttabledblclick(ClientEvent clientEvent){
string deptName = clientEvent.getParameters.get("deptName");
showPopup("p2");
} - public void showPopup(String popupname){
StringBuilder strb = new StringBuilder("AdfPage.PAGE.findComponentbyAbsoluteId(\""+popupname+"\ ").show();");
FacesContext fctx = FacesContext.getCurrentInstance();
ExtendedRenderKitService erks = Service.getRenderKitService(fctx,ExtendedRenderKitService.class);
erks.addScript(fctx,strb.toString());
}
} - Add clientAttribute to the table component to send parameter to JS method
<af:clientAttribute name="deptName" value = "#{row.departmentId}"> - Backingbean Method
- User ENTER to navigate to next field
- function tabIndex(event){
var code = event.getKeyCode();
var component = event.getSource();
if (!e){
var e= window.event;
if e.shiftKey{
if (code==13){
event.cancel();
var prevComponent = AdfPage.PAGE.findComponentbyAbsoluteId(component.getProperty("prevComponentId"));
prevComponenet.focus();
}}
else if (code==13){
event.cancel();
var nextComponent = AdfPage.PAGE.findComponentbyAbsoluteId(component.getProperty("nextComponentId"));
nextComponenet.focus();
}} - Compare values in 2 input fields
- <![CDATA[
function checkvalue(event){
var output1 = document.getElementById("it5::content");
var output2 = document.getElementById("it6::content");
output1.value == output2.value then.....
}
]]> - How to find component id
- af:Document -> properties -> initial focus id -> point to your document to get the ID
