af:query - CSS

By default, when we drag and drop view object instance as af:query declarative component on a page, the af:query renders view object attributes based on column length/precision as shown below.

In case, if we want to align the fields properly in view layer irrespective of model layer attribute values, CSS will help us to do that.

•  Create a CSS file and declare it in trinidad-skins.xml

<?xml version="1.0" encoding="UTF-8" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>myskin.desktop</id>
    <family>customskin</family>
    <extends>fusionFx-v1.desktop</extends>
    <style-sheet-name>css/employees.css</style-sheet-name>
  </skin>
</skins>

• Open trinidad-config.xml file and override existing values with custom skin created in above step

<?xml version="1.0" encoding="UTF-8"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
    <skin-family>customskin</skin-family>  
</trinidad-config>

• Open CSS file and add following values based on number of attributes defined in View object

.CustomQueryPanel tr[_rowkey='0'] input{
width: 320px !important;
}
.CustomQueryPanel tr[_rowkey='1'] input{
width: 320px !important;
}
.CustomQueryPanel tr[_rowkey='2'] input{
width: 320px !important;
}
.................................
.................................
.CustomQueryPanel tr[_rowkey='9'] input{
width: 320px !important;
}

• Open JSP page and add the CSS class name mentioned in CSS file to styleClass property of af:query and run page

      <af:query id="qryId1" headerText="Search" disclosed="true"
            value="#{bindings.ImplicitViewCriteriaQuery.queryDescriptor}"
            model="#{bindings.ImplicitViewCriteriaQuery.queryModel}"
            queryListener="#{bindings.ImplicitViewCriteriaQuery.processQuery}"
            queryOperationListener="#{bindings.ImplicitViewCriteriaQuery.processQueryOperation}"
       resultComponentId="::pc3:resId1" rows="5" maxColumns="2" styleClass="CustomQueryPanel"/>

Result:

In case, if we want to restrict a view object attribute to not to display in query able attributes list, we have two options.

Option 1.  Create a custom view criteria and use it as a query component in a page
Option 2.  Go to view object declaration and make attribute property 'Queryable' as false.