How would I style some table rows as light red, dark red, light green, and dark green?

[bmeyers]

I have a Perspective table in 8.1.35 running a named query on a database table of 50 rows of workstation IDs and names and their status. Some workstations are turned on and some are turned off (their status).

How can I style the workstations that are turned on as shades of light green and dark green? And then how can I style the workstations that are turned off as shades of light red and dark red?

I think I can apply CSS here on odd and even rows but my strategy isn't working out currently.

1. Have named query return format set to json.

2. Have script transform work through list of workstations and set style classes to redCustom or greenCustom.

3. In stylesheet.css use the following:

.psc-redCustom .ia_table__body__row--even{
	background-color: #FF8A8A;
}

.psc-redCustom .ia_table__body__row--odd{
	background-color: #FFCCCC;
}

.psc-greenCustom .ia_table__body__row--even{
	background-color: #8AFF8A;
}

.psc-greenCustom .ia_table__body__row--odd{
	background-color: #CCFFCC;
}

However, my table rows remain their default colors.

Any ideas on what I missed here?

EDIT: Had a typo in my stylesheet but same problem still.

[amy.thompson]

You might find it useful to refer to this row style example

The structure of your json is not correct, the table is expecting an array of row objects

[jlandwerlen]

Why not use the striped prop?

[bmeyers]

The table works as expected if I feed in a path to a regular style path such as "tables/rows/green/dark". The table also works as expected if I change my CSS to the following:

.psc-redCustom{
	background-color: #FF8A8A;
}

.psc-redCustom{
	background-color: #FFCCCC;
}

.psc-greenCustom{
	background-color: #8AFF8A;
}

.psc-greenCustom{
	background-color: #CCFFCC;
}

However, in this case I only get a single shade of red or green so I think my problem is my CSS and/or understanding of CSS and the stylesheet.

@jlandwerlen
I am aware of this feature but how would I change the color based off values within individual rows?

[amy.thompson]

It's not necessary to use the stylesheet to get your custom colours. Just create style classes called redCustom and greenCustom and set the background colours of these as required

[cmallonee]

@bmeyers

However, in this case I only get a single shade of red or green

Because you're overwriting one setting with a second setting, and so you'll only ever see the second setting applied. If you want different colors, you need different rules.

.psc-redCustom{
	background-color: #FF8A8A;
}

.psc-redCustomLighter{
	background-color: #FFCCCC;
}

And @amy.thompson is correct. If you actually create these named styles you're declaring, then this use of the stylesheet.css resource is unnecessary and would result in conflicting values later in development if you ever change one or the other.

@bmeyers

I am aware of this feature but how would I change the color based off values within individual rows?

When you are populating your data and configuring each object, you apply the style with logic:

# assume you're building your list of objects from some list of data
style_map = [
    0: "greenCustom",
    1: "redCustom"
]
rows = []
for entry in value:
    rows.append({"Workstation": {"justify": "center", "style": {"classes": style_map.get(entry["someKeyToCheck"])}, "align": "center", "value": entry["name"]})
return rows

This results in each row having the value for classes be applied based on the value of the "someKeyToCheck" attribute of each row, where the end value is retrieved from some dictionary (this exmaple assumes your value is an int) .

[bmeyers]

It seems I have created an instance of an XY Problem and I apologize for that.

XY problem

The reason I want to overwrite the odd / even rows with CSS is because when I go to sort a colored table (using regular styles for example which I have done) I might get an instance where I have several dark red rows in a row. The style applied to the JSON follows with whatever I sort the rows by in a session.

As far as I know there is no event associated with sorting a table so i can't retrigger styling all the rows.

If I am only using 1 shade of color I can (light green and dark green) I can apply that to the striped property on the table no issues.

So what I am really looking for is a way to say this row is always "green" and then CSS decides that the odd rows are light green and the even rows are dark green.

I hope that clarifies the real problem I am trying to solve.

[PGriffith]

Possibly with the stylesheet by applying a brightness filter on the even/odd rows; not sure how best to write the CSS selector to target the appropriate visible rows.

[bmeyers]

The brightness filter worked for the red colors; not the green though. I am going to say this problem is impossible the way I want to do it.

[bmeyers]

Since the feature I am looking for doesn't exist I created a Features Request.

Add CSS to Perspective Table Rows based off of row content | Ignition...

I don't expect this to happen anytime soon so the customer has settled on using one shade of colors for now.

[cmallonee]

In CSS, all things are possible:

div.tr-group:nth-child(odd) {
	filter: brightness(85%);
}

Tune as needed.

Note:
This only works as long as a color is applied. If no color is applied, there is nothing to adjust the brightness of.

[bmeyers]

That worked! I was going up in % and it wasn't working well for other colors; going down in % was the key.

[cmallonee]

One thing to note is that the stylesheet.css resource rules are applied to ALL tables in the project. If you only want this for a specific table, I highly recommend supplying a meta.domId property for your Table and supplying a unique value, then modifying the rule to only target this Table:

#myUniqueId div.tr-group:nth-child(odd) {
	filter: brightness(85%);
}