Making Style Classes Dynamic

Making Style Classes Dynamic

  
Hi everyone. 

Prior to my previous post on Metro UI Framework using OutSystems, I have now started my development of my front-end blog which is located here. Now, I have a concern dealing with the UI framework's classes. 

Since most of the components depend on CSS classes, I'm thinking of making the Styles property to be dynamic. On my first try, it seems impossible because I can't even insert an input parameter in that property. My use case is as follows. 

I wanted my custom panel to be dynamic (refer to this link) by allowing me to specify what properties I want and be able to append it in the existing panel CSS class. 

Example:

<div class="panel">
     <div class="panel-header + "<dynamic class here> <dynamic class here>">
     ...
     </div>
     <div class="panel-content">
    ...
    </div>
</div>

If that could not be possible, what's a possible workaround aside from cascading If-Else widget.

Thanks. :)

Hi Julius, 

An Option would be, having a DynamicClass local text variable, and boolean variable for different classes .
In your prepartion you will have to check these values and append the DynamicClass variable with the correct values.

inside your TileContent WebBlock you could use an expression
"<div class="panel-header "+<DynamicClass>+ "> "  with escape content set to no , instead of the container in the If-Else.

You could also set default values to these booleans, for default styles.

in short, expressions could be an alternative