Setting a class conditionally

Setting a class conditionally

  
Is there any good way in OutSystems to use a conditional in a style?

Say I have a container and a conditional--
  • If the conditional evaluates to true, I'd like to apply "style-good" to the container.
  • If the conditional evaluates to false, I'd like to apply "style-bad" to the container.

I am aware of two methods to do this, but neither of them are graceful.

The first method is to use a preparation to assign a 'style' variable, then use that variable in the extended properties pane:
  • Create a local variable named 'Style', text datatype
  • Add a new preparation that assigns Style as "style-good" or "style-bad" depending on the conditional
  • On the Extended Properties panel of the container, add "class" as the key and the Style variable as the value
I don't like this method because I'm using "class" as an extended propery, which clashes with the "Style" property in the properties pane on the bottom right.  This causes anything written in the "Style" property to be ignored.

The second method is to use a conditional on the visual designer itself with the If widget, and duplicate the visual elements exactly except to change the class of the container from "style-good" to "style-bad" depending on what branch of the conditional it resides in.  I don't like this method because it involves duplicating the UI elements.  In the trivial case of just one container, this is easy. But if the UI is more complicated, this is very unmanageable and non-standards compliant.

Are there any other ways to do what I am trying to do?  I wanted to use a variable in the "Style" attribute itself, but the platform does not allow it.  It assumes everything in that box is a string and gives me no option to enter a variable.

Thanks,
Mike
You can make the style string conditional in Extended Properties and do an Ajax refresh when needed to update it
Gerry wrote:
You can make the style string conditional in Extended Properties and do an Ajax refresh when needed to update it
 Sorry, I do not understand.  Is this what I outlined in method 1 in my original post?  Also am not sure what the AJAX request would be fetching.
 
Mike,
You can use the Extended Properties and assign "style" as property and in the value use logic (you can use Built-in or even User Functions) like a simple If and have an On Change Action make an Ajax Refresh of the widget.
Hi Tiago,

I am talking about classes, not styles.  So the Extended Properties panel does not work for this case.
Please refer back to my original post.  I tried that strategy in method 1.  The problem I'm seeing is that, in your screenshot above for example, "InStyle" will be overridden by "InExtendedProps".

(Whoever I was replying to here seems to have deleted his post)
Hi Mike,

Why is it a problem that the extended property overrides the Style property? Seems to me that this is exactly what you want according to the logic that you can have on the preparation or even in the extended property itself...