How manage 3 different status with tag label column?

App Building
1

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

image
image1210×610 64.6 KB

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

1 Like
2

You can "nest" ternary expressions like this:

Screen Shot 2022-12-01 at 9.56.29 AM
Screen Shot 2022-12-01 at 9.56.29 AM2402×1718 449 KB

1 Like
3

i tried this and works:

image
image822×586 51.8 KB

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

4

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.

Screen Shot 2022-12-01 at 10.09.10 AM
Screen Shot 2022-12-01 at 10.09.10 AM2420×1134 408 KB

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

Screen Shot 2022-12-01 at 10.09.35 AM
Screen Shot 2022-12-01 at 10.09.35 AM2062×650 87.5 KB

.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;
}
1 Like
5

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

6

You can customize it however you like.

7

can you send me the html of mapped value ?

8

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>
1 Like
9

should i still use this?

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

not sure how to implement that code with yours

10

i use this method and works

11