How to display one JSPX page as a popup in another JSPX page

To show up the JSPX page as a popup follow below steps –

1) Create two pages say MainPage.jspx and popupPage.jspx.

2) If you had defined any specific task flow for your module (if not you can use faces-config.xml), you can drag and drop both JSPX pages into the task flow.

3) Define the Navigation rule from  MainPage.jspx to popupPage.jspx and name it like “dialog:popupPage”. Dialog is must in the name.

4) Now in MainPage.jspx, define below attributes on any element which ever accepts –



For example in my case I want to show a popup when I clicked on the link so I had used below code to achieve this –

<af:commandLink text=”#{row.SampleExpenditures}”

In the above code the action attribute value is same as the navigation rule name defined between the MainPage.jspx and popupPage.jspx in the task flow or faces-config.xml file. The attributes  windowEmbedStyle,  windowModalityType,  windowHeight and  windowWidth define the popup window height and width. If we want to call any managed bean method we need to use the actionListener attribute. In my case I had defined a managed bean with pageFlowScope in the taskflow so I invoked my method from the managed bean whenever I clicked the link.

This entry was posted in ADF (Application Development Framework) and tagged , , , , . Bookmark the permalink.

8 Responses to How to display one JSPX page as a popup in another JSPX page

  1. Sreedhar says:

    can we achieve the same thing through taskflows ?is it possible?

  2. Sri says:

    How to close the pop up dialog on a button click (which inside popup)?


  3. Thanh Hoang says:

    Can we do it programmatically ?

  4. Thanh Hoang says:

    Yes, Can you post how to achieve it?

    Thanks alot,
    Thanh Hoang

    • udayarocks says:

      HI Thanh,

      To display the POPUP programmatically you can call the ACTION attribute from the commandButton ActionListener method in the Managed Bean.

      IN JSPX page

      IN Managed Bean

      public void invokeActionListr(ActionEvent actionEvent){

      //To programtically invoke the ACTION attribute to show the popup as dialog
      Application application = context.getApplication();
      NavigationHandler navHandler = application.getNavigationHandler();
      navHandler.handleNavigation(context, null, “dialog:popupPage”);

      This works for me well.

      I hope the above code meets your purpose.

      Please let me know if you have any issues.


      • udayarocks says:

        HI Thanh,

        Not sure why the “IN JSPX Page” section does not display the code in the above reply –

        af:commandButton text=”Print Cover Page” id=”cb1″
        inlineStyle=”width:120px; font-size:12.0px;”
        windowHeight=”650″ windowWidth=”1000″

  5. Thanh Hoang says:

    First of all, thanks for your solution.
    I used your suggestion, it’s OK, but i have an issue, I cannot programmatically change size of dialog framework (because we use “dialog:” as prefix of action String). I’ve searched this for a long time, and I got no solution to change dialog framework size programmatically.
    So currently, I have to use af:popup to show dialog, we can easily change size by code.
    If you have any ideas for changing size, position of dialog framework, Please let me know.

    Thanks and Best Regards!
    Thanh Hoang

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s