AVIO Consulting

Add Row Banding to ADF ListView

Oct 13, 2014 | ADF

The af:listView ADF component is a nice alternative to tables, and with a small effort, can provide a more-modern look to your ADF web application. There is one minor feature missing, which you can add yourself quite easily: row banding. Row banding makes the listView easier-to-read, especially when there are many details in a listItem, or when there are many items in the list, or when the list is very wide. 


As you can see, just like with a table, it helps offset the rows from each other visually on the right, as compared to without banding on the left. To get your listView to look like the above, just follow these easy steps. 

  1. Make your listView aware of even/odd styles

    styleClass on af:listItem


  2. Add styles for your listItems to your skin


Since the listView uses the background-color of the listItem as the property it changes to show selection, the last style will change the font-weight for the selected row. This could also change the style to italic or change the color of the text, it’s up to you. Hopefully this will enhance the look of your ADF application and make your users happier and more productive.