Magic Color Rectangle - setting conditionally

[GOB]

I am struggling to figure out how to use the Magic Color Rectangle for my application.

Sorry if this has been covered before, I searched but I still can’t figure it out.

This post started to explain things

Color Component

The free component Rectangle Component from the Marketplace let you show a color based on database value. I use it in my new app Kooban for filter tags with colors i don’t know if can help you. Exemple : you create a setting with dropdown linked to your database COLORS ( Name + Text HEX CODE ) and in your app you add some Rectangle Component based on Current user > COLORS

but I still haven’t been able to figure it out.

What I would like to do:

I have a collection where scores from each question are collected (call this collection “responses”) and they sum into a total score.

I would like to make a rectangle with conditional background color based on the total score.
For instance, if the total score is < 40 then the background is green, if it is between 40-70, yellow, between 70-100 red.

I set up a collection called HEX colors and made three text entries with the HEX codes for green, yellow and red.

I made a relationship between the collection HEX colors and Records, but I’m not totally sure what to do now.

Thanks for all the help as always!

[Rozza]

Been a while since I used it.
I would do this… for every possible score have a record in your hex colour collection and store the score field. So for <40 you have 39 rows, all green. And so on.

=

[GOB]

Ouch. I may just go with 3 rectangles or circles of different background colors and have conditional visibility.
Is there any way to make it more obvious when different items are “snapped” to each other? I can never tell.

[Rozza]

Yeah 3 conditions will work.
In a list you may get some flashing as the items are loaded.

The advantage of pulling it from a table is you can have a gradient of colour intensity too. Use ChatGPT to output the colours in a table format then import a CSV.

[GOB]

OK, trying to use this method - I used your CSV advice, that was very helpful!

Still not totally sure how to make it work this way.

My Hex Color collection looks like this:

And the data look like the following:

Then when I go to do the color conditional, how do I specify that it is based on score? I don’t see any filtering options:

Thanks again!

[GOB]

ahh, I think I understand now - you want me to update the HEX Color database like this:

Edit: I don’t seem to be updating things correctly - I think I need to update a different field or something to get the two to connect

I think I need to update a different field, but still not sure which one.

[Rozza]

Hey @GOB

When the Record is created, do it from a button in custom list of Hex. Set to return Max 1 record. Filter: Score = Current Score

Then you can write your relationship or just hardcode the Hex code into the Record.

[Victor]

Hi @GOB,

Some time ago I made a video with a magic color rectangle: https://youtu.be/1Zxzw2zJUK8. It might be useful for you to understand the principles.

Best regards, Victor.