Hi may i ask if it possible to put a if statement in css? 

I want to show the input filed if it has data the background color will change it gray color 

so it add a if statement in the  css,

but it doen't change.

Do i did things wrong? 

Thank you

Hi eva wong,

Use the Expression Editor  provided by Outsystem for such kind of requirement:

1- Goto Style Classes -> Expression

2- Add If condition as per you requirement & declare classes to be applied

   if( Condition , "Name of Classes When condition True","Name of Classes When condition False")

3- The CSS will be applied dynamically based on condition result to the Input Widget




If(True,"form-control backgorund-grey","form-control")

Thanks


Hi 

It is not possible to have an if condition in the CSS. 

However OutSystems recommends the use of expressions in the Style Classes property.



The above is the best practice recommended by OutSystems.

To know more such best practices, check out the link 

https://success.outsystems.com/Documentation/Best_Practices/The_Complete_Guide_to_Creating_Components

Dear Eva,

You cant have an if statement directly on CSS. However, you can achieve what you are looking for using the below technique. Track the input:placeholder-shown on CSS and you can toggle the styles based on the presence of input data. Check the screenshot below and try to implement on your solution.

input:not(:placeholder-shown)




Have a nice day.

Thanks