# Designer Color Chooser vs Runtime Color Chooser

**URL:** <https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505>\
**Category:** Ignition\
**Tags:** ignition79\
**Created:** [February 21, 2020, 5:58pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505 "2020-02-21T17:58:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [February 21, 2020, 5:58pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/1 "2020-02-21T17:58:01Z")

</div>

In the designer in Ignition v7.9.x Vision we have this Color Chooser, when we want to change the color on the component:  
 ![designer_choose_colot](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/b8fcead2b1c6eba51c408676ca9a882332682391.png)  
In runtime, with the scripting function **system.gui.chooseColor** we get this:  
 ![runtime_choose_color](https://us1.discourse-cdn.com/inductiveautomation/original/2X/7/7261cd395a0f4f4b39fd8a199ab5293ba65aa70d.png)  
This is very hard to use because of the small color rectangles, especially on the big screens and bigger resolutions… and also on the tablets…

How can we get designer Color Chooser in the runtime?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 21, 2020, 6:11pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/2 "2020-02-21T18:11:11Z")

</div>

`com.inductiveautomation.ignition.client.util.gui.color.ColorEditor` is the class - you can import that and create an instance of it, but actually using it will be tricky. If you use a power table, you can use some static methods in that class - `com.inductiveautomation.ignition.client.util.gui.color.ColorEditor#createTableCellEditor` / `createTableCellRenderer`; using them natively in a popup frame like `system.gui.chooseColor` does would be more involved.

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [February 21, 2020, 6:21pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/3 "2020-02-21T18:21:09Z")

</div>

I just want/need to give the user the possibility to choose his own colors for LowLow, Low, High and HighHigh alarms…

 ![Color_Chooser](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/fa67bb11cda0c599b61172b89b2f8f8c20b52a3f.png)  
How can I use the `com.inductiveautomation.ignition.client.util.gui.color.ColorEditor` for that?  
I need to color these five squares to what color the user chooses…

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 21, 2020, 7:02pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/4 "2020-02-21T19:02:58Z")

</div>

I'd "fake" your UI with a power table. Self contained window example here:  
[test\_2020-02-21\_1025.zip](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5ac20a664f41a46c21170d2504d7471702bb55dc.zip) (5.5 KB)

### `initialize()`

```python
	from com.inductiveautomation.ignition.client.util.gui.color import ColorEditor
	self.putClientProperty("editor", ColorEditor.createTableCellEditor())
	self.putClientProperty("renderer", ColorEditor.createTableCellRenderer())

```

### `configureCell()`

```python
return {'renderer': self.getClientProperty('renderer').getTableCellRendererComponent(self.table, value, selected, False, rowIndex, colIndex)}

```

### `configureEditor()`

```python
return {'editor': self.getClientProperty('editor')}

```

 ![color](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c750736e23673fda05b773aada306358180b47cb.gif)

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [February 21, 2020, 7:16pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/5 "2020-02-21T19:16:51Z")

</div>

Looks cool, but I have Ignition v7.9.13…  
Please…

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 21, 2020, 7:32pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/6 "2020-02-21T19:32:24Z")

</div>

The same code should work - you’ll have to implement `isCellEditable` and `onCellEdited` as well, but the default scripts should work. You’ll also want to make your dataset with the appropriate cells, making sure they’re actually `Color` type cells.

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [February 21, 2020, 7:35pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/7 "2020-02-21T19:35:11Z")

</div>

How can I choose Color type? There isn’t any to choose from…?

 ![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/8bccfe28e4f324ac5dc732901a94bf74a8c730db.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 21, 2020, 8:38pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/8 "2020-02-21T20:38:51Z")

</div>

You’ll need to create the dataset with scripting.

`table.data = system.dataset.toDataSet(["color"], [[system.gui.color(255, 0, 0)]])|`

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [February 22, 2020, 8:23am UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/9 "2020-02-22T08:23:59Z")

</div>

OK, I managed to create a power table with a color type cell in v7.9.13.  
But there is no “drop down” for colors… click on the cell does nothing…  
When I open the window in the designer I get this error in the output console:

 ![Capture2](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/f72d0a425507d21b4880f1a1bd02fb9b97fb4cbf.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 22, 2020, 9:55pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/10 "2020-02-22T21:55:32Z")

</div>

Fwiw, letting the operator change alarm colours doesn’t sound like the best idea. These are better off being standardised so that all operators know exactly what they mean and they apply for any person, for any page. Just my 2c

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 24, 2020, 4:16pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/11 "2020-02-24T16:16:02Z")

</div>

Close the window and reopen it. The `initialize` function only runs when the power table is first created, and doesn’t re-run when the function is changed, so the `renderer` client property hasn’t been set up.

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [February 24, 2020, 5:14pm UTC](https://forum.inductiveautomation.com/t/designer-color-chooser-vs-runtime-color-chooser/32505/12 "2020-02-24T17:14:49Z")

</div>

Thank you. Your code works flawlessly…  
My problem was that I didn’t check the editable checkbox in the Table Customizer. I totally forgot about it.  
Now everything is working and it’s already in production and users are happy.

 ![ColorChooser2](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/34d697b9277beaf4afeb6d7033a8bea17b1b456e.gif)
