Change the text color of several columns of the same table

Support
#1

Hello,
the following code works perfectly for changing the text color of a table column

@Install(to = "ListeOpportunites", subject = "styleProvider")
protected String etatTableStyleProvider(Opportunite opportunite, String property) {
    if (property == null) {
    } else if (property.equals("etat")) {
        switch (opportunite.getEtat()) {
            case EnCours:
                return "bold ecriture-orange";
            case Perdue:
                return "bold ecriture-rouge";
            case Gagnee:
                return "bold ecriture-lime";
        }
    }
    return null;
}

when I add a column, the color change does not work on both columns

@Install(to = "ListeOpportunites", subject = "styleProvider")
protected String etatTableStyleProvider(Opportunite opportunite, String property) {
    if (property == null) {
    } else if (property.equals("etat")) {
        switch (opportunite.getEtat()) {
            case EnCours:
                return "bold ecriture-orange";
            case Perdue:
                return "bold ecriture-rouge";
            case Gagnee:
                return "bold ecriture-lime";
        }
    }else if(property.equals("chance")) {
        if (opportunite.getChance() < 80) return "bold ecriture-rouge";
        if (opportunite.getChance() >= 80 && opportunite.getChance() <= 90) return "bold ecriture-orange";
        if (opportunite.getChance() > 90) return "bold ecriture-lime";
    }
    return null;
}

is it limited to a single column?

Change color of an aggregated value in a GroupTable?
#3

Hi, @strai1.mail!

The styleProvider for Table can also work with multiple columns. I can advise you to check the names of the properties, maybe you were mistaken.

Perhaps your problem can be solved if you clear the browser cache by pressing CTRL+F5.

Please check that in debug mode the style for chance property is set correctly. To do this, you need to open the Developer tools in the browser (CTRL+SHIFT+I) and go to the Elements tab in Chrome or Inspector tab in Firefox. Then find the chance column and make sure that the style bold ecriture-rouge or another custom style is set.

Example of using a style provider for several columns

The entity Customer has name, age and job properties.

CustomerBrowse

    @Install(to = "customersTable", subject = "styleProvider")
    protected String customerTableStyleProvider(Customer customer, String property) {
        if (property != null) {
            if (property.equals("age")) {
                Integer age = customer.getAge();
                if (age < 20) {
                    return "young-style";
                } else if (age < 40) {
                    return "old-style";
                } else {
                    return "retiree-style";
                }
            } else if (property.equals("job")) {
                if (customer.getJob().equals("developer")) {
                    return "developer-style";
                } else {
                    return "another-job-style";
                }
            }
        }
        return null;
    }

styles.scss

  .young-style {
      background-color: red;
      color: white;
  }

  .old-style {
      background-color: green;
      color: white;
  }

  .retiree-style {
      background-color: blue;
      color: white;
  }

  .developer-style {
      background-color: lightyellow;
      color: black;
  }

  .another-job-style {
      background-color: darkmagenta;
      color: white;
  }

Result
image
I have attached a test project.
style-provider.zip (11.3 MB)

Regards,
Gleb

2 Likes
#5

Thank you so much !
I found the problem. Before testing the attribute values, you must test if it is not null. Without this test beforehand, if a null value is present in the column, the column formatting no longer works for the rest of the elements of the table.

@Install(to = "ListeOpportunites", subject = "styleProvider")
protected String etatTableStyleProvider(Opportunite opportunite, String property) {
    if (property != null) {
        if (property.equals("etat")) {
            if (opportunite.getEtat() != null) {
                if (opportunite.getEtat() == OpportuniteEtat.EnCours) {
                    return "bold ecriture-orange";
                } else if (opportunite.getEtat() == OpportuniteEtat.Perdue) {
                    return "bold ecriture-rouge";
                } else if (opportunite.getEtat() == OpportuniteEtat.Gagnee) {
                    return "bold ecriture-lime";
                }
            }
        } else if (property.equals("chance")) {
            if (opportunite.getChance() != null) {
                if (opportunite.getChance() < 80) {
                    return "bold ecriture-rouge";
                } else if (opportunite.getChance() >= 80 && opportunite.getChance() <= 90) {
                    return "bold ecriture-orange";
                } else if (opportunite.getChance() > 90)
                    return "bold ecriture-lime";
            }
        }
    }
    return null;
}

PS: In your example, if you delete Gray’s age (replace 19 with null), the whole table no longer works. :wink:

#6

Hello @strai1.mail

You can simplify the code in the following way:

if ("etat".equals(property)) {
    // ...
} else if ("chance".equals(property)) {
    // ...
}
1 Like
#8

Hello,

Thanks for your help but I still have a question. is it possible to change the color of an aggregated value in a GroupTable with aggreation?

#9

Hello @strai1.mail

You can use the $cuba-table-aggregation-background-color SCSS variable to change aggregation row background color.

Regards

#10

Thank you for your reply.
I want to apply the same conditions as in the example above. The color should change depending on the value of the aggregate.
With your solution, I don’t see how to do it.
Could you complete your previous example.
With many thanks
Capture%20du%202020-01-08%2013-22-23

#11

Unfortunately it’s not possible to implement such behavior

#12

too bad, it is useful when it is only the aggregated values ​​that interest us.
Perhaps an evolution to develop.
Again thank you for your advice and help

1 Like