Pimp up an af:query to show the result table in an af:panelCollection

A user on the JDev Forum asked an interesting question on how to show the result of an af:query (e.g. dropped as ‘Query Panel with Table’).
A quick check showed that dropping a named criteria as ‘Query Panel with Table’ produces af:panelGroupLayout containing a af:panelHeader for the af:query component and an af:table for the result of the query.
Here is a sample of a drop as ‘Query Panel with Table’ (some details are omitted to save space):

                    <af:panelGroupLayout layout="vertical" id="pgl1">
                        <af:panelHeader text="Employees" id="ph1">
                            <af:query id="qryId1" headerText="Search" disclosed="true"...
                                      resultComponentId="::resId1"/>
                        </af:panelHeader>
                        <af:table id="resId1" value="#{bindings.EmployeesView1.collectionModel}" var="row"
                                  rows="#{bindings.EmployeesView1.rangeSize}" ...>
                            <af:column ...>
                            </af:column>
                            <af:column ...>
                            </af:column>
                            ...
                        </af:table>
                    </af:panelGroupLayout>

The user asked for functionality like hiding columns or detachment of the table to get a full screen mode. In short he wanted to use the functions of a af:panelCollection together with the automatic setup of af:query and the result table.

This can easily be done by surrounding the af:table component by a af:panelCollection and rewiring the ‘resultComponentId’ property of the af:query, as the af:panelCollection is a naming container.
In JDev select the table with a right click and select ‘Surround with…’

Surround Table with panel collection

and search for the ‘Panel Collection’

Select 'Panel Collection'

and click ‘OK’ to finish this step.
Now we need to change the ‘resultComponentId’ property of the af:query component to account for new the naming container which is added through the af:panelCollection component.
Select the af:query in the design view or in the structure window and open the property inspectors common tab

Change af:query
As you can see JDev shows an error for the ‘resultComponentId’ property as the target has changes its naming container. To change it click the small arrow down at the right hand side of the property, select ‘Edit…’. In the next Dialog look for the af:table component inside the af:panelCollection and select it. Click ‘OK’ to finish the change.
the resulting code looks like (some details are omitted to save space):

                    <af:panelGroupLayout layout="vertical" id="pgl1">
                        <af:panelHeader text="Employees" id="ph1">
                            <af:query id="qryId1" headerText="Search" disclosed="true"
                                      ...
                                      resultComponentId="::pc1:resId1"/>
                        </af:panelHeader>
                        <af:panelCollection id="pc1">
                            <f:facet name="menus"/>
                            <f:facet name="toolbar"/>
                            <f:facet name="statusbar"/>
                            <af:table value="#{bindings.EmployeesView1.collectionModel}" var="row"
                                      ...
                                      rowSelection="single" id="resId1">
                                <af:column sortProperty="#{bindings.EmployeesView1.hints.EmployeeId.name}"
                                           ...
                                </af:column>
                                ...
                                <af:column sortProperty="#{bindings.EmployeesView1.hints.PhoneNumber.name}"
                                ...
                                </af:column>
                            </af:table>
                        </af:panelCollection>
                    </af:panelGroupLayout>

When you run the code you are able to detach the table and hide columns

Resulting page

One thought on “Pimp up an af:query to show the result table in an af:panelCollection

  1. Great information! Do you know how to get the value out of a query panel? I have a search text box inside the query panel and would like to get the search value out of it. It searches by someone’s name and I would like to see what user is being searched. Thank you in advance! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s