How to define the color/style of each row depending on the value of a reference with OpenXava?

Question

I have an entity Issue with a reference to an entity Priority. I want in the list mode of my OpenXava module, a different color and visual style for each row depending on the value of priority.

This is the code for my Issue entity:

package com.yourcompany.tracker.model;

import java.time.*;

import javax.persistence.*;

import org.openxava.annotations.*;
import org.openxava.calculators.*;
import org.openxava.model.*;

import lombok.*;

@Entity @Getter @Setter
public class Issue extends Identifiable {

    @Column(length=100) @Required
    String title;
            
    @Stereotype("SIMPLE_HTML_TEXT") 
    String description;
    
    @ReadOnly 
    @DefaultValueCalculator(CurrentLocalDateCalculator.class) 
    LocalDate createdOn;
    
    @ManyToOne(fetch=FetchType.LAZY, optional=true)
    @DescriptionsList
    Priority priority; 
        
}

And this for Priority:

package com.yourcompany.tracker.model;

import javax.persistence.*;
import javax.validation.constraints.*;

import org.openxava.annotations.*;

import lombok.*;

@Entity @Getter @Setter
public class Priority {
    
    @Id @Max(9)
    int level;
    
    @Column(length=40) @Required
    String description;

}

And this the effect I would like to achieve:

Note as rows with LOW priority are gray, and rows with HIGH priority are bold.

I know that there is a @RowStyle annotation, but it seems that it is for simple properties. How can I define a different style for each row depending on a reference (@ManyToOne) value?

javierpaniza · Answer 1 · 2021-05-12T18:47:46.173

@RowStyle allows you to use qualified properties, that is properties of a reference. Therefore, you can use @RowStyle inside a @Tab annotation in your entity, in this way:

@Entity @Getter @Setter
@Tab(
    rowStyles= {
        @RowStyle(style="high-priority", property="priority.level", value="7"),
        @RowStyle(style="low-priority", property="priority.level", value="3"),
        
    }
)
public class Issue extends Identifiable {

Note how for property attribute in @RowStyle we use "priority.level", so we reference to a property of the priority reference. Like stated above when priority.level is 7 we apply the high-priority style and when it is 3 we apply low-priority. These styles are CSS classes defined in your custom.css file, thus:

.high-priority {
    font-weight: bold;
}

.low-priority {
    color: lightgray !important;
}

To learn more read the OpenXava reference guide about @RowStyle.

How to define the color/style of each row depending on the value of a reference with OpenXava?

1 Answers1