Hi Gama,

You can use the advanced JS section to write custom CSS changes on user event.

For instance onClick event on any element say div named commentSection

$('#commentSection').click(function() {
    $('#foo').css({
        'background-color': 'green',
        'color': 'black',
        'font-size': '26px'
    });
});

Regards,

Swatantra

Hi, friend!

Use the Extended Properties to set the JavaScript event and change the class dinamically:

onclick / onchange / onblur etc.

= 

" document.getElementById(' " + MyContainer.Id + " ').className = ' TheClassYouWant ' ; "

That way you cand change between classes accordingly to user interaction. 

Hi,

if you want this in Reactive Web or Mobile App it is even simpler, you can just and if in the expression on the classes property and define which CSS classes should be applied.

For the extended property solution as described by others, you cal also set the class property and use the assign statement to set the proper class, rather than specific CSS elements.

Regards,

Daniel

You can do it using normal javascript using this in your code

if(value<10){
       document.getElementById("sample").style.color="blue";
}

OR You can do it using jQuery:

if(value<10){
       $("sample").css("color","blue");
}

Choose whichever appeals to you.

Of course you must have IDs as @Barmar suggested:

<td id='sample'>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>

The above code now changes the style of Ca alone as the id exists for that tag.

And you can make changes to any of the css properties:

Gama wrote:

Hi Gama,

Please see the attached oml with minimum effort

Gama wrote:

Hi Gama,

You can also go by the styling way instead involving the JS or OS flags :)

define a CSS as below:

.gal-cont{ 
  background:#fff
}

.gal-cont:focus{ 
  background:#0a9c2d
}

Now apply this class to your container

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Hope it helps,

Assif

Thank you for the answers. 

Really useful, and now I have at least 3 different ways to implement CSS changes on user interaction.

I would like to mark at least 3 answers as the solution, but OutSystems still does not allow me to do that. I marked the one I find most complete for the most case scenarios (that is being able to change CSS of an element by interacting with another element)

Glad Gamma that the issue got solved :)

Cheers!

Swatantra

Just to add to this, it's generally good nettiquette to also give credit in the CSS when borrowing code, even when it's a small snippet.