Requirement: Let us assume we have an af:table displaying the Employees data. Now, just above the af:table displaying the Employees data, we have a Search Panel. Inside that Search Panel we will have four fields: Employee ID, First Name, Email, and Salary. Also, we will have two buttons: Search and Reset.
Now, when User provides value in either or in all of the Employee ID, First Name, Email, and Salary field and click on Search button, it will search for those data and display it in the Employees table.
When, User clicks on the Reset button it should clear values from all of the Employee ID, First Name, Email, and Salary field and also make the Employees table displaying it’s original values.
Sample screen is shown below:
Pre-requisites: For demonstration purpose we will be using the EMPLOYEES table present inside the HR schema of the Oracle Database 11g XE Edition.
Solution: For solution of the above requirement follow the steps as shown below:
Step 1: Create an Oracle ADF Fusion Web Application. Create a Business Components from Tables (EO, VO, and AM) for the Employees table.
Create the AppModuleImpl class
Step 2: Let me create a Read-Only View Object from a Custom SQL Query. The name of this View Object is EmployeesSearchRVO.
The SQL query for the EmployeesSearchRVO is shown below:
SELECT
'' employee_id,
'' first_name,
'' email,
'' salary
FROM
dualMake sure that the Updateable properties is set as Always for all these attributes.
This EmployeesSearchRVO from dual is created to be used as Search form on page.
Now to make search effective on EmployeesVO, let me create an EmployeesVOCriteria based on four bind variables for corresponding fields in EmployeesVO. These four bind variables are: EmployeeId_Bind, FirstName_Bind, Email_Bind, and Salary_Bind
Thus, the four bind variables are: EmployeeId_Bind, FirstName_Bind, Email_Bind, and Salary_Bind will be attached to the EmployeesVOCriteria as shown below:
Now, go to the AppModule > Click on Data Model > Click on the EmployeesVO1 View Instance > Click on Edit button
Shuttle EmployeesVOCriteria from Available (Left) to the Selected(Right) side.
Step 3: Create a demo.jspx page in the ViewController project. This EmployeesVOCriteria will be executed each time when the value of bind variable is changed, now this is the time to set the value of bind variables, so I have dragged EmployeesSearchRVO1 as a form on the page, and added two buttons for Search and Reset
Step 4: To view Search Result, drag and drop EmployeesVO1 as a table on the demo.jspx page.
Thus, the demo.jspx will now look as shown below:
Step 5: Now to get value from each of the Search fields: Employee ID, First Name, Email, and Salary, let me create binding for all four fields in the MyBean.java class.
Create an ActionListener with the name as searchAL for Search button which will get the values from the page using component bindings and passed in the EmployeesVO bind variables in order to execute EmployeesVOCriteria.
Similarly, create an ActionListener with the name as resetAL for Reset button which will reset the values from the four Search fields: Employee ID, First Name, Email, and Salary, and also reset the values in the table.
Thus, the complete code for the MyBean.java file is shown below:
package com.susanto;
import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.faces.application.Application;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import model.AppModuleImpl;
import oracle.adf.view.rich.component.rich.input.RichInputText;
import oracle.jbo.ViewObject;
public class MyBean {
private RichInputText employeeIdBinding;
private RichInputText firstNameBinding;
private RichInputText emailBinding;
private RichInputText salaryBinding;
public MyBean() {
}
public void setEmployeeIdBinding(RichInputText employeeIdBinding) {
this.employeeIdBinding = employeeIdBinding;
}
public RichInputText getEmployeeIdBinding() {
return employeeIdBinding;
}
public void setFirstNameBinding(RichInputText firstNameBinding) {
this.firstNameBinding = firstNameBinding;
}
public RichInputText getFirstNameBinding() {
return firstNameBinding;
}
public void setEmailBinding(RichInputText emailBinding) {
this.emailBinding = emailBinding;
}
public RichInputText getEmailBinding() {
return emailBinding;
}
public void setSalaryBinding(RichInputText salaryBinding) {
this.salaryBinding = salaryBinding;
}
public RichInputText getSalaryBinding() {
return salaryBinding;
}
/**
* @param data
* @return
* function to get Application module value from a EL expression. Input will be a string value containing name of application module.
*/
public Object resolvElDC(String data) {
FacesContext fc = FacesContext.getCurrentInstance();
Application app = fc.getApplication();
ExpressionFactory elFactory = app.getExpressionFactory();
ELContext elContext = fc.getELContext();
ValueExpression valueExp =
elFactory.createValueExpression(elContext, "#{data." + data + ".dataProvider}", Object.class);
return valueExp.getValue(elContext);
}
public void searchAL(ActionEvent actionEvent) {
AppModuleImpl am = (AppModuleImpl) resolvElDC("AppModuleDataControl");
ViewObject employeesVO = am.getEmployeesVO1();
employeesVO.setNamedWhereClauseParam("EmployeeId_Bind", employeeIdBinding.getValue());
employeesVO.setNamedWhereClauseParam("FirstName_Bind", firstNameBinding.getValue());
employeesVO.setNamedWhereClauseParam("Email_Bind", emailBinding.getValue());
employeesVO.setNamedWhereClauseParam("Salary_Bind", salaryBinding.getValue());
employeesVO.executeQuery();
}
public void resetAL(ActionEvent actionEvent) {
AppModuleImpl am = (AppModuleImpl) resolvElDC("AppModuleDataControl");
ViewObject employeesVO = am.getEmployeesVO1();
ViewObject employeesSearchRVO = am.getEmployeesSearchRVO1();
employeesVO.setNamedWhereClauseParam("EmployeeId_Bind", null);
employeesVO.setNamedWhereClauseParam("FirstName_Bind", null);
employeesVO.setNamedWhereClauseParam("Email_Bind", null);
employeesVO.setNamedWhereClauseParam("Salary_Bind", null);
employeesVO.executeQuery();
employeesSearchRVO.executeQuery();
}
}
And the complete code for the demo.jspx is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="demo.jspx" id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:panelBox text="ADF Custom Search" id="pb1" showDisclosure="false">
<f:facet name="toolbar"/>
<af:panelFormLayout id="pfl1" rows="2">
<af:inputText value="#{bindings.EmployeeId.inputValue}" label="Employee ID"
required="#{bindings.EmployeeId.hints.mandatory}"
columns="#{bindings.EmployeeId.hints.displayWidth}"
maximumLength="#{bindings.EmployeeId.hints.precision}"
shortDesc="#{bindings.EmployeeId.hints.tooltip}" id="it1"
binding="#{pageFlowScope.MyBean.employeeIdBinding}">
<f:validator binding="#{bindings.EmployeeId.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.FirstName.inputValue}" label="First Name"
required="#{bindings.FirstName.hints.mandatory}"
columns="#{bindings.FirstName.hints.displayWidth}"
maximumLength="#{bindings.FirstName.hints.precision}"
shortDesc="#{bindings.FirstName.hints.tooltip}" id="it2"
binding="#{pageFlowScope.MyBean.firstNameBinding}">
<f:validator binding="#{bindings.FirstName.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Email.inputValue}" label="Email"
required="#{bindings.Email.hints.mandatory}"
columns="#{bindings.Email.hints.displayWidth}"
maximumLength="#{bindings.Email.hints.precision}"
shortDesc="#{bindings.Email.hints.tooltip}" id="it3"
binding="#{pageFlowScope.MyBean.emailBinding}">
<f:validator binding="#{bindings.Email.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Salary.inputValue}" label="Salary"
required="#{bindings.Salary.hints.mandatory}"
columns="#{bindings.Salary.hints.displayWidth}"
maximumLength="#{bindings.Salary.hints.precision}"
shortDesc="#{bindings.Salary.hints.tooltip}" id="it4"
binding="#{pageFlowScope.MyBean.salaryBinding}">
<f:validator binding="#{bindings.Salary.validator}"/>
</af:inputText>
</af:panelFormLayout>
<af:spacer width="10" height="10" id="s1"/>
<af:panelGroupLayout id="pgl2" halign="end" layout="horizontal">
<af:button text="Search" id="b1" actionListener="#{pageFlowScope.MyBean.searchAL}"/>
<af:button text="Reset" id="b2" actionListener="#{pageFlowScope.MyBean.resetAL}"/>
</af:panelGroupLayout>
</af:panelBox>
<af:spacer width="10" height="10" id="s2"/>
<af:table value="#{bindings.EmployeesVO1.collectionModel}" var="row"
rows="#{bindings.EmployeesVO1.rangeSize}"
emptyText="#{bindings.EmployeesVO1.viewable ? 'No data to display.' : 'Access Denied.'}"
rowBandingInterval="0"
selectedRowKeys="#{bindings.EmployeesVO1.collectionModel.selectedRow}"
selectionListener="#{bindings.EmployeesVO1.collectionModel.makeCurrent}"
rowSelection="single" fetchSize="#{bindings.EmployeesVO1.rangeSize}" id="t1">
<af:column sortProperty="#{bindings.EmployeesVO1.hints.EmployeeId.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.EmployeeId.label}" id="c1">
<af:outputText value="#{row.EmployeeId}"
shortDesc="#{bindings.EmployeesVO1.hints.EmployeeId.tooltip}" id="ot1">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeesVO1.hints.EmployeeId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.FirstName.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.FirstName.label}" id="c2">
<af:outputText value="#{row.FirstName}"
shortDesc="#{bindings.EmployeesVO1.hints.FirstName.tooltip}" id="ot2"/>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.LastName.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.LastName.label}" id="c3">
<af:outputText value="#{row.LastName}"
shortDesc="#{bindings.EmployeesVO1.hints.LastName.tooltip}" id="ot3"/>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.Email.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.Email.label}" id="c4">
<af:outputText value="#{row.Email}" shortDesc="#{bindings.EmployeesVO1.hints.Email.tooltip}"
id="ot4"/>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.PhoneNumber.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.PhoneNumber.label}" id="c5">
<af:outputText value="#{row.PhoneNumber}"
shortDesc="#{bindings.EmployeesVO1.hints.PhoneNumber.tooltip}" id="ot5"/>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.HireDate.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.HireDate.label}" id="c6">
<af:outputText value="#{row.HireDate}"
shortDesc="#{bindings.EmployeesVO1.hints.HireDate.tooltip}" id="ot6">
<af:convertDateTime pattern="#{bindings.EmployeesVO1.hints.HireDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.JobId.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.JobId.label}" id="c7">
<af:outputText value="#{row.JobId}" shortDesc="#{bindings.EmployeesVO1.hints.JobId.tooltip}"
id="ot7"/>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.Salary.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.Salary.label}" id="c8">
<af:outputText value="#{row.Salary}"
shortDesc="#{bindings.EmployeesVO1.hints.Salary.tooltip}" id="ot8">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeesVO1.hints.Salary.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.CommissionPct.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.CommissionPct.label}" id="c9">
<af:outputText value="#{row.CommissionPct}"
shortDesc="#{bindings.EmployeesVO1.hints.CommissionPct.tooltip}" id="ot9">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeesVO1.hints.CommissionPct.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.ManagerId.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.ManagerId.label}" id="c10">
<af:outputText value="#{row.ManagerId}"
shortDesc="#{bindings.EmployeesVO1.hints.ManagerId.tooltip}" id="ot10">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeesVO1.hints.ManagerId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.EmployeesVO1.hints.DepartmentId.name}" sortable="true"
headerText="#{bindings.EmployeesVO1.hints.DepartmentId.label}" id="c11">
<af:outputText value="#{row.DepartmentId}"
shortDesc="#{bindings.EmployeesVO1.hints.DepartmentId.tooltip}" id="ot11">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.EmployeesVO1.hints.DepartmentId.format}"/>
</af:outputText>
</af:column>
</af:table>
</af:panelGroupLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>Save all and run the application. Thus, the ran application is shown below:
Let me give the First Name value as David and click on Search button, and we can see only those data where the First Name is David as shown below:
Now, let me click on the Reset button, and with that the First Name field value is cleared off and also the table is reset to its original state as shown below:
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
907 total views, 1 views today