How to implement button group UI pattern?
Application Type
Traditional Web

Hii all,

I'm a beginner in Outsystems as well have no programming background. I'm trying to use and test button group pattern.

I've a Products entity having attribute of price. I want to show all products  when no radio button in group is selected and upon selecting one ,i want to filter results as price less than 2000 units or 2000 and above .How can filter the results  using button group (What value should radio button variable hold ,what filter needs to be added to aggregate)?

Thanks for reading !

Rank: #93

Hi Mohini,

First of all, welcome to OutSystems and to the Community! :)

According to your use case, I believe that you want to have 3 options for your filter: Less than 2000, 2000 and above and something like Show all.

Probably, you'll need this extra option, otherwise you may have an issue. Once you select one of the other two options, you need to have a way to go "back" and see your entire list of products, right? :)

So here's the result:

Now, you need to have a local variable to hold the selected option. Usually, when I have 3 options, I use an Integer to control these values, where:

0 - Show all / 1 - Less than 2000 / 2 - 2000 and above

(You could have other types and values to store this information, I just think it's easier for you to keep it like this)

I called this variable SelectedOption (Data Type = Integer):

This variable will allow us to keep the value for the selected option. If the user selects "Show all", the value for this variable will be 0. If the user selects "Less than 2000", the value for this variable will be 1. And if the user selects "2000 and above", the value for this variable will be 2.

In your screen, now you have to bind each Radio Button (inside of Button Group widget) to this SelectedOption variable with that option's respective value:

Finally, in your Aggregate, you'll need to add a filter based on this variable. In this case, your condition is depending on the value of SelectedOption:

SelectedOption = 0 or (SelectedOption = 1 and Product.Price < 2000) or (SelectedOption = 2 and Product.Price >= 2000)

Don't forget the OnChange event associated to your radio buttons, where you should refresh your data (in order to execute the Aggregate again) and your table widget. Basically, this action will be triggered everytime the user selects an option:

I made a sample for you with this implementation :)

You can test it in here: https://rbarradas.outsystemscloud.com/RadioButtonFilter/Entry1.aspx

Please refer to attached OML file with this example.

You can also refer to this documentation.

Hope that this helps you!

Kind regards,

Rui Barradas


Rank: #5713

Rui!! Thanks a bunch !means a lot!  I'm slowly slowly learning things.

You took out time to answer, Thank you..:)