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
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
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.
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.

 
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...


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:


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

Hi, 

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

ty

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!

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..


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. 

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!

Jorge Martins wrote:

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!

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.


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.