Creating and displaying Popups in Oracle ADF

Hi all,

This post is about How to Create and display Popups in ADF application. In popups you can display different types of windows like Dialogs, NoteWindow,  Panel window etc etc.

In this post i will show displays popups dialogs by
-  Using  af:showPopupBehavior JSF tag on a Command button
-  Calling Javascript code using af:resource and af:clientlistener

Example Scenario:
In ADF table component when user double click any row a popup dialog will display to show which record the user has clicked. Also the same Action on simple button press. I am using Countries table in HR schema to displaying ADF read only table in a simple JSF page.

I assumed you have created JSF page with Read only table of CountiresView Binding and also has af:commandbutton after the table Form looks like this

Creating Pop-ups:
- Drop af:popup component any where on your JSF Page set its id as "poptable" and ContentType = LazyUncached. (Drop popup at some free facet)
- Drop af:dialog component inside popup component
- Set the property of af:dialog type to OK (to display only OK button in a dialog)  and
- Drop the CountryName field from DataControl to Dialog window
- Delete it ...Yes you read correctly its kind of Trick to create binding we will use it in a different way
- Drop af:outputText in Dialog set the Value to
"You have clicked #{bindings.CountryName} Country"

Your Structure window would be like this

Display popup on button click:
- Drop af:showPopupBehavior on af:commandbutton.
- Set the popId = poptable (our popup name) and type as action.

To display on Double click on table:
- Drop af:clientlistener on af:table component.
- Set the Method name as "showPopupFromAction" (Name of Javascript method we will create this method in a while) and choose type as "dblClick" for double click actions on Table component.
- Drop af:resource tag in your document set the type as javascript and Copy and paste the following code in the source
 Note:The af:resource tag is a way to include CSS and JavaScript in the document.

/** * Shows a popup from an
"action" type event. *
@param {AdfActionEvent}
actionEvent the event being
handled */
function showPopupFromAction(actionEvent) {
actionEvent.cancel();
var eventSource = actionEvent.getSource();
var popup = eventSource.findComponent("poptable");
popup.show();
}

Your structure window would be like this

At runtime Navigate to any record press Show popup button or Double click on record a Popup should display as shown in the slide

Download Working Example
 

Feel free to comment.

Cheers,
Baig