Power Table Color Selection

Ignition
1

Hello-

Is it possible to configure a column in a power table so user can select a color when filling out the table? Similar to this type of color selection dropdown that we see on various properties in the designer:

57%20AM

2

If the column in the dataset is a Color datatype, you should automatically get a color editor. How are you creating the dataset in your power table?

3

I was planning on querying/updating a SQL table with a ‘color’ column. If SQL column is string/varchar is there a way to format the varchar where the table would recognize as a color datatype? Or I would need to create dataset via scripting and coerce column with system.gui.color?

4

Just wanted to poke you again about this. Thanks!

5

Scripting it with system.gui.color() is the only automatic way to get the power table to open a color editor, I believe. I vaguely recall someone getting a custom editor for the column to do this.

6

Snippet for changing the renderer for a power table cell to our built-in color editor:

renderer = self.getClientProperty("renderer")
if renderer == None:
	from com.inductiveautomation.ignition.client.util.gui.color import ColorEditor
	renderer = ColorEditor()
	self.putClientProperty("renderer", renderer)
renderer.setSelectedColor(value)
return {'renderer': renderer}

You could probably apply (roughly) the same methodology to a custom editor, but if you’re going that far, it may still be easier to just change the column values to native Color types - you’ll need to run the query (I would suggest making a new custom property), then on propertyChange of that new property, run your script that will change the column values to colors.

1 Like
7

To follow up here, this way doesn’t seem to work, unless I’m missing something (which is usually likely). Here’s a script on a button component to build table.

table = event.source.parent.getComponent('Power Table')

headers = ['ID', 'Label', 'StatusImagePath', 'Foreground', 'Background']
data = []

data.append(['1', '1', '', system.gui.color(0,0,0), system.gui.color(255,255,255)])

table.data = system.dataset.toDataSet(headers, data)

13%20AM

8

Thanks! So I pasted this script into configureCell and the cell now appears to have the renderer, at least outwardly. However, when I click into it it changes to edit the string ‘java.awt.Color[etc]’ instead of the dropdown color menu. I changed the column to editable and enabled isCellEditable, onCellEdited. What else am I missing? I can change the string color (ie 255,255,255 to 255,0,255) from the table numbers and it does change the renderer cell color but still no drop down.

07%20AM

9

So, now you’re fully in the weeds of Java Swing’s editing model for tables. Changing the renderer will, as you noticed, only change the actual appearance. What you need to do is supply a different editor, (which you can, through our extension functions) to the color picker you want, rather than the simple text field. You’ll want to follow basically the same strategy as that other snippet - although you could also “cache” your renderer and editor in the initialize function, instead. The main difference is that you’ll want to return a dictionary with {'editor': }.
To create the editor instance, you can use the same ColorEditor import - call the static method createTableCellEditor() like so:

from com.inductiveautomation.ignition.client.util.gui.color import ColorEditor
editor = ColorEditor.createTableCellEditor()

You can also clean up the renderer code a little bit - there’s a matching static method createTableCellRenderer() in ColorEditor.

But, keep in mind this will only work as long as your actual values are Color types - still no string coercion. That’s technically possible if you implement your own table cell editor, but that’s a distinctly non-trivial operation.

1 Like
10

Awesome, got that to work. Thank you for the help. That will keep me going for a while now, thanks :slight_smile:

2 Likes