I am new at OutSystems and I am trying to create a button group, or similar to it. I have div that on click I need to change its background color and if I click another div among the options that color must be removed from that div and added to the current clicked div.

Is there a way I can do it in Outsystems, to add or remove divs color on click?

Solution

Hi Marco,

Use style in property for change css. also you can use jquery for it.

i have updated your oml

https://rahul-sahu.outsystemscloud.com/ContactApp/CallResult.aspx?_ts=637296444373317246 


Regards

Rahul Sahu

Solution

Hi Marco, 

The mentioned requirement is same as how the ButtonGroup widget works in outsystems..

Is it that you are facing any challenges in implementing the same? or do you have any other complex requirement on top of it?

If you want to redraw the same control then you can go with Rahul's solution but you will have to explicitly call the Ajax refresh in every button click to apply the CSS style class.


See this sample app... 

Please find the attachement.


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Marco, 

The mentioned requirement is same as how the ButtonGroup widget works in outsystems..

Is it that you are facing any challenges in implementing the same? or do you have any other complex requirement on top of it?

If you want to redraw the same control then you can go with Rahul's solution but you will have to explicitly call the Ajax refresh in every button click to apply the CSS style class.


See this sample app... 

Please find the attachement.


Hope this helps you!


Regards,

Benjith Sam

 

 Hi Benjith, I tried to use button groups, however it was difficult to add margin between the button or to change the height. Because of that I decided not to use it.


Rahul Sahu wrote:

Hi Marco,

Use style in property for change css. also you can use jquery for it.

i have updated your oml

https://rahul-sahu.outsystemscloud.com/ContactApp/CallResult.aspx?_ts=637296444373317246 


Regards

Rahul Sahu

 

 Hi Rahul,

One last question I have a situation where I don't have IDs to select. Instead I have dates, how can I do that?

Shouldn´t have some javascript to seletect the div instead? I have tried to do the comparision of dates on the extended properties but it is not what I want because if date has that value same of adddays the class of Button group (the background-color) is being selected.



Hi Marco,

Share your oml once.

You can simple use JS like below

Put this js on page JavaScript property

$(document).on('click','.CommonClass', function(){
    $('.CommonClass').removeClass('selected');
    $(this).addClass('selected');
});

Use css on style Property

Screen Design-

Regards

Rahul Sahu