I am trying to change the font color of a text widget based on the value in an entity. If the value is blank then I want to change the color of the text so they know they need to fill in the data.
The text is in a link that takes them back to the screen where the data needs to be entered. Below is what I used, based on some examples I saw in other posts.
I used red and green because I wanted to see if it was working at all. It doesn't change color to either red or green.
I want to do the same thing on the original screen when they click save. Although for this I would like to set it in the OnSave event if that's possible. The screenshot below is from the screen where they initially fill out the information. When they click save I would like to either change the color of the label or the border of the input widget.
I believe you would need to put "color: red" and not just red... Or you can create or reuse a class from OutSystems to give the colours to the expressions using the style classes which I recommend you do as using inline styling is not recommended...T
To change the border you would need to create an extended class for the input and change the border!
Let us know if our answers helped you! :)
Kind Regards,
Márcio
You are correct. When I added color: it worked. Now I will look at using a class.
Hello Paula Wright, My recommendation would be for you to put the condition on the style class attribute under the text one, and not on the attributes below (they are inline). Also, you already have some text-color classes on the OutSystemsUI theme that you can use, like this one: (which in this case is green)
So, your condition could be, for example:
If(.....DBAName="", "text-error", "text-success")
Note, there aren't any default classes called just "green" or "red" on OutSystems UI, but you can create classes like that if you want.
Best regards,
Ana
Ana, thanks for your reply. I'm new to OutSystems and web development and I'm not sure I'm following what you're saying.
I created a class (I thought) by going to Style Classes and clicking on Style Sheet Editor.
When I typed in If(GetCustomerById.List.Current.Customer.DBAName = "","required-field", "#54606b") on the style value, nothing changed.
I also tried If(.....DBAName="", "text-error", "text-success") and nothing happened.
I tried variations of changing the attribute to class instead of style. It only seems to work if I use color:red on the style attribute as shown above in the first screenshot.
I'm not clear on what you meant by
You said to put the if condition on the style class attribute. I'm not sure how this would be help because I'm checking the value of several fields. So for each field on the screen, I'm checking to see if there is data. If there's not, then I want it to show in red. I have to put this condition on the label or text because if there is no data then I can't make it red (stating the obvious here).
My other concern is that, based on my understanding (which may be incorrect), this is a lot of going back and forth to the server to get the data. I have to apply this to many fields and I get the data once for the expression and then I'm getting it again for the color change. I think there has to be a better way to do this.
Hello again,You are not creating the class correctly, it is missing a dot before the required-field. It needs to be: .required-field{
color:red;
}By keeping on the attribute's part, you are creating inline CSS.
And also, you should take care of this:
Once you've defined your CSS classes, you can apply them to different elements in your application. Your concern about going back and forth to the server in OutSystems for data retrieval and applying expressions for color changes is not entirely accurate.
I apologize for any confusion or inaccuracies in my previous response. If there are specific aspects of OutSystems or front-end development that require more detailed clarification, I recommend referring to the official OutSystems documentation and resources.
OR since I will be applying this to several fields, maybe it would be better to do it in a client action on initialize? If that's even possible?
Hii, @Paula Wright
As i seen on above image where you have created class required-field you are missing . before making class we need to add . and name of class so you need to add .required-field and check again hope it works.
Thanks
Márcio's answer was helpful, but Ana's was more thorough so I'm marking hers as the solution here.