Individually Color Text/Cells of a Perspective Table (ft. PLC tag data)

Hello all,

I've been attempting to color the text and/or background cell color of a table in Perspective which is populated by individual PLC tag data. Perhaps this isn't the ideal way of populating a table worth of data, but I find the tables format nicely and have been using them for "KPI readout" type features on certain displays. In keeping with high performance HMI theory, I'd like it to be generally monochrome, but I would like to change some cells or text to red if need arises.

I've referenced a few different posts on here, linked below. I'm struggling to convert their concepts into a functioning design for my application, as it seems like they either use datasets or some other means of populating a table. I only have a few data points I'd like to apply a dynamic color to, so I am fine with configuring them all individually, I'm just currently a bit stumped. I'm also not really sure where it's going wrong, so if there's any specific information I can provide to help you help me, please let me know!

Thanks!

References:
https://forum.inductiveautomation.com/t/cell-color-in-perspective-table/50966
https://forum.inductiveautomation.com/t/perspective-table-cell-color/50047
https://forum.inductiveautomation.com/t/change-style-of-cell-component-table-via-script-perspective/44573

If the examples here don't help you solve it, could you share screenshots of how your table is being populated?

1 Like

Below is an example of how I have my tables set up (this isn't one I would color anything on, but they're all set up essentially the same). I have a column for static text labelling what the row is giving information about, and a column containing data which is either bound to an OPC tag from my PLC, or occasionally a named query to return a single piece of data from my MySQL database.

I would like to color the text of the data cell if possible. I have watched the video you provided, and I definitely prefer the second option if there's a way to do that without needing json data from a query, as a vast majority of my cells are OPC PLC tags that I just don't need historical data for, so I'd prefer to not have to introduce an extra step of sending them to a database.

I was wondering if there's a way to just add a "style" object to each piece of data manually, like how the result of your second option works (first image below):

image

My data:

data

My table:

table

Thanks again for the assistance!

Right-justify the numeric column, please! Add some padding to the right side so that they don't jam up against the edge of the container (and left padding for the first column).

You might be interested in a more subtle color indicator at the left ()or right) edge of the cell by just setting a thick colored border on that cell. See Filtering a table with Named Querie with 3 checkboxes in Ignition Perspective - #17 by Transistor.

Subtle color indicator

You can examine the style structure in the Folsom cell on the default Table component data.

1 Like

Thanks for the advice on formatting - this isn't a live-ready view yet so I haven't fully polished everything. Will definitely be doing that!

The cell border option is even better than colored text for this application, thanks for the excellent idea.

I had looked at the Folsom example previously but wasn't able to replicate it for some reason. I just tried again, however, doing the exact same thing as I did last time (as far as I can recall...) and it works. So now I have both options if needed, thanks so much!

Yes. Using a style class like @Transistor suggested, you could have the data property manually structured like this:

[
{
'Area': {'value': 'Line 1 Logs', 'style':{'classes': 'somestyleclass'},
'LogCount': {'value':'82, 'style':{'classes': 'somestyleclass'}
},
{
'Area': {'value': 'Line 2 Logs', 'style':{'classes': 'somestyleclass'},
'LogCount': {'value':'129, 'style':{'classes': 'somestyleclass'}
},
{
'Area': {'value': "9' Logs", 'style':{'classes': 'somestyleclass'},
'LogCount': {'value':'3, 'style':{'classes': 'somestyleclass'}
}
]

1 Like