I have a aggregate containing 6 bool values, each connected to a checkbox. When a user enables or disables one of the boxes, I want the box to be marked in a different color, and then change it to the default color once they hit a save button.So for example, I have attached an image of one list item, in which 3 are marked in blue. If a user were to check off a new one or uncheck one of the existing ones, the background or outline should change to green. A save button could then be clicked and the colors would return to white/blue.
I am still a bit of a beginner when it comes to the CSS part of OutSystems so any help is greatly appreciated
Hi @Mbh ,
First, you’ll need to create a structure that stores both the original values (fetched from the database) and the current values (which are bound to the checkboxes and will change as the user interacts).
You’ll use this structure as a local variable in your screen or block. Depending on your use case, it can be a single record or a list, though in my example, I used a list. After your aggregate runs, in the OnAfterFetch event, you can populate this local variable by assigning each record's values to both the original and current attributes initially.
As mentioned earlier, you’ll bind the checkboxes to the Current attribute from your local variable. To change the colors based on user interaction, you’ll need to apply conditional CSS classes. Here’s an example from my implementation:
[data-checkbox].changed:checked::before {
background-color: #28a745 ;
border-color: #28a745 ;
}
[data-checkbox].changed:before{
You’ll need to apply these classes conditionally based on whether the value has changed. To do that, use the Extended Property named class on the Checkbox widget, and set its value using an expression that applies the class only when the Current and Original values differ:
If(localData.Current.BooleanOriginal6 = localData.Current.BooleanCurrent6,"checkbox","checkbox changed")
I didn’t include the save logic in my sample, but when implementing it, make sure to use the Current attributes for saving, since those are the ones being updated by the user. After saving, refresh the aggregate to reload the latest data and update the Original values accordingly.
Result:
Thank you very much for this detailed walkthrough. This was just what I needed and will be able to use the method for quite a few other solutions.Thanks to @Suryanarayana Vundru and @Vijay Malviya too, some great points here aswell!
@Mbh ,
Override the checkbox CSS as shown below, and apply the classes .home-checkbox-green or .home-checkbox-blue to the parent element of the checkboxes .
Note: Use custom CSS where required, instead of directly overriding OutSystems UI styles globally.
.home-checkbox-green .checkbox:checked:before{ background-color:green; border: green;}.
home-checkbox-blue .checkbox:checked:before{ background-color:blue; border: blue;}
Attached OML for your reference
@Mbh,
Try once this way .