Change row color of table based on a value of the row

Ignition
1

Hi, im using a table in perspective that shows the results of a query, im trying to change color of the row based on the value of a field in the table, is it possible?

2

Yes you will need to use a transform script and build the styles object for each row.

3

Can you give me an example of howt get the value i want to transform from the dataset?

4

Bind the data property to a named query. My original SQL statement was the following:

SELECT WorkstationID, WorkstationTypeName, WorkstationName FROM Workstations;

Set the return format as JSON.

Modify the transform code posted below to match your specific application.

def transform(self, value, quality, timestamp):
	new_list = []
	
	# Iterate over each dictionary in the original list (results from database table)
	for item in value:
	    # Create a new dictionary for the converted JSON
	    new_dict = {
	        "WorkstationID": item["WorkstationID"],
	        "WorkstationTypeName": item["WorkstationTypeName"],
	        "WorkstationName": {
	            "value": item["WorkstationName"],
	            "editable": True,
	            "style": {
	                "backgroundColor": "#F7901D",
	                "classes": "tables/rowIsDecommissioned"
	            },
	            "align": "center",
	            "justify": "center"
	        }
	    }
	    # Append the converted dictionary to the new list
	    new_list.append(new_dict)
	    
	return new_list

As you loop through each item in value (the original SQL results) you can check on various values and then modify the backgroundColor as needed.

I was looking for the answer also to this question and eventually had ChatGPT spell it out for me in the example above (with some slight modifications since Ignition takes care of certain tasks in the background). I hope this helps others.

5

Actually, your solution would only change the background color for an individual cell (WorkstationName) - not a row. We've already had multiple threads which convey how to do so, including this one here which covers how to do both cells and rows.

1 Like