Conditional colours / colors or status indicators for collection items

For pages in particular, I think it would make sense to have some sort of colour coding or status indicator for collection items.

Something along the lines of…

  1. if a project has status “pending payment” or “past deadline”, add a subtle red status indicator in the corner of the collection item

  2. if a project has status “completed”, add a green accent or indicator

While this can probably be done with CSS, I am sure that Glide doesn’t expect it’s users to know CSS when building their apps.

I tend to use colored emoji for things like this.

I’ve even mimicked a Hint component using HTML DIV tags with inline CSS styling to get a little more customization with text. The screenshot doesn’t really show it, but the colored bars will also change to yellow or red depending on the selected choice.

1 Like

Just to give you a better idea with different choices selected.

(This is with a custom collection)

Nice! Custom collections are opening up a few doors :+1:

Maybe Glide can add something for cases where data needs to be more compact.

You can still use emoji. It’s just a single character and can be placed in any text or image attribute in a collection. It doesn’t have to be a custom collection.

True. What is the best way to add emojis to your app/page in your experience?

Would you just copy them into the data editor / set value action? Do they display natively on each OS?

It depends how you are using them. Emojis are unicode characters and most (if not all) browsers support them. So essentially, you can use them anywhere you can use text.

In the example that Jeff gave you, I’d imagine that his emojis might be output from an if-then-else column that checks the status. Or they might be the result of a relation + lookup, or maybe even a single value. Whatever the case, I’d be quite confident in saying he would be managing them in the Data Editor. Personally, I don’t think I’d ever add emojis with a set column values action, but you could do that if it worked for your use case. Or you could just paste them directly into component text fields.

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.