Tag Color Not working issue

Hello, I am trying to set tag color in tables with JS, but it does not work.
As you can see the JS should result in a proper color, but for some reason it is not displayed

This does not work, and it simply results in a grey tag like so:
Screenshot 2022-06-07 at 17.13.11

However, if I put a string instead of the corresponding javascript, like so:

It works
Screenshot 2022-06-07 at 17.13.42

What should I do?

Thank you very much

@andrea_bluelabs
For the currentRow.core, is there a value you want to check to see if core == 'something' then make the color of the tag #000000 ?
In the JS section...
{{currentRow.core == 'something'?'#000000':'anotherhexvaluehere'}}
OR if it is a value to check within the tags column itself, then
{{item == 'somevaluehere'?'#000000':'anotherhexvaluehere' }}

@ScottR currentRow.core is just a JSONB with the string color in it, the property color inside core is an actual color. for example, in this case, core.color is "#000000"

@andrea_bluelabs
in the ID column - try currentRow.core
I created a column named color and set the value of Entry type column cells based on the cell value in the same row:

@ScottR This works, but for some reason, if you put column type to tag and set the color there, it does not work.
Thank you for your help!

I think there is a limitation in using the value of the other column as a color value when setting it to a tag using currentRow - when using something like
{{item == 'Income'?'#ff4d4d':'#ddf1d9'}} in the JS field for. a tag dropdown it will work.

1 Like

@ScottR

Oh okay, I see, thank you!
So it is not something I can change. If you are interested I managed to find a solution, I used directly the value of the query return value to calculate the color.
So instead of currentRow.color i use query.data.color[i] and it works.

Glad you found a solution!

Hey @andrea_bluelabs and @ScottR! This appears to be a bug on our end (sorry :pensive:), so I've linked this thread to the internal bug report and will write back in once fixed. Glad to hear y'all were able to find a workaround in the meantime!

Our team has recently pushed a fix for this! Cloud instances should see mapped colors working properly with tags as of version 2.96.1 and on-prem instances should see it with 2.96.2 :slightly_smiling_face:

Hello There,
I'm trying to have my tag Column colors customized but it seems to not work at all. Am I missing something? Please advice

Hey @ibrahim! Can you confirm what version of Retool you're seeing this on? You should be able to find it by clicking on the question mark button in the bottom right:

I'm seeing 2.96.1

Got it, thanks for letting us know, I'll bring this back to the dev team and continue to pass along updates. In the meantime, you might try adding that column as a regular column using a transformer, in which case JS colors should work. You can try something like:

{{yourTableData.map(row => ({...row, cancels: (row.cycles[0].cancels / row.cycle[0].approved * 100).toFixed(2)})}}

or

{{formatDataAsArray(yourTableData).map(row => ({...row, cancels: (row.cycles[0].cancels / row.cycle[0].approved * 100).toFixed(2)})}}

to create a new cancels column to work with. Let me know if that helps!

Is there any update on this issue? It's still not working for me.

Hey @sethd12345! Our engineers are still looking into this issue, we'll report back here when it's fixed!

any updates yet? Still not able to get this to work, even when making the column editable

Hey all! Some unfortunate news:

As of version 2.103.0 the Tag type has been deprecated in custom columns. Existing columns with that type will continue to function, however, you'll notice that you can no longer create new custom columns and set them to the Tag type.

In order to get the functionality you'd otherwise have with a custom column you'll want to use the workaround mentioned above, namely:

To add a custom Tag column, use a Transformer to add an extra column to the Table’s dataset and configure it to be a Tag column.

We're looking to make broader changes soon with the upcoming Table v2 component which has a target of being released in Q1 next year.

Thanks for the ping here @ruppal!

Edit: More detailed post on the workaround here