How to show a popup in JSPX page from a Managed Bean method

Usecase: The scenario is to perform the validation in the Managed bean method and in cases when it does not satisfy few conditions, we need to show up message in the popup to the User. To achieve this follow the below steps –

1) Drag and drop the Popup component from Common Components palette as shown below –

The below code will be added into your JSF page –

<af:popup id=”popupId” contentDelivery=”immediate”>
</af:popup>

For now when the popup is displayed it will be displayed empty as it does not have any items to display. You can add any other components to it. In my case I added the <OutputText> label to display the message as shown below –

<af:popup id=”popupId” contentDelivery=”immediate”>
                <af:outputLabel value=”You can only search with 11 available parameters.” id=”ol2″
                                inlineStyle=”color:Red; font-size:small; text-align:center; vertical-align:middle; background-color:rgb(198,198,198);”/>
 </af:popup>

2)  Drag and drop a CommandButton from the Common components into your JSF page.

<af:commandButton text=”commandButton 1″ id=”cb1″ action=”ManagedBean.InvokePopup”/>

InvokePopup is the method implemented in the ManagedBean.

3) Now create a Method “InvokePopup” in the managed bean as below –

Public void InvokePopup(){
DisplayPopup(“popupId”);
}
  public void DisplayPopup (String popupId){
    FacesContext context = FacesContext.getCurrentInstance();
    ExtendedRenderKitService extRenderKitSrvc =
    Service.getRenderKitService(context, ExtendedRenderKitService.class);
    extRenderKitSrvc.addScript(context,
    “AdfPage.PAGE.findComponent(‘” + popupId + “‘).show();”);
  }
 

4) In the above code we have a DisplayPopup() method, which can be reused to display multiple popup in the Page. We need to pass the Id value of the popup form the JSP page to this method. In my case the Id value is “popupId”.

5) By this you will be able to view the popup in the JSF page when you click the CommandButton.

6) If you want to modify the popup size (width & height), you can do it as similar by placing the layouts inside the Popup.

Now you will be able to display the popup in the JSPX from the Managed bean.

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

4 Responses to How to show a popup in JSPX page from a Managed Bean method

  1. reesh says:

    This does not work!

    • udayarocks says:

      Hi Reesh,
      This works well for me.

      I’m not sure what went wrong in your implementation. Can you please tell me the error message if any.

      I will try solve your problem.

      Thanks,
      Udaya

  2. dewi says:

    It doesn’t work udaya,, I don’t have any error
    but popup cannot show.
    Maybe there is something missing in that method.
    Can you help me ??

  3. arafat says:

    i think this line of code extRenderKitSrvc.addScript(context,
    “AdfPage.PAGE.findComponent(‘” + popupId + “‘).show();”);

    should be
    extRenderKitSrvc.addScript(context, “AdfPage.PAGE.findComponent(\”” + popupId + “\”).show();”);

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s