Setting a class conditionally

Michael Deroche

Question

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

13 Mar 2015

Gerry

You can make the style string conditional in Extended Properties and do an Ajax refresh when needed to update it

13 Mar 2015

1 reply

13 Mar 2015

Show thread

Hide thread

Michael Deroche

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.

13 Mar 2015

Tiago Neves

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.

13 Mar 2015

Michael Deroche

Hi Tiago,

I am talking about classes, not styles. So the Extended Properties panel does not work for this case.

13 Mar 2015

Michael Deroche

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)

13 Mar 2015

André Vieira

Staff

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

13 Mar 2015

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

See the full guidelines