Conditional styling based on entity

1
What’s the recommended way to style an element based on an entity’s attribute in Mendix? For instance, let’s say I have a list of Trucks in a List View widget, where each truck has two attributes: Name (String) and NeedsMaintenance (Boolean). I want to, say, set the background color of the Name text box for each truck to either green (NeedsMaintenance=False) or red (NeedsMaintenance=True). Looking through the forums, the answers I’ve found are: Create copies of the element with different CSS classes, and use a Visibility expression to show/hide the elements based on NeedsMaintenance. This approach is just asking for trouble, IMO. Resort to things like Custom Strings and/or Javascript Snippet/HTML Snippet/Javascript Action. This feels hacky and overkill for such a common (I think?) problem, especially given the “Low-code” promise of Mendix. Am I missing something?
asked
4 answers
2

Currently you only have these options:

  • Conditional visibility
  • custom widgets

There is a ‘planned’ Idea for conditional classes though: https://forum.mendix.com/link/ideas/512

There is a possibility in datagrids to style based on attribute as the attribute is part of the dom node attributes. But that does not help in your case.

regards, Fabian

answered
1

Hi, 

use the Enum Class widget => https://appstore.home.mendix.com/link/app/2641/First-Consulting/EnumClass

 

Hope it will be helpful!

answered
0

Well the first option is used a lot. This however indeed has it's downside's, espacially when you do this a lot on big pages.

An other option would be to use a widget like the css selector helper: https://appstore.home.mendix.com/link/app/35039/ 

answered
0

Thanks for your responses. 

I couldn’t get EnumClass to work, although it looked promising and very flexible.

Found out about Dynamic Classes as a possible solution in the idea thread mentioned by Fabian (https://forum.mendix.com/link/ideas/512) , which worked and was easy to use. The only downside is that the class can only be applied to the parent, although that was I wanted anyway.

https://appstore.home.mendix.com/link/app/108838/

answered