PopUp component in Oracle ADF, Use showPopUpBehavior/JavaScript to show PopUp

Sharing is Caring

In this tutorial, we will see that how to use PopUp component in Oracle ADF. Popup is a secondary user interface that opens on the base of the primary page on some event and is used for designing more interactive applications.
Suppose we want to show a popup on any button click or on any other action, then there is 2 way to do this.

First Method –

1. Drag a PopUp component on the page from Component Palette

Popup component in Oracle ADF

2. Now Drag a Button on the page and drag af:showPopupBehavior under the button

af:showPopupBehavior to show popup

3. Select af:showPopupBehavior at page structure, go to property Inspector and select the popup id of Popup that you want to show on button click and set trigger type property

4. Now run your page and click on Button and you will able to see Popup

Second Method –

In this you have to do some code in Managed Bean, you have to call a method on button click to show Popup. This method internally calls some javascript code and invokes the popup component

Method to show Popup-

    private void showPopup(RichPopup pop, boolean visible) {
        try {
            FacesContext context = FacesContext.getCurrentInstance();
            if (context != null && pop != null) {
                String popupId = pop.getClientId(context);
                if (popupId != null) {
                    StringBuilder script = new StringBuilder();
                    script.append("var popup = AdfPage.PAGE.findComponent('").append(popupId).append("'); ");
                    if (visible) {
                        script.append("if (!popup.isPopupVisible()) { ").append("popup.show();}");
                    } else {
                        script.append("if (popup.isPopupVisible()) { ").append("popup.hide();}");
                    ExtendedRenderKitService erks =
                        Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
                    erks.addScript(context, script.toString());
        } catch (Exception e) {
            throw new RuntimeException(e);

Now we call it on button click and pass the binding of Popup in it
as we have Popup with component binding AddPop then on Button click we call this method as

showPopup(Addpop, true);

Cheers 🙂 Happy Learning

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *