Use DVT in an ADF Table

The use case here is based on the priority from a task. The requirement was not to show the priority as number, but with a color. It was surprisingly easy to accomplish this in ADF with DVT.

To illustrate I use a read only VO to show the priority:


Drag & Drop as a read-only table with sorting enabled:


We won’t use the outputText, but we’ll reuse the binding that is created.
Select the gauge component from the Component Palette & drag and drop it in the column.

 In the wizard choose for the LED:

This generates an dvt:gauge component that is empty, now we need to set a few properties.
As value we set the #{row.prio} binding that the outputText created for us.
Change the inlineStyle to get the correct width & height.
Choose the colors that you wish to show for the different priorities. I choose red for 1, yellow for 2 and green for 3 as 1 being the highest priority and 3 being the lowest.
This results in the following code: 

        
          
            
              
              
                
                
                
              
              
            
          
        

If you run this, it will result in the following column in a table:



Very easy to read for the user and if you ticked the sorting you will see that the column is still sortable as you would have expected with a number as priority:

You can see the (not so impressive) results live here at the Oracle Public Cloud.