CSS color dynamic | OutSystems

Andrew Tabata

CSS color dynamic

Question

Hi Comunity...

i have a dashboard with some values of expected visitors and real visitors, and then a calculate the difference.
If the Value is positive apply the css ie color green, if negative color red. How to implement this?

Best regards
Andrew Tabata

08 Apr 2015

Ricardo Vaz Alves

Hi Andrew,

You can add your conditional CSS in the widgets' extended properties part menu. Below there's a small example of how you can achieve it:

Hope this solves your problem.

Let me know if you have further questions.

Regards,
Ricardo Alves

08 Apr 2015

1 reply

18 Feb 2020

Show thread

Hide thread

Steve Pope

Ricardo Vaz Alves wrote:

Hi Andrew,

You can add your conditional CSS in the widgets' extended properties part menu. Below there's a small example of how you can achieve it:

Hope this solves your problem.

Let me know if you have further questions.

Regards,
Ricardo Alves

Do you know how to do this for a check box??
I have an app where I'd like to change the background if checked and updated from orig value to RED, and #FFBBBB if Unchecked and updated from orig value..
At the moment I'm resorting to changing the Font color of the Title, to red, but it is clunky and not consistent with what we are doing for other fields..

Thanks in advance..

18 Feb 2020

Tiago Neves

Hi Andrew,

You can apply conditional formatting in the extended properties of the widget. For property "style" you can write some condition in it's value applying functions as If() or any other and refresh whenever the calculated difference changes.
The same principle applies to other extended properties you might want to use.

08 Apr 2015

Andrew Tabata

Hi again...
I forgot to mention that i knew in the extended properties to apply conditions, but therefore i have to click each cell and apply that style.there isn't any method more generic to do that is there? Like ie, apply a CSS generic to adopt that color, instead of cliking and applying each cell that style in extended properties.

08 Apr 2015

Tiago Neves

Andrew,
It depends on what exactly you want to change - I mean, as an example, you can apply style at a row level.

Another idea is using a text variable, that you use in the extended properties and set elsewhere, instead of writing everytime "blue", "white" etc...

08 Apr 2015

Tiago Simões

Staff

Hi Andrew,

Not really sure if understand your scenario, but tou can alway use a class extended propery in the row e.g.

And then in the row extended properties:

08 Apr 2015

Andrew Tabata

Hi,
Since it was calculated values i had to do cell by cell, thanks Ricardo Alves, Tiago Neves and Tiago Simões for the help.
Really Aprecciated!!!
Ty

Best Regards
Andrew

08 Apr 2015

Nhorwin John Villano

Hi,

How about having a condition with 3 results? for example, i want to set the style with red, blue and white?

10 Apr 2018

Jorge Martins

MVP

Hi Nhorwin,

Given this is on topic, I'll just answer it here, but in the future please refrain from waking up old threads from 3 years ago ;) It is best to just post a new question.

Why not chain two If() functions? For instance, if you want that behaviour on text color, assigning something like this to the style extended property would do the trick, no?

"color: " + If(condition1, "red", If(condition2, "blue", "white")) + ";"

Hope this helps!

10 Apr 2018

Jitender Gaur

Hi Steve,

You can Check condition On Check Box On Change event. You can set local variable as Variable parameter to Checkbox and On Change event you can verify the variable to set condition True/False.

18 Feb 2020

Jorge Martins

MVP

Hi Steve,

There still is no easy way to style a browser's default checkbox/radio-button look & feel without replacing the entire thing with your own. This is actually what has been down in OutSystems in recent versions of the platform that use Silk UI or OutSystems UI.

I did some digging using the OutSystems UI Reactive Style Guide, but it should be similar for OutSystems UI Web:

You can change the background of the checkbox by setting the background-color of the [data-checkbox]:before selector, like this:

[data-checkbox]:before {
  background-color: #FFBBBB;
  border-color: #FFBBBB;
}

And for the background once selected use:

[data-checkbox]:checked:before {
  background-color: red;
  border-color: red;
}

As is, this would apply to all Checkboxes in screens where this CSS is applied.

Hope this helps!

18 Feb 2020

1 reply

18 Feb 2020

Show thread

Hide thread

Steve Pope

Jorge Martins wrote:

Hi Steve,

I did some digging using the OutSystems UI Reactive Style Guide, but it should be similar for OutSystems UI Web:

You can change the background of the checkbox by setting the background-color of the [data-checkbox]:before selector, like this:

[data-checkbox]:before {
  background-color: #FFBBBB;
  border-color: #FFBBBB;
}

And for the background once selected use:

[data-checkbox]:checked:before {
  background-color: red;
  border-color: red;
}

As is, this would apply to all Checkboxes in screens where this CSS is applied.

Hope this helps!

Thank you for taking the time to look at this.. Couldn't get this working in Os 10... tried versions with [data-checkbox] and [checkbox]... Quite frustrating as I have it working for normal inputs.. Checkboxes are not obvious if they have been updated, from the original value.

18 Feb 2020

Jorge Martins

MVP

Steve,

I don't know how this was implemented in Silk UI, maybe not exactly the same?... but don't have any O10 server to analyse. You can use the Browser's Developer tools to inspect what styles are applied to your Checkboxes, it's likely something similar to what has been implemented in OutSystems UI on O11.

19 Feb 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines