How manage 3 different status with tag label column?

[agaitan026]

Hi im building an app where i got 3 status for a product lets say: ordered, partial and completed

how i can configure tag label column to have different color per status? example

if status = ordered will have a text and a color if status = partial will have another text and color and status = completed will have another text and color.

how i can achieve this?

thank you

[benbarry]

You can "nest" ternary expressions like this:

[agaitan026]

i tried this and works:

what you think? and theres any chance to change the text color of the Label? thank you

[benbarry]

I think that the text color uses Retool's "contrast text", so it will automatically pick light or dark based on the background color. There might be a way to change it, but I don't know it.

If you don't need the dropdown, here is a method I have used that does allow you to specify the color of the text:

Use an HTML column type.

And add this custom CSS (at the settings level, or the app level)

.htmltag {
    background: var(--tag-background,var(--retool-tags-default-background,var(--retool-tag-default-background,var(--washed-gray))));
    border-radius: min(var(--retool-tags-border-radius,var(--retool-tag-border-radius,10px)),10px);
    color: var(--tag-text,var(--retool-tags-default-text,var(--retool-tag-default-text,var(--dark-gray))));
    display: inline-block;
    font-size: 12px;
    font-weight: var(--tag-weight,600);
    line-height: 20px;
    min-height: 20px;
    padding: 0 8px;
    margin: 2px 6px 2px 0;
    position: relative;
}

[agaitan026]

looks good, but in my app i just need to change the label text color, not the whole row or column

[benbarry]

You can customize it however you like.

[agaitan026]

can you send me the html of mapped value ?

[benbarry]

You'd need to customize this based on your own needs, but here is the HTML I have used:

<span class="htmltag" style="background-color: #{{ !table1.selectedRow.data ? self['0'].color :  table1.selectedRow.data._id == currentRow._id ? "ffffff" : self['0'].color }}; color: #{{ !table1.selectedRow.data ? "ffffff" : table1.selectedRow.data._id == currentRow._id ? self['0'].color : "ffffff" }} ;">{{ self['0'].title }}</span>

[agaitan026]

should i still use this?

{{self == 'ordered' ? 'Generada' : '' | self == 'partial' ? 'Parcial' : '' | self == 'completed' ? 'Completada' : ''}}

not sure how to implement that code with yours

[agaitan026]

i use this method and works