# Cell color related to content in Ignition Perspective

**URL:** <https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 23, 2024, 9:49am UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269 "2024-04-23T09:49:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 23, 2024, 9:49am UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/1 "2024-04-23T09:49:28Z")

</div>

Hello!

I have defined some background colors in Ignition Perspective:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5fb2dd570c5c5ab70a4f16aabf12130abb4aa9dc.png)

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

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

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/7272a721fd9849c27eb914e78fc257a0a02dfe22.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3f8a3169fb6495919b5fb47adb64ffb04648dc5f.png)

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

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 23, 2024, 9:53am UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/2 "2024-04-23T09:53:40Z")

</div>

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.

```python
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"
)

```

> **[case | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/expression-functions/logic/case)**
>
> This function acts like the switch statement in C-like programming languages.

> **[switch | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/appendix/expression-functions/logic/switch)**
>
> This function acts like the switch statement in C-like programming languages.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 23, 2024, 11:54am UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/3 "2024-04-23T11:54:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 23, 2024, 12:49pm UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/4 "2024-04-23T12:49:32Z")

</div>

my bindings now should link to background\_color withing styles

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a59dc8906d3addf487ee91c6f26b327994bbcb81.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 23, 2024, 1:02pm UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/5 "2024-04-23T13:02:24Z")

</div>

You can put the expression binding on `style.classes`.

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [April 23, 2024, 3:49pm UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/6 "2024-04-23T15:49:19Z")

</div>

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':''}}

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 23, 2024, 4:03pm UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/7 "2024-04-23T16:03:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danieltalbot](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/danieltalbot/32/11201_2.png) [@danieltalbot](https://forum.inductiveautomation.com/u/danieltalbot)\
**Post date:** [April 23, 2024, 7:19pm UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/8 "2024-04-23T19:19:46Z")

</div>

Hope this helps.

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/8082040ac2e62ab8bada1bd4ccc7c7d91aed1fc6.jpeg "How to Dynamically Style Individual Table Cells") ](https://www.youtube.com/watch?v=OFxTmLNGQWk)

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [April 24, 2024, 7:20am UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/9 "2024-04-24T07:20:57Z")

</div>

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:

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

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/0/50583ca8db8a7e9098dee7b43b38405e246ce182.png)

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.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [May 29, 2024, 7:10am UTC](https://forum.inductiveautomation.com/t/cell-color-related-to-content-in-ignition-perspective/89269/10 "2024-05-29T07:10:17Z")

</div>

Hi @danieltalbot

Using an adaptation of your second option on a Tranform of the Named Query and also working great

```python
def transform(self, value, quality, timestamp):

    output = []

    value_mapping = {
        1: "Adecuado",
        2: "Trivial",
        3: "Tolerable",
        4: "Moderado",
        5: "Importante",
        6: "Intolerable"
    }
    

    color_mapping = {
        "Adecuado": "#73F093", # Green
        "Trivial": "#B2FF66", # Light Green
        "Tolerable": "#ECF293", # Yellow
        "Moderado": "#F0B473", # Orange
        "Importante": "#ffa7cc", # Pink
        "Intolerable": "#E60012" # Red
    }
    
   
    py_data = system.dataset.toPyDataSet(value)

    for row in py_data:
        newRow = {}
        for col in py_data.getColumnNames():
            cell_value = row[col]
            if cell_value in value_mapping.values():
                bgColor = color_mapping[cell_value]
            else:
                bgColor = ""

       
            if bgColor:
                newRow[col] = {"value": cell_value, "style": {"backgroundColor": bgColor}}
            else:
                newRow[col] = cell_value
        
        output.append(newRow)
    
    return output

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e729b64c136588b57e810ecdaba67e3400288826.png)

This one done with your first option:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c47de9a2eeacfca80c3f98e7dac0e7a5a5b17a62.png)

Thanks