Cell color related to content in Ignition Perspective

Hello!

I have defined some background colors in Ignition Perspective:
image

Now I trying to use this background colors in some cells depending on the content:
so I using Expression in that column style field:

switch(
  {this.props.value},
  "ADECUADO", "background_adequate",
  "TRIVIAL", "background_trivial",
  "TOLERABLE", "background_tolerable",
  "MODERADO", "background_moderate",
  "IMPORTANTE", "background_important",
  "INTOLERABLE", "background_intolerable",
  "default"
)

but seem is not working, any idea how to do this?

You have used case syntax in a switch expression. The case syntax is easier to read so change switch to case.

I think you need to include the path to the style definition too.

case(
  {this.props.value},
  "ADECUADO",    "TablaPRL/background_adequate",
  "TRIVIAL",     "TablaPRL/background_trivial",
  "TOLERABLE",   "TablaPRL/background_tolerable",
  "MODERADO",    "TablaPRL/background_moderate",
  "IMPORTANTE",  "TablaPRL/background_important",
  "INTOLERABLE", "TablaPRL/background_intolerable",
  "default"
)
1 Like

Also, your binding needs to supply an object with key/value pairs. Did you intend to bind to a color key within styles, perhaps?

my bindings now should link to background_color withing styles

You can put the expression binding on style.classes.

2 Likes

Did you get this solved? I don't think you can set cell colors dynamically from the column's style properties. You need to either:

  • Render the column as a view, and configure that view with a background-color binding based on the incoming view.params.value

or

  • Transform the props.data property to return each cell as a json object like: {'value':, 'style':{'background-color':''}}
1 Like

I keep trying, will try more tomorrow, have a good day.

Hope this helps.

4 Likes

Yeah it works! I used the first method as the dataset is quite long to convert it to json.

In my case I used 3 conditions in the background-color expression binding:

if({view.params.rowData.ESTADO} = "Rechazada", "#C53D20",
   if({view.params.rowData.ESTADO} = "Generada OT", "#C5ff20",
      if({view.params.rowData.ESTADO} = "Pendiente", "#C5C520", "")))

image

I wonder if would be a good Idea trying to do this by script without bindings.

Thanks a lot for your help and yor video Daniel.

1 Like