Primefaces p:treeNode background colour

I have a sidebar which contains a primefaces p:tree element. Here is it:

<p:tree value="#{sidebarSelectionView.systemRoot}"
               var="treeNodeDescriptor"
               selectionMode="single"
               selection="#{sidebarSelectionView.selectedNode}">
    <p:ajax event="select" update=":unitContentId" />
    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
       <h:outputText value="#{treeNodeDescriptor.name}"/>
    </p:treeNode>
</p:tree>
                

The tree node consists of many nested nodes. Each leaf node is associated with a content page which is displayed if the node is selected.

The generated tree seems like this:

Agent
    customer1
        subcustomer1
        subcustomer2
    

How can I make the nodes Agent, customer1 and subcustomer1 to have say red background colour, if the content page associated with the subcustomer1 changes its internal state? The internal state is checked by <p:poll>.

One option is to store your page states in the backing bean when polled, e.g. in a nodedata-state-map. Just use your right classes.

public class SidebarSelectionView {

  private Map<[NodedataClass], [StateClass]> nodedataStateMap;

  ...
}

With that you are able to style your nodes with

<h:outputText
  value="#{treeNodeDescriptor.name}" 
  style="background-color: ##{sidebarSelectionView.nodedataStateMap[treeNodeDescriptor].stateName eq 'bad' ? 'FF0000' : '00FF00'};"
/>

or use custom style classes with

<h:outputText
  value="#{treeNodeDescriptor.name}"
  styleClass="#{sidebarSelectionView.nodedataStateMap[treeNodeDescriptor].stateName eq 'bad' ? 'stateBad' : 'stateGood'}"
/>

Example assumes a StateClass with a stateName property of type String. Just adapt to your state class. I hope you got the idea.

Don´t forget to update your tree with

<p:poll update="treeId" />

to reflect state changes.