Technical Articles relating to Oracle Development Tools and Frameworks
-
ADF
September 2, 2011
Heatmap Styling in Tables
A question that has come up a couple of times recently is that of applying cell level styling, for example background color / colour within a conventional ADF Table. In the Pivot table this is trivial, you just apply the styleclass to the component inside the <dvt:dataCell>. For the conventional table, however, you'll run into a slight problem with this approach in that the chances are that your styled inputText or outputText will not completely fill the cell and you'll end up with whitespace around the component and a ragged right margin depending on the length of the data in each.
The solution is, however, simple. Within the <af:column> wrap the display component inside of a <af:panelGroupLayout>. Ensure that you set the PGL to a vertical layout to ensure that it is stretched to fill the table cell. Then just apply your styleclass expression to the PGL rather than the input or output text within.
So you might end up with something like this:
<af:column headerText="#{bindings.Accounts.hints.AccountStatus.label}">
<!-- stlyes with the same name as the Status value exist in the CSS -->
<af:panelGroupLayout layout="vertical" styleClass="#{row.bindings,Status.inputValue}">
<af:outputText value="#{row.bindings.Status.inputValue}"/>
</af:panelGroupLayout>
</af:column>
styleClass="#{row.bindings,Status.inputValue}
what this styleClass mean?
From the Tag Documentation:
A CSS style class to use for this component. The style class can be defined in your jspx page or in a skinning CSS file, for example, or you can use one of our public style classes, like 'AFInstructionText'.