Search code examples
cssjsf-2primefaces

coloring primefaces table cells depending on condition


it's my first project with primefaces, and I can't find out why my cells are not colored. my XHTML file contains the following:

<h:head>
<title>Job Status Reporter</title>
<link rel="stylesheet" type="text/css" href="/jobstatusreport/colors.css" />
</h:head>

 ...

 <h:dataTable var="myJob" value="#{workPackage.jobs}"
    rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : 
  (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red'   :'white'))}">
<h:column>
    <h:outputText value="#{myJob.jobId}" />
</h:column>
<h:column>
        <h:outputText value="#{myJob.jobType}" />
</h:column>
    <h:column>
    <h:outputText value="#{myJob.jobStatus}" />
    </h:column>
</h:dataTable>

and my colors.css file is created in WebContent/resources/css/ folder and defined as follow:

.green.ui-datatable { background: green;}

.red.ui-datatable {background: red;}

.yellow.ui-datatable {background: yellow;}

.white.ui-datatable {background: white;}

but I still get uncolored cells on my web browser, can anyone tell me what's the problem?

EDIT:

when I changed h:dataTable ... to p:dataTable ... I got the following message:

/globalReport.xhtml @32,169 rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red' : 'white'))}": Property 'jobStatus' not found on type org.hibernate.collection.internal.AbstractPersistentCollection$SetProxy 

can anyone help, please?


Solution

  • I've finally found a solution: In myJob class I added the below method:

        public String createLabel(){
    
        switch (jobStatus){
    
        case "SUCCESS":
            return "SUCCESS";
    
        case "PARTIAL SUCCESS":
            return "PARTIAL_SUCCESS";
    
        case "FAILURE":
            return "FAILURE";
    
        default: 
            return "DEFAULT";   
        }
    }
    

    and in my globalReport.xhtml I changed the following:

    <h:head>
    <title>Job Status Reporter</title>
    <h:outputStylesheet library="css" name="colors.css" target="head" />
    </h:head> 
    
    ....
    
    <h:dataTable var="myJob" value="#{workPackage.jobs}">
        <h:column>
        <h:outputText value="#{myJob.jobId}"/>
    </h:column>
        <h:column>
        <h:outputText value="#{myJob.jobType}"/>
    </h:column>
        <h:column>
            <h:outputText value="#{myJob.jobStatus}" styleClass="#{myJob.createLabel()}"/>
    </h:column>
    </h:dataTable>
    

    and my colors.css is :

    .SUCCESS{
    background-color : green !important;
    }
    
    .FAILURE{
    background-color: red !important; 
    }
    
    .PARTIAL_SUCCESS{
    background-color: yellow !important;
    }
    
    .DEFAULT{
    background-color: white !important; 
    }
    

    and it works perfectly. many thanks @Lukasz for your precious help.