Change Perspective Table Row Color Programmatically

Ignition
1

Hello,
I’m trying to set the background color of rows in a perspective table. I’m stuck with the following:
I am running a onClick script on my table that should change the self.props.rows.striped.color from odd to even if a condition with the row is met. But, I can’t seem to get the syntax correct. Within the color object array are 3 values: even="#FFFFFFFF, odd="F4F4F4F4, and other=“FFFFFF00”.
How would I set self.props.rows.striped.color to select one of these?

2

You question is a little unclear. Are you trying to perform this change in the onClick script? Where does the color “object” you mention live - in the script, or as a property somewhere?

1 Like
3

@cmallonee
The Color Object Array is part of the the Table component in. The Table has an onclick script that should perform the following actions:
1.Look though the table to find matching conditions.
2.Change the Color Object Array to its correct color code( odd could become even)

even and odd are just what is there by default and Ignition seems to have them built in.

4

You should look at this post which describes how to configure your data to allow for what you want to do. The important part is that you will need each data element configured in the following manner (along with whatever other properties you desire):

{ 
        "value": {   // The rows value. 
           "keyOne": { // Custom cell configuration.
              "value": "First Column Value"
            },
            "keyTwo": { // Custom cell configuration.
              "value": "Second Column Value"
            },
            "keyThree": { // Custom cell configuration.
              "value": "Third Column Value"
            }
        },
        "style": {  // Custom row styles.
        }
    }

THEN in your onClick event, you’ll want to perform your logic while applying colors to the data[rowIndex].style.backgroundColor property.

#entirely pseudo-code
for row_index in range(len(self.props.data)):
    condition_met = data[row_index].value.keyOne == 'Color this row'
    if condition_met:
        data[row_index].style.backgroundColor = "#FFFFFF00" #desired color here
5

@cmallonee
Thanks, I’ll take a look at that.

6

@cmallonee
Best I can tell from what I have been trying I have to style each of the cells in the table individually, something like this:

	self.getSibling("Table").props.data[4] = 
    {
	"country":
	    {
	    "style":
	        {
	         "backgroundColor":"#FFFF00"
	        },
	        "value":"USA"
	    },
	"city":
        {
	    "style":
	        {
	        "backgroundColor":"#FFF000"
	        },
	        "value":"Test"
	        }
	       
	}```

It ain't great but if I run my code through a script by row by column I can format it and send it back.
7

Yes, by including the style as part of the row objects, you’re responsible for styling the rows.
In your supplied example, you’re applying the style to the cells.

8

Hi @cmallonee
I’m super new to scripting on perspective, I tried using your pseudo code to get the data of a table component and go through the rows checking for one value so that I can change the background color of that particular row but I keep getting object has to no attribute ‘data’ error. I have the script triggered by a Mouseclick event.

I also tried getting the dataset of the table through ‘self.getSibling(“Table”).props.data[index]’ like @nick.shea did but I’m not able to print the dataset array. I’m populating the table using a named query if that helps.

My agenda is to highlight a row if it one of the column value meets the criteria. In your opinion, what would be the best option? Any help is greatly appreciated.

Thanks
Sam

9

The error you're encountering is the code telling you that the component which is invoking the code has no data attribute, because the spseudo-code is targeting the wrong property level. You need to change the self.data reference to self.props.data

This code here will get just one row of the table data, AND it will not work if your data is stored as a dataset. This code is dependent on the data having been converted to an array type. You can easily switch the data from dataset to array by switching the return type of your Named Query binding. There should be a dropdown in the upper right of the binding screen which probably says "default". Change that to JSON, and your data should change shape to an array.

10

Thank you so much, Sir! I’ll try this approach.

11

I just want to make the top row of my table bold, but I am binding the data property to a script where I am building the dataset. How can I store a value in the data property as "an array type" in python?

12

If you’re building it yourself, then instead of building a dataset, you’ll need to construct the array of objects. I’m not sure where you’re getting the data from, but this is the general structure of the transform.

data = []
for i in range(len(value)):
    data_obj = {"value": {"keyZero": value[i]['someKey'], "keyOne": value[i]['someOtherKey']}}
    if i == 0:
        # make only the first row bold
        data_obj["style"] = {"fontWeight": "bold"}
    data.append(data_obj)
return data
1 Like