Change Row Color in a Perspective Table On Selected Index From A Tag Change

Ignition
1

I am trying to convert some old FactoryTalk View ME screens into Perspective screens. Having only done vision screens in the past, I am trying to implement functionality similar to a multistate indicator in FactoryTalk View and a list in vision. In vision in the Data property I can create a list of steps to be performed (basically a single column with multiple rows of text). Then I can bind a tag from the PLC to highlight the current active step in the list by binding the PLC tag to the Selected Index property of the list. As the tag in the PLC is changed, the item in the list with the same value is highlighted.

I am thinking that the best approach for this in perspective is to use a table component. The tag in vision that would get bound to the Selected Index property in perspective would get bound to PROPS.selection.selectedRow. The data would get bound from a memory tag of type Dataset or get manually created under PROPS.data as required. What I am struggling with at the moment is how to have the row highlighted based off the tag bound to PROPS.selection.selectedRow.

I was able to read through some other posts on how to change the background based off of specific data in a cell and I played with the example in the help for styling rows based on the value. My concern basing it off of scripting and a cells value is that say the list of steps is changed, then the developer needs to update both the data that is displayed in the table and the data to look for in the script to change the background color.

What I am hoping is that there is an easy way to do what I would like to do based off a change in the value of the selectedRow.

Can anyone provide insight as to if this best approach for this task in a perspective application or is there an easier way/component to use? Any direction, feedback, or guidance on where to look to find out more information is appreciated.

2

In your case you would want to use an expression structure binding. You can configure two items to be in the expression structure; one for your data, and the other for your selected row. This will allow the output to update when either value changes. You would then want to add a script like this to assign your selected color to the row based upon which row value that you have selected.

#Output of expression structure
data = value['data']
rowIndex = value['selectedRow']

output = []
for index, row in enumerate(data):
	if index == rowIndex:
		color = '#00FF00' #Assign your selected color
	else:
		color = '' #other default color
	
	objectToAppend = {
						'col1':{'value': row['col1'], 'style':{'backgroundColor':color}},
						'col2':{'value': row['col2'], 'style':{'backgroundColor':color}},
						'col3':{'value': row['col3'], 'style':{'backgroundColor':color}}
						}
	output.append(objectToAppend)
	
return output

This is also assuming your data is in json or pydataset form. If its the output from a dataset tag then just convert to pydata using

data = system.dataset.toPyDataSet(data)
3

I don’t have ignition on this machine to make sure I have everything right, but I think it would be easier to directly modify the selected row instead of iterating through data and reconstructing it (assuming the default color is already assigned)

for cell in data[selectedRow]:
	cell['style'] = selectedColor