Conditional formatting of inline list text

Hello,

I have an inline list and I want to be able to format the text so that depending on the value of some other fields, the text will show up in either green, yellow, or red. Is there any way to accomplish this? I’ve seen that the inline list items can be formatted using css, but I need the formatting to be conditional.

Any help would be greatly appreciated!

Thank you,

Paul

It’s possible, but can get incredibly complicated, especially if your list is filtered and/or sorted.
I think that @ThinhDinh might have done this. Although I suspect he might advise against it.

A much simpler option is to use coloured emojis, with a combination of an if-then-else and template column. So something like:

  • If green condition, then :green_circle:
  • If yellow condition, then :yellow_circle:
  • If red condition, then :red_circle:

And then use a template column to combine the emoji and the list item text.

2 Likes

Yeah, I would advise against CSS from now on to be honest. If you’re comfortable with doing inline styling using HTML in Pages then it’s ok to custom your own elements, that’s the best thing I can advise from now on.

2 Likes

Thank you @Darren_Murphy for your response. I previously had the colored emojis, but it wasn’t clear what they meant and I wanted to instead format the text using those colors.

Ok, @ThinhDinh thank you. so it sounds like the answer is no – it isn’t possible?

I wouldn’t say it’s impossible, but it can break very soon, so the best thing is stay away from it.

1 Like

ok, well the thing is that I have some demos coming up and would really like to have that implemented, even if it meant having to change it again in the future. Do you have an outline of how it might be accomplished at least?

Please copy this back and let me know if it works.

I used some CSS to get the “category” text to look like a tag, with colors.

Please note again that this might break very soon and you might have no way to make it look like that again in the future.

2 Likes

Thank you, your suggestion is helpful even if it breaks, as it showed me the general pattern for using css on a list. I’m unfortunately not able to get it to work in my app after copying the pattern as exatly as I could. could you maybe take a look at what I’ve got? Glide

Only you can access the link you provided. If you want me to view the app directly, please provide, in personal message the link to join your team, and state clearly what you want to do. Thank you!

1 Like