I’ve seen this work really well with the following setup

• an enumeration
• icheck radion buttons widget
• add class enum-group to the widget
• and some styling

$default-transition:                    all .2s ease-in-out;
$input-select-bg-color:                 #d9edf7;
$input-select-inner-box-shadow:         inset 0 2px 2px 0 #82d1e8;
$default-border-radius:                 4px;
 
.enum-group {
    line-height: 45px;
    height: 45px;
    > div {
        display: inline-block;
        line-height: 45px;
        height: 45px;
        &.radio {
            padding: 0;
            width: 20%;
        }
        > label {
            background: linear-gradient(#fff, #eaeaea);
            background-color: $bg-color;
            border: 1px solid $default-border-color;
            border-left: 0;
            line-height: 45px;
            height: 45px;
            width: 100%;
            text-align: center;
            &:active:focus {
                outline: 0;
            }
            &:hover {
                transition: $default-transition;
            }
            &.checked {
                background: none;
                background-color: $input-select-bg-color;
                box-shadow: $input-select-inner-box-shadow;
                > label {
                    color: $font-base-color;
                }
            }
            > label {
                margin: 0 !important;
                line-height: 45px;
                height: 45px;
                font-size: 1em;
            }
        }
        &:first-child > label {
            border-top-left-radius: $default-border-radius;
            border-bottom-left-radius: $default-border-radius;
            border-left: 1px solid $default-border-color;
        }
        &:last-child > label {
            border-top-right-radius: $default-border-radius;
            border-bottom-right-radius: $default-border-radius;
        }
    }
    .iradio_flat-aero {
        background: none;
        width: 1px;
    }
}

Hi Peter,

Yes I’ve done similar things before, but always used buttons (with microflows that set corresponding values) and used styling to make them look how I wanted. An alternative is using (‘helper’ non persistent) objects in combinations with a listview, that you style to make it look like on of your examples. Use on-click microflows to select/deselect/setValue.

Hi Wieke,

thanks for the quick answer.

The first variant makes sense to me but would be a lot of manual work on my app.
Maybe you could elaborate on your second variant, I don't quite understand how this could.

Thanks a lot.

when using your first method - do you can use a enumeration value as button caption? If not I would have to change the value twice when wanting to change a enumeration value. Once in the enumeration and again on every button that triggers the microflow to set the attribute to that enumeration-value.

Sure, take your ‘select difficulty’ example image:

You can, on entering a page for instance, generate all difficultyHelper objects based on a masterdata table of difficulty options, or hardcoded in a microflow based on available (enum) values. Use a listview (which you can style to display objects horizontally instead of vertically) and apply the styling to the li (listitem) objects. Set the on click action to toggle the ‘isSelected’ attribute, and to set the difficulty attribute on your main object. A bit of work, but easier this way to add elements/text/etcetera to your ‘button’.

Hope this helps! 

Thanks Wieke.

I'm not quite sure I understand what you mean, but I will try this second solution out in the next few days.

To your first solution (to simply trigger microflows using the buttons that set the attribute) - how do you get the button you clicked to appear as selected? So, for example, it stays colored - even if you click on another object on the page.
I tried it with some Java code, which adds a CSS class to the button clicked, but if I have multiple of those custom queries with buttons on one page, it only adds the selected class to one button at a time. So no 2 buttons of 2 different queries can be selected on one page.

Thank you

Thanks Stephan,

if I use the widget and your styling I get totally misaligned radio buttons. But even if I style them correct and click one – this one does not get “selected”. I then asigned a “selected” CSS class to the button clicked via JavaScript but it only works for one of the radio button widgets on the page. 

But I need to use more than one of the radio button widgets on one page. Problem is if I click on e.g. button-choise1 of the first radiobutton widget and afterwards on button-choise1 of the second radiobutton widget the first one gets “deselected” again.

Any idea on how to fix this?

In case this may help anyone going forward this is how I solved this in Studio Pro. If there is a better way in the latest Mendix, then I stand corrected, but I could not find anything, when I googled I found this post here, and that is about what I found, so I am asuming it still cannot be achieved without effort in Mendix 9.14.1.

This is what I wanted to achieve:

I have a list of Employees with and `IsActive` attribute and I wanted to filter by `All | Active | Inactive` but using a buttons group and not radio buttons, it looks like this:

When The user clicks on `Active` button the employees are filtered with `IsActive=true`.

This is how to achieve this:

1. Create an enumerator with values `All, Active, Inactive`
2. Create an Entity to store the `IsActive` current selected value and create an association to entity for the current user namely `System.User`. We are linking the selected value to the current user to retriev it after the page is refreshed. It has to be a persistent entity. I called this `UserCachedMetadata`
   
3. On your page create a DataView that calls a microflow `GetOrCreateUserCachedMetadata`. The microflow will select the `UserCachedMetadata` for the `$currentUser` and will check if it exists, if it does not exist create it an default the choice to `All`, else select it and default the value to `All` (we always reset to `All` when the page is opened, you may decide here to use the choice the user made the last time he/she was signed in).
   
4. Inside the DataView for the `UserCachedMetadata` I add my list widget to display the Employees. The data source for the list must be a microflow that will select the employees according to the EmployeeActivityChoice. In this microflow select the employees with an XPath like this
   
5. Above the Employees List widger I add a container and inside this create 6 buttons, 2 for each of `All`, `Active` and `Inactive`. Then on each pair of buttons, let’s say we take the 2 `All` buttons:
   • The first button of the pair will be the one that is displayed when the slected choice is `All`: For the first button set the button style to ‘Primary’ and set the visibility to be visible when the current `UserCachedMetdata` choice is equal to `All`; for example `$currentObject/EmployeeActivityChoice = MyFirstModule.EmployeeActivityChoice.All`. THere will be no action on this button when it is clicked.
   • The second button shall be displayed when the selected choice is NOT `All` and when clicked will set the selected choice to `All`: For the second button set the button style to default and the visibility to be visible when the choice is NOT `All`; for example `$currentObject/EmployeeActivityChoice != MyFirstModule.EmployeeActivityChoice.All`. For this button we will create a microflow to set the choice when it is clicked. Create a microflow let’s call it `ToggleEmployeeActivityChoice_All` with a parameter the `UserCachedMetadata` and in this microflow change the `UserCachedMetadata` and set the `EmployeeActivityChoice` attribute to the enumerator `All` value.
     
6. Repeat the above for the other 2 buttons as well creating microflow for each to set the choice accordingly. You will ahve something lookin glike this in Studio Pro:
   

And that should work like a choice button group.