Multiple items should be selectable and change there visual appearancefor example backgroundcolor when selected.A sample List is attached as oap. How can this be done?
Giorgos Sgouridis wrote:
Thanks Sam,transitioning from WPF/Xaml UIs will take me some time but the community is awesome here, love it.1- Could not figure out how to add in Interface the adhoc Attribute IsSelected instead of an Entity Attribute.2- The !important did not solve my issue. I also renamed the solution to playground2 and deleted the one from my environment so that no changes will be mixed-up. Still don't see the expected behaviour.
- Add Adhoc attribute(Additional temporary attribute) within the Aggregate as shown below
- Click the 'New attribute' link to create Adhoc attribute
- Click the fx icon to set the value/expression for the adhoc attribute (in our case False value)
- see the property section (bottom right corner section) after clicking the newly created adhoc attribute
Please find the attached updated .oml solution file
HOpe this helps you!
Regards,
Benjith Sam
Hi Giorgos,
I did some code changes in the shared solution file... I hope this is what you are looking for?? See this sample app
Steps to follow:
1) Introduce an adhoc boolean type attribute within the Aggregate which is mapped with the List control i.e. let's name it as IsSelected Of boolean type, set the default value to False
2) On click of every List Item, assign/set the negation value to the current ListItem record IsSelected attribute
3) Define a CSS selection class definition on the Screen Style Sheet Section
4) Add the selection style class w.r.t a condition i.e. If current record IsSelected = true then append the defined selection style class with the existing List Item class
Please see the attached .oml file
Hope this helps you!
Thanks Ben for your help,looks like the oml provided is incomplete, i dont see the expected behaviour yet.Could you send me the oml of your DemoApp/MovieList or is there a way to access it from the PreviewInDevices?
Thanks Ben for your help,looks like the oml provided is incomplete, i dont see the expected behaviour yet.Could you send me the oml of your DemoApp/MovieList or is there a way to accessit from the PreviewInDevices?
You are most welcome, Giorgos :)
The expected behavior is not reflecting because the defined CSS class definition is getting override by some other pre-defined style rule..
.selectedItem { color: green; background-color: yellow !important; }
Note: Using !important is not considered to be a good practice..
See the attached .oml file (DemoApp/MovieList)
As Ben solution is also correct.
Alternate solution you can use Jquery to achive your functionality.
Try this
Jquery
$(function(){
$(".list-item").click(function() {
$(this).toggleClass('selected');
};
});
css
.list-item .selected {
background: #198719;
}
Let me know if works
Hope this helps
Thanks
AD
Thank you both guys,the client action was missing as i see in the .oml.Also many tks for the detailed steps regarding adhoc aggregates.I like the approach with the aggregate as then couldbe written a function on a button click that finds allselected items.If i wont make it myself i ll post a new question for assistanceuntil i get the handles with this awesome toolkit.
You're welcome, Giorgos :)
Glad we could help you :)