Help me in creating a pop-up.

Question

Hi,
Iam new to ADF.I have to insert a column in an existing Employee table and in that column i have to provide a link for each row of employee,clicking on the link i should get the complete details of the employee as a pop-up.Can anyone please help me in doing this.
Thanks in advance for your help.

Answer 1

Below is the detailed step by step implementation for your use-case.
1) From the data control palette, drag and drop the EmployeesVO as a table. Ensure that the table selection is single. Select only the required columns that are to be shown as part of the table.
2) Create an additional column having a commandLink that is used for showing the popup with showpopupbehaviour embedded to launch the popup. Ensure that the commandLink has the partialSubmit property set to true.
3) Create a popup and set the contentDelivery property to lazyUncached. Add a dialog to the popup. Inside the dialog, drag & drop the employeesVO as a form having all the fields.
Below is the code snippet for the same.
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:messages id="m1"/>
<af:form id="f1">
*<af:table value="#{bindings.Employees.collectionModel}" var="row"*
*rows="#{bindings.Employees.rangeSize}"*
*emptyText="#{bindings.Employees.viewable ? 'No data to display.' : 'Access Denied.'}"*
*fetchSize="#{bindings.Employees.rangeSize}"*
*rowBandingInterval="0" id="t1" rowSelection="single"*
*selectionListener="#{bindings.Employees.collectionModel.makeCurrent}"*
*selectedRowKeys="#{bindings.Employees.collectionModel.selectedRow}">*
<af:column sortProperty="FirstName" sortable="false"
headerText="#{bindings.Employees.hints.FirstName.label}"
id="c1">
<af:outputText value="#{row.FirstName}" id="ot2"/>
</af:column>
<af:column sortProperty="LastName" sortable="false"
headerText="#{bindings.Employees.hints.LastName.label}"
id="c2">
<af:outputText value="#{row.LastName}" id="ot1"/>
</af:column>
<!-- ADDITIONAL COLUMN TO OPEN THE POPUP-->
*<af:column sortable="false" headerText="#{'Show Details'}" id="c3">*
*<af:commandLink text="#{'Show Details'}" id="cl2"*
*partialSubmit="true">*
*<af:showPopupBehavior popupId="::p1" triggerType="action"/>*
*</af:commandLink>*
*</af:column>*
</af:table>
<!-- POP UP -->
*<af:popup id="p1" contentDelivery="lazyUncached">*
*<af:dialog id="d2" title="Employee Details">*
<af:panelFormLayout id="pfl1">
<af:panelLabelAndMessage label="#{bindings.EmployeeId.hints.label}"
id="plam8">
<af:outputText value="#{bindings.EmployeeId.inputValue}"
id="ot12">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeeId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.FirstName.hints.label}"
id="plam3">
<af:outputText value="#{bindings.FirstName.inputValue}"
id="ot4"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.LastName.hints.label}"
id="plam6">
<af:outputText value="#{bindings.LastName.inputValue}"
id="ot13"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Email.hints.label}"
id="plam10">
<af:outputText value="#{bindings.Email.inputValue}" id="ot5"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.PhoneNumber.hints.label}"
id="plam11">
<af:outputText value="#{bindings.PhoneNumber.inputValue}"
id="ot10"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.HireDate.hints.label}"
id="plam5">
<af:outputText value="#{bindings.HireDate.inputValue}" id="ot9">
<af:convertDateTime pattern="#{bindings.HireDate.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.JobId.hints.label}"
id="plam9">
<af:outputText value="#{bindings.JobId.inputValue}" id="ot8"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.Salary.hints.label}"
id="plam1">
<af:outputText value="#{bindings.Salary.inputValue}" id="ot6">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.Salary.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.CommissionPct.hints.label}"
id="plam7">
<af:outputText value="#{bindings.CommissionPct.inputValue}"
id="ot11">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.CommissionPct.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.ManagerId.hints.label}"
id="plam2">
<af:outputText value="#{bindings.ManagerId.inputValue}"
id="ot7">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.ManagerId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.DepartmentId.hints.label}"
id="plam4">
<af:outputText value="#{bindings.DepartmentId.inputValue}"
id="ot3">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.DepartmentId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:dialog>
</af:popup>
</af:form>
</af:document>
</f:view>
</jsp:root>
Thanks,
Navaneeth