Requirement: I have a demo.jspx page. On that page I have a table displaying the Employees data. The EmployeeId column in the table should be the hyperlink. Now, when I click on the EmployeeId hyperlink it should open a popup and in that popup it will display the entire details of that particular Employee whose EmployeeId we clicked on the table.

For demonstration purpose we will be using the Employees table of the HR schema of the Oracle database XE.

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create an ADF Business Components from table for the Employees table. We will create the Entity Object, View Object and the Application Module as shown below:

Step 3: Open ViewController project of our application and create a demo.jspx page. Drag and drop EmployeesVO1 from the AppModuleDataControl as an ADF table. Select the Row Selection as Single Row and Read-Only Table.

By default the the EmployeeId will be displayed as an af:outputText as shown below. But we want the EmployeeId to be displayed as an af:commandLink so that whenever we click on the EmployeeId link it will invoke one popup containing the details for that particular clicked EmployeeId. Thus, the default created EmployeeId column is shown below:

Now, we will convert the af:outputText for the EmployeeId column to af:commandLink as shown below:

We can see that it has some error. Now to remove that error we will simply remove the af:convertNumber and replace value with text as af:commandLink does not have value properties as shown below:

Step 4: Now, drag and drop af:popup from the component palette inside the demo.jspx page. Also drag and drop af:panelWindow from the component palette inside the af:popup as shown below:

Now, drag EmployeesVO1 from the AppModuleDataControl inside the af:panelWindow as an ADF Form and also click No in the Confirm Add Form Element window as we don’t want to add extra af:form tag.

Drag and drop af:showPopupBehavior from the component palette inside the af:commandLink and change triggerType=”click” as shown below:

Save all and run the demo.jspx page. Thus, the demo.jspx in the browser will look like as shown below:

Now, when we click on the EmployeeId 100 it opens a popup with the details of an Employee with an EmployeeId as 100 as shown below:

Now when we click on the EmployeeId 121 it opens a popup with the details of an Employee with an EmployeeId as 121 as shown below:

Note: In certain cases it may happen that the value inside the popup is not changing each and every time we click on the EmployeeId link in the Employees table. In that case we do two things:

* Set the partial trigger property for the af:panelWindow to refer to the af:table
* Set the partial trigger property for the af:panelFormLayout to refer to the af:table

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 483 total views,  2 views today