Wed. Aug 4th, 2021

Requirement: Let us assume we have a Table Filter applied to our Departments table.

In the Table Filter text box we can type some value and hit enter to filter the Departments table data.

Now, I want to have an icon, on the header of one of the column, on click of which it should clear all the Filter Criteria that was applied to the Departments table data.

Sample screen is shown below:

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

Step 1: Create an Oracle ADF Fusion Web Application.

Create Business Components from Tables for the Departments table in the Model project.

Create a demo.jspx in the View Controller project

Step 2: Drag and drop DepartmentsVO1 from the Data Controls panel to the demo.jspx page as a table.

Make sure that Enable Filtering option is checked.

Step 3: Drag and drop a column from the Component Palette as a first column of the Departments table.

Set the headerText=”Sl No”, and rowHeader=”true”.

Here the rowHeader property as true will make the icon visible in the column header. And on click of this icon it will clear all the Filter conditions that was applied to the Departments table data.

Various other values for the rowHeader property are as shown below:

Drag and drop af:outputText inside the above created af:column and set value=”#{vs.index+1}”. This is just to generate the Serial Number of the Row.

Thus, the complete demo.jspx is shown below:

<?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:af="http://xmlns.oracle.com/adf/faces/rich">
    <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:table value="#{bindings.DepartmentsVO1.collectionModel}" var="row"
                          rows="#{bindings.DepartmentsVO1.rangeSize}"
                          emptyText="#{bindings.DepartmentsVO1.viewable ? 'No data to display.' : 'Access Denied.'}"
                          rowBandingInterval="0"
                          selectedRowKeys="#{bindings.DepartmentsVO1.collectionModel.selectedRow}"
                          selectionListener="#{bindings.DepartmentsVO1.collectionModel.makeCurrent}"
                          rowSelection="single" fetchSize="#{bindings.DepartmentsVO1.rangeSize}"
                          filterModel="#{bindings.DepartmentsVO1Query.queryDescriptor}" filterVisible="true"
                          queryListener="#{bindings.DepartmentsVO1Query.processQuery}" varStatus="vs" id="t1">
                    <af:column id="c5" headerText="Sl No" rowHeader="true">
                        <af:outputText value="#{vs.index+1}" id="ot5"/>
                    </af:column>
                    <af:column sortProperty="#{bindings.DepartmentsVO1.hints.DepartmentId.name}" filterable="true"
                               sortable="true" headerText="#{bindings.DepartmentsVO1.hints.DepartmentId.label}" id="c1">
                        <af:outputText value="#{row.DepartmentId}"
                                       shortDesc="#{bindings.DepartmentsVO1.hints.DepartmentId.tooltip}" id="ot1">
                            <af:convertNumber groupingUsed="false"
                                              pattern="#{bindings.DepartmentsVO1.hints.DepartmentId.format}"/>
                        </af:outputText>
                    </af:column>
                    <af:column sortProperty="#{bindings.DepartmentsVO1.hints.DepartmentName.name}" filterable="true"
                               sortable="true" headerText="#{bindings.DepartmentsVO1.hints.DepartmentName.label}"
                               id="c2">
                        <af:outputText value="#{row.DepartmentName}"
                                       shortDesc="#{bindings.DepartmentsVO1.hints.DepartmentName.tooltip}" id="ot2"/>
                    </af:column>
                    <af:column sortProperty="#{bindings.DepartmentsVO1.hints.ManagerId.name}" filterable="true"
                               sortable="true" headerText="#{bindings.DepartmentsVO1.hints.ManagerId.label}" id="c3">
                        <af:outputText value="#{row.ManagerId}"
                                       shortDesc="#{bindings.DepartmentsVO1.hints.ManagerId.tooltip}" id="ot3">
                            <af:convertNumber groupingUsed="false"
                                              pattern="#{bindings.DepartmentsVO1.hints.ManagerId.format}"/>
                        </af:outputText>
                    </af:column>
                    <af:column sortProperty="#{bindings.DepartmentsVO1.hints.LocationId.name}" filterable="true"
                               sortable="true" headerText="#{bindings.DepartmentsVO1.hints.LocationId.label}" id="c4">
                        <af:outputText value="#{row.LocationId}"
                                       shortDesc="#{bindings.DepartmentsVO1.hints.LocationId.tooltip}" id="ot4">
                            <af:convertNumber groupingUsed="false"
                                              pattern="#{bindings.DepartmentsVO1.hints.LocationId.format}"/>
                        </af:outputText>
                    </af:column>
                </af:table>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

Save all and run the application. Thus, the ran application is shown below:

Let me provide the ManagerId value in the filter as 20% and the LocationId value as 1700. Hit on the enter button of your keyboard. Thus, the filtered data is shown below.

Click on the Icon at the header of the Sl No Column. and with that we can see the Filter that was applied to the Departments table data is cleared off and we can now see the unfiltered data 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

 264 total views,  1 views today

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *