How to Change the color of a custom pattern once I put an ExtendedClass

So I was just curious,

There's this thing about OutSystems that if you use a pattern that is existing and adds a class on its extended class with color on its CSS, it changed automatically. But if you created your own pattern and put a CSS on the ExtendedClass it stays as it is.



So here is a screenshot of what Pattern I'm currently doing. It's a Banner custom pattern and I added an

ExtendedClass variable on it and put the background-primary on it, but nothing's changed.


While in this card pattern of OutSystems when I added a background-blue on ExtendedClass it changed to the color immediately. I want to know if I can do that In my own custom pattern.



Hi Willter,

You can, but you have to actually apply the class to something in your custom pattern. For instance, suppose that your pattern has a Container whose appearance you want to customize via the ExtendedClass parameter. You would have to apply the class to it like this:


Hi Willter. The extended class is applied to the pattern (usually at the parent div). So if you want to apply your ExtendedClass to your own pattern, just set it as a class of the container in the pattern. You can see how it's implemented if you open a clone of the UI module

Aurelio Junior wrote:

Hi Willter,

You can, but you have to actually apply the class to something in your custom pattern. For instance, suppose that your pattern has a Container whose appearance you want to customize via the ExtendedClass parameter. You would have to apply the class to it like this:


I've already done it but it didn't changed prior to my adding of background color class

Afonso Aguas wrote:

Hi Willter. The extended class is applied to the pattern (usually at the parent div). So if you want to apply your ExtendedClass to your own pattern, just set it as a class of the container in the pattern. You can see how it's implemented if you open a clone of the UI module

Thanks for the reply, but I did it already but nothing happened

Willter Desamparado wrote:

So I was just curious,

There's this thing about OutSystems that if you use a pattern that is existing and adds a class on its extended class with color on its CSS, it changed automatically. But if you created your own pattern and put a CSS on the ExtendedClass it stays as it is.



So here is a screenshot of what Pattern I'm currently doing. It's a Banner custom pattern and I added an

ExtendedClass variable on it and put the background-primary on it, but nothing's changed.


While in this card pattern of OutSystems when I added a background-blue on ExtendedClass it changed to the color immediately. I want to know if I can do that In my own custom pattern.



So I did what the patterns in Outsystems do, 

I put the expression on the Style Classes but here's the what happened

There's an Error


Hi Willter,

You can't use expressions in the "Style Classes" property, just static class names. If you want to use expressions, you have to use the "Extended Properties" like I initially indicated:

Aurelio Junior wrote:

Hi Willter,

You can't use expressions in the "Style Classes" property, just static class names. If you want to use expressions, you have to use the "Extended Properties" like I initially indicated:


I know that but it still doesn't solve my problem.

Hi Willter,

If you still need help, then please share more details about what exactly you want to do, what you've already tried and why it's not working.

Aurelio Junior wrote:

Hi Willter,

If you still need help, then please share more details about what exactly you want to do, what you've already tried and why it's not working.

I've tried doing the things that you've recommended and the other workaround in the replies but it still does not solve my problem of changing the color in realtime on OutSystems Environment Window

Solution

Willter, yes you will not see it updated in realtime, but it will apply the style in the browser. 


That's a limitation of passing styles through parameters as far as I know.

Solution