ADF 11g RichFaces – Details popping up all around us – Quick introduction to the ADF 11g Popup component



One of the valuable new components available in ADF 11g RichFaces is the Popup component. While one must be careful not to overuse all the new tools in the RichFaces library, there seem to be several use cases for the Popup. And using the Popup component is really easy. In this article I will demonstrate how ridiculously simple it is.

We create a table that displays Departments. On this table, we make the option available to display a popup with the Employee details for the currently selected Department. In general, this is a very easy way of providing additional information about a row in a table without having to navigate to another page or sacrificing a lot of real estate on the page to details that are only sometimes required.

Our starting point is an ADF Application with two projects – a Model project with the DEPT/EMP based ViewObjects set up and a ViewController project without any content. The steps then are:

1. create a new JSF page: DeptEmpWithPopup.jspx

2. drag EmployeesInDepartment (child Employees collection under AllDepartments) from Data Control palette to the new page; drop as Master Table/Detail Table

After the drop, the page looks like:


3. Run the page

So far nothing new. Now we want to wrap the Employee details in a popup that is opened on request.

4. Wrap the Employees table in a popup and a panelWindow component

          <af:popup id="Employees">
            <af:panelWindow title="EmployeesInDepartment"
              <af:table partialTriggers="DeptCollectionPanel:masterDetail1"

Note the partialTriggers attribute for the table – the string DeptCollectionPanel: was added since the master table is to be wrapped in a naming container – panelCollection – called DeptCollectionPanel.

5. Wrap the Departments table in a panelCollection component

          <af:panelHeader text="AllDepartments" inlineStyle="height:188px;">
            <af:panelCollection id="DeptCollectionPanel">
              <f:facet name="menus"/>
              <f:facet name="toolbar"/>
              <f:facet name="statusbar"/>
              <af:table id="masterDetail1"

6. Add a toolbar to the panelCollection’s toolbar facet; add a commandToolBarButton to the toolbar; add a showPopupBehavior component to the latter. set the popupId attribute to refer to the popup that contains the Employees table and set the trigger type to click to have the popup opened when the button is clicked on

          <af:panelHeader text="AllDepartments" inlineStyle="height:188px;">
            <af:panelCollection id="DeptCollectionPanel">
              <f:facet name="menus"/>
              <f:facet name="toolbar">
<af:commandToolbarButton text="Display Details Popup">
<af:showPopupBehavior popupId=":Employees"
<f:facet name="statusbar"/> <af:table id="masterDetail1" rows="#{bindings.AllDepartments.rangeSize}"

7. Run the page – and after a little tweaking the width and height of the table components involved, it will look like this:


when you navigate through the Departments table, the popup contents are immediately synchronized.


Download JDeveloper 11g Application: .

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.

Comments are closed.