Hi all!I am currently using if conditions on a value (from 0-100 for example) to assign colors to a tag.
This is pretty time consuming to develop (having to manually write all case scenarios for 10 colors for instance) and I was wondering if there is a way to dynamically change the color of an element based on a integer/decimal. Excel can do it through conditional formatting using a scale.
Ideally it would work like this:
I have a variable (integer or decimal) that ranges from 0 - N. I would define the starting color (0) and ending color (N) and depending on the value of that variable, the color would change within that gradient.
If this is not currently possible on Vanilla Outsystems, I was wondering if anyone came across a forge component that does that. If not, I will try my best to write a forge component that achieves this.
Hi,
I know you are explicitly asking for CSS in the title, but if you are open to other options, you could just make a function to calculate a middle color based on 2 edge colors and a percentage, and apply that function for example in a style attribute on your element.
see attached example oml, screen = ColorTest
Dorine
Hi Dorine! This is exactly what I was looking for! It will calculate the gradient change on the color instead of pulling it from a predetermined list.
Thanks for going above and beyond with that OML!
Hi Vinicius,
This should be possible using CSS variables, which value you can change at runtime.
For more deta9ls see:
Regards,
Daniel
Hi Daniel! Thank you for the response! I see that you shared information about changing CSS variables at runtime using JS.
I am trying to relate this information to the problem at hand, but I don't see your point of how that'd achieve what I proposed..
Could you clarify?
My thoughts, were this:
This logic doesn't require you to use an if, and whether the List has 10 entries or 200, you don't need to change the logic.
What you could do is to use css selectors to set the background color based on a data attribute.
Insert a container widget (or a custom html element).
Add a Style class and data attribute e.g. data-color-value and assign a static value or an expression asf.
Add some custom css to your theme like this
Unfortunately, Chrome does not support the attr() css helper, which would ease the process further as you could calculate the background color using the value from the data attribute.
Best
Stefan