Conditional styling based on attribute

1
One of my entities has a attribute for a color. When displaying this entities in a template grid I want to use that attribute to color a part of the template card. So I would like to be able to do something like --> style= "color:$MyEntity/Color;" Is this somehow possible?
asked
3 answers
4

Hi Stefan,

You can also use the (official Mendix) customString widget, which lets you run a microflow that returns a string, which you can display with HTML elements. In this you can 'construct' a element with a variable color.

simple example:

'<div style="background-color: ' + $Object/colorAttribute + ';">I like cake</div> 

answered
3

​I did something like this before and had to resort to the usage of the HTML snippet. Here is an instruction of how it could be implemented.

  1. Make sure the attribute which holds the color has hexadecimal formatted string values, like #FF0000 for pure red;
  2. Give that attribute a specific class (attrClass) in the form;
  3. Place all the parts of the page you want to style in a container element (in Modeler);
  4. Give this container you want to style with the value of this attribute another class (targetContainerClass);
  5. Add at the bottom of this page a HTML snippet, ommit jQuery, stick to pure JavaScript.
  6. In the JavaScript code:
    1. Retrieve the HTML element by targeting the attrClass with something like:  
      var attr = document.getElementsByClassName("attrClass")[0];

       

    2. Get the content of the element with the .textContent property and store in a variable; 
      var color = attr.textContent;

       

    3. Get the HTML element of the targetContClass element in the same manner with something like: 
      var containerTarget = document.getElementsByClassName("targetContainerClass")[0];

       

    4. Set the background of this element with something like:  
      containerTarget.style.backgroundColor = color;

       

answered
2

You could create containers which have a color specific class added to them, and show the 'correct' containers through conditional visibility in Mendix as per your attribute.

Would that solve your issue?

answered