Customized af:quickQuery component
Jdeveloper version – 11.1.2.2, Schema – HR
The default support of af:quickQuery component is very rich. It would list all the selected searchable columns of the View Object in one selectOneChoice list and adjacent to it another selectOneChpice list displaying various operators and one input text box for input to be searched .Here the search gets restricted to one column. There would be use cases where the search is combination of multiple columns which can be supported by customizing this component. Fro the sake of an example take the following use case dependent on Employees table of HR schema -
“Display the list of all the employees with first name is “David” and they had joined the organization with last 5 years.”
In order to solve the above use case, in criteriaItems facet of quickQuery component add a selectOneChoice component and one inputTextbox component , see the code below -
Table 1
The UI would look something like this -

There are two problems with this solution -
1.) The search button in the UI ( the arrow image) is not aligned with the other two fields.
2.) The input box, the last line in table 1, is not rendered. this is a hack to make sure that the quickQuery component doesn’t render a read only component.
The code of the project can be found here
The default support of af:quickQuery component is very rich. It would list all the selected searchable columns of the View Object in one selectOneChoice list and adjacent to it another selectOneChpice list displaying various operators and one input text box for input to be searched .Here the search gets restricted to one column. There would be use cases where the search is combination of multiple columns which can be supported by customizing this component. Fro the sake of an example take the following use case dependent on Employees table of HR schema -
“Display the list of all the employees with first name is “David” and they had joined the organization with last 5 years.”
In order to solve the above use case, in criteriaItems facet of quickQuery component add a selectOneChoice component and one inputTextbox component , see the code below -
| <f:facet name="criteriaItems"> <af:panelGroupLayout id="g1" layout="horizontal"> <af:selectOneChoice label="Hired " valueChangeListener="#{backingBeanScope.backing_allEmployees.valueChnageListener}" id="soc2" value="#{backingBeanScope.backing_allEmployees.selectedHireDateTimeWindow}"> <f:selectItems id="si2" value="#{backingBeanScope.backing_allEmployees.hireDates}"/> </af:selectOneChoice> <af:spacer width="10" height="10" id="s2" /> <af:inputText label="Employee Name" id="it3" binding="#{backingBeanScope.backing_allEmployees.empName}"> </af:inputText> </af:panelGroupLayout> </f:facet> <af:inputText label="Label 1" id="it2" rendered="false"/> |
The UI would look something like this -
There are two problems with this solution -
1.) The search button in the UI ( the arrow image) is not aligned with the other two fields.
2.) The input box, the last line in table 1, is not rendered. this is a hack to make sure that the quickQuery component doesn’t render a read only component.
The code of the project can be found here
Technorati Tags: af:quickQuery,quickQuery
Comments
Post a Comment