Each row should be display in different color background

1
Hi, Can anyone tell, In listview have more than 20 rows of records, each row has certain percentage based on percentage of record should display different background color. provide me any solution to implement this color difference.
asked
4 answers
5

Nicolás version is DOM change stable – this one is not, plus this is very hacky :)

 

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
      c = b + start;

  // Return a CSS HSL string
  return 'hsl('+c+', 100%, 50%)';
}
var col = hsl_col_perc('${Percent}',0,128);

this.domNode.parentNode.parentNode.parentNode.style.backgroundColor = col;

( Widget: https://marketplace.mendix.com/link/component/43096 )

( JS https://stackoverflow.com/questions/7128675/from-green-to-red-color-depend-on-percentage )

answered
1

Hi,

You need to set a visibility condition for each color you need to print in your rows. 

Selecting the attribute you want to control. If your attribute is bool or enum, use “based on attribute value”, if not, try to use “based on expresion”.

 For example, $Entity/Records > 10 and $Entity/Records < 20. Select the background you want to display for this condition and its all.

 

In this example, i am showing a black button when Active its false, and white button when Active its true.

 

answered
0

A better, but more grainy solution, would be to define background colors in css such as;


.listview-styletest-dc {
    ul li {
        padding: 0;
    }
 
    .bg-green {
        background-color:green;
    }

    .bg-yellow {
            background-color:yellow;
    }

    .bg-orange {
            background-color:orange;
    }

    .bg-red {
            background-color:red;
    }
}

In the list elements properties, tab ‘Appearance’, you’ll find ‘Dynamic classes’. Here you can write something like:

if	$currentObject/RandomNumber<=25 
then	'bg-green'
else	if	$currentObject/RandomNumber<=50 
	then	'bg-yellow'
	else	if	$currentObject/RandomNumber<=75
		then	'bg-orange'
		else	'bg-red'

This yields the following result:

Of course you can define as many colors as you like in between.

 

Note: I removed the padding as the color is only applied to the table/div within

answered
0

Try my Class Container widget:

https://github.com/tieniber/classContainer/releases/tag/3.0.0 

It has the ability to do dynamic classes (like is built into the platform now) but it also has the ability to add dynamic styling. Note that the input should be React style props format, not CSS. So a working example would be like:

'{
  "color": "blue",
  "backgroundColor": "red"
}'
answered