How to Create Popup Using ADF

This blog explains about creating a simple popup using ADF

Scenario : Display a popup by clicking on button

Implementation

 - Drag the 'popup' component from component pallet to page/page fragment
 - Drag the 'dialog' component from the component pallet to page/page fragment
 - You can define whatever components you want on this dialog, Even you can drag the taskflow as a region on it.
- Below is how source code looks like

- Drag the 'ShowPopupBehavior' component from the component pallet on to 'button'
- Define the popupId attribute, In this example, popup ID value is 'p1' as per above screen shot.

- Run the page, you will see the button as shown below

- Click on the button, below is the screenshot for popup window how it displayed

Below section explains, about how you can invoke popup programatically based on some condition

// Below is the code to get the RichPopup component in backing bean

            RichPopup popup =
                (RichPopup)JSFUtils.findComponent("p1");
            if (popup != null) {
                  // Hid the popup
                  popup.hide();
            }

             // Here is the code to show popup.
             popup.show(new RichPopup.PopupHints());

// Define <af:outputText> in <af:dialog> and bind the value of this property to backing bean, and set whatever message you want to display based on some specific condition in backing bean.

Also, You can bind the 'title' attribute of <af:dialog> component to backing bean , Get the dialog component using findComponent() method and set whatever the title you want to display.

popupFetchListener : Bind this attribute to any backing bean method in order to invoke any functionality while loading the popup

dialoglistener : This attribute belongs to <af:dialog> component, Bind this attribute to any backing bean method , in order to execute code upon any action(Ok, Cancel, Yes, No, etcc)  performed on a popup

 public void doCancel(DialogEvent dialogEvent) {
        Outcome outcome = dialogEvent.getOutcome();
        if (Outcome.yes == outcome) {
            
        }
    }

How to programatically hide and show the popup in ADF ?

 - Get the Popup UI component instance i.e RichPopup
 - empPopup.show(new RichPopup.PopupHints());
- To Hide : empPopup.hide()

Refer below blog for findComponent() implementation

http://fortunefusionminds.blogspot.com/2012/07/how-to-get-ui-component-in-backing-bean.html

- You can customize the popup the way you want, mouse hover, value change, on focus, etc..

Here is more documentation about popup

http://docs.oracle.com/cd/E21764_01/apirefs.1111/e12419/tagdoc/af_showPopupBehavior.html

http://docs.oracle.com/cd/E17904_01/apirefs.1111/e12419/tagdoc/af_popup.html