Issue with Applying Colors to Tag Type Property in Key-Value Component

[Hayoung_Lee]

• Goal: I want to assign specific colors to the tags based on their status.

• Steps:

1. I unchecked the "Assign tag colors automatically" option.
2. I applied the following JavaScript expression to set the colors:

javascript

{{ 
  {"Active": theme.success, "Archived" : theme.danger, "Terminated" : theme.danger, "Pending" : theme.info, "Waitlisted": theme.info }[item]
}}

• Issue: The expression should result in the color theme.danger for certain statuses. However, the tags are displayed with the color theme.success instead, as shown in the screenshot below.

• Screenshots:
  
  
  

[joeBumbaca]

Hey @Hayoung_Lee, set this up to try and repro but this seems to be working for me. I'm likely missing some setup that you have. Do you mind sending over an app export with a little sample data so that I can investigate further. Thanks!

[Hayoung_Lee]

I successfully used HTML to achieve a similar appearance. In case someone else is facing a similar issue, I'm sharing the code below:

<span style="
  font-weight: bolder; 
  color: {{item=="A"?"#C76600":"#023E89"}}; 
  background-color: {{item =="A"? "#FFE5D2" : "#BFDBFE"}}; 
  padding: 2px 5px; 
  border-radius: 13px; 
  display: inline-block;">
  {{item}}
</span>