Perspective table cell color

Hi All

Using this link below I have been able to set the color of individual rows in a Perspective table based on the value of a cell. I would like to set the colors of individual cells. I can see that the script below is setting a style for the whole row. I have tried to loop through my dataset and assign a style to each cell without any luck. Please can someone point me in the right direction? Thanks!

[Feedback] NEW Perspective Table - Ignition Early Access - Inductive Automation Forum

output_json = []
    
    style_orange = {"backgroundColor": "#F7901D"}
    style_green = {"backgroundColor": "#00AA00"}
    
    for row in range(value.getRowCount()):
        row_object = {}
        
        row_value = {}
        row_style = {}
        for col in range(value.getColumnCount()):    
            row_value[value.getColumnName(col)] = value.getValueAt(row, col)
            row_object['value'] = row_value
            
            if value.getColumnName(col) == 'container_type':
                if value.getValueAt(row, col) == 'can':
                    row_style = style_orange
                elif value.getValueAt(row, col) == 'bottle':
                    row_style = style_green

            row_object['style'] = row_style
            
        output_json.append(row_object)
        
    return output_json

you have to set the style/value a “level” deeper, like so:
the row here is helsinki, the column is jakarta
image
image

for the example code it would be something like: it can be a bit cleaner but this should get you started xd

			if value.getColumnName(col) == 'container_type':
				if value.getValueAt(row, col) == 'can':
					#style row to orange 
					row_style = style_orange
				elif value.getValueAt(row, col) == 'bottle':
					#style cel to green 					
					row_object['value']['container_type'] ={'value':row_value['container_type'],'style':style_green}
1 Like

Thanks! The following seems to work but I now need to sort the keys so that they are in the correct order.

output_json = []
	    
	style_red = {"backgroundColor": "red"}
	style_green = {"backgroundColor": "green"}
	style_gray = {"backgroundColor": "gray"}
	
	for row in range(value.getRowCount()):
		#Clear the row object
		row_object = {}
					
		for col in range(value.getColumnCount()):    
			cell_object = {}
			cell_style = {}
			# Add a key/value pair for the cell
			cell_object['value']=value.getValueAt(row, col)
			
			# Select the style
			if value.getColumnName(col) == 'LED':
				if value.getValueAt(row, col) == 'red':
					cell_style = style_red
				elif value.getValueAt(row, col) == 'green':
					cell_style = style_green
				elif value.getValueAt(row, col) == 'gray':
					cell_style = style_gray
			
			cell_object['style']=cell_style
			
			#Add the cell object to the row object
			row_object[value.getColumnName(col)]=cell_object
		
		#Add the row_object to the output					
		output_json.append(row_object)	
		
	return output_json
1 Like

it might be easier to use “getColumnNames()” instead of “getColumnCount()”, so you dont have to worry about sorting indexes

this:

for col in value.getColumnNames():
....
if col == 'LED':
...
row_object[col]=cell_object

instead of:

for col in range(value.getColumnCount()):
...
value.getColumnName(col) == 'LED'
...
row_object[value.getColumnName(col)]=cell_object
2 Likes

Thanks for your help. That has cleaned up the code a little. I’ll work on sorting the key order in the json string later.

output_json = []
	    
	style_red = {"backgroundColor": "red"}
	style_green = {"backgroundColor": "green"}
	style_gray = {"backgroundColor": "gray"}
	
	for row in range(value.getRowCount()):
		row_object = {}
					
		for col in value.getColumnNames():    
			cell_object = {}
			cell_style = {}
			# Add a key/value pair for the cell
			cell_object['value']=value.getValueAt(row, col)
			
			# Select the style
			if col == 'LED':
				color = value.getValueAt(row, col)
				if color == 'red':
					cell_style = style_red
				elif color == 'green':
					cell_style = style_green
				elif color == 'gray':
					cell_style = style_gray
			
			cell_object['style']=cell_style
			
			#Add the cell object to the row object
			row_object[col]=cell_object
		
		#Add the row_object to the output					
		output_json.append(row_object)	
		
	return output_json

Golfed a bit:

	def getStyle(row, col):
		if col == 'LED':
			color = value.getValueAt(row, col)
			if color == 'red':
				return {"backgroundColor": "red"}
			elif color == 'green':
				return {"backgroundColor": "green"}
			elif color == 'gray':
				return {"backgroundColor": "gray"}

	return [
		{
			"value": value.getValueAt(row, col)
			"style": getStyle(row, col)
			for col in value.columnNames.sort()
		}
		for row in range(value.rowCount)
	]
1 Like

Hi. I tried to use your code in the tag binding transform for my table. I get “Error_Configuration”. The issue seems to be related to the for loops. Please can you explain how this is supposed to work? Thanks for the reply.

My (admittedly untested) code is using a Python feature called ‘comprehensions’ - specifically, a dictionary comprehension nested inside a list comprehension. It’s a sometimes-nicer way to construct repetitive objects like this - there’s no significant advantage over your already working solution.
I probably have a syntax error in there somewhere, the Error_Configuration may tell you more if you hover over it in the designer.

Thanks for the quick reply. I will read up on comprehensions.

Do you know how I can arrange the “columns” of my json into a specified order? I am not using any properties in the table, everything comes from the json. I have read a few posts but nothing seems to apply to my use case.

Perspective Table sortOrder Property - Ignition Early Access - Inductive Automation Forum

Order table column headers - Ignition - Inductive Automation Forum

Your columns will be displayed in whatever order you have the objects in the top-level columns property:
image

You must match the field in each object to a column name in your actual data.

1 Like

Got it - simple fix. Thanks again.

Hi,
I want to change only font color of only one column based on condition.

I tried table-data-query- named query- Add transform . but I am not getting.

I want the table like this with font color change on condition.(Target<Actual) change font color of Actual.
image

I am very sorry since it is urgent requirement for me I am posting the issue again here.
sorry for the inconvenience.

Please help and guide the steps

Set the background color of individual cells in a perspective table

3 Likes

helped me, so brilliant :grinning: