JDEV: af:query hide ‘Add Fields’ from query panel via custom skin

In my last post ‘JDEV: af:query hide some attributes from query panel but show them in the result table’ I showed how to hide some of the available attributes from the af:query panel.
Juan, an other blogger informed me that he too had shown how to do this (Control visibility of a query in adf). The blog not only showed how to hide attributes from the panel, but also showed how to hide the ‘Add Fields’ button you see in the advanced mode.

Query Panel Advanced Mode

Query Panel Advanced Mode

The method (or better trick) is to put a component in the footer facet of the af:query, which is stated in the docs. If you use an af:spacer (e.g. 1×1) for this, nothing is visible in the panel. The automatically filled in button ‘Add Fields’ is gone.
Well, I’m not just copying the other blog, but like to show a different approach using a custom skin to do it. The advantage using the skin approach is that you can clearly see (via hte name of the style class) why you don’t see the ‘Add Field’ button. Using the spaces the button is simply gone and you have to remember how you get rid of it (in a year).

First we need to add an ADF Skin to the project. For this we add a new ADF Skin file to the project and set its properties:

Skin creation

Skin creation

Skin Properties

Skin Properties

As I’m using JDev the skin editor is build in. If you are trying this on an older version, you can use the stand alone version to create the skin file.
In the skin editor we look for the af:query component, which we want to change. In the component properties for the af:query we look for the ‘footer-facet-content-style’ pseudo element. For this element we set the display property to none. This will hide the whole facet in the UI. As this facet holds the ‘Add Fields’ button, the button is not visible in the UI.

Change Element

Change Element

Preview of af:query with skin applied

Preview of af:query with skin applied

If you leaf the skin in this state, the change works for all af:query components of hte project. As I like it to be changeable on a per component basis, I define my own style class for this change. For this change to the source mode of the skin file and add a style class name in front of the selector:

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

.AFQueryHideAddFields af|query::footer-facet-content-style
  display: none; 

Now you can use this ‘AFQueryHideAddFields’ style class on each af:wuery component where you want to hide the ‘Add Fields’ button .

                    <af:query id="qryId1" headerText="Search" disclosed="true"
                              resultComponentId="::pc1:resId1" styleClass="AFQueryHideAddFields">
Apply StyleClass

Apply StyleClass

You can download the sample workspace, build with JDev and depending on hte HR db schema, from here: BlogHideAttributesInQueryPanel_v2.zip
Please rename the file to ‘.zip’ after downloading it!

6 thoughts on “JDEV: af:query hide ‘Add Fields’ from query panel via custom skin

  1. Hi Timo.

    Thanks for your link to my page. It is really a good boost to my blog.

    To increase the visibility of my blog in google, could you please change the label of the link to my blog with the label:

    Control visibility of a query in adf.

    My blog is small and this could serve me really a lot, Specially seeing that your blog a pagerank = 3.

    Thanks in advantage.

  2. If you want to hide fields from being visible in the “Add Field” button you can always modify the view, set Queryable attribute of a view attribute to false. This is an important step to make sure users can’t query restricted data, because you can always disable css or do a manual post.

  3. I was able to get rid of the Add Fields button by merely adding an empty toolbar to the footer facet (on

    • Well, this possibility is mentioned in the post (as ad an af:spacer) and in Juan’s blog too.


  4. That is a great tip especially to those fresh to the blogosphere. Brief but very precise info… Many thanks for sharing this one. A must read article!

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