Color code element based on reference range

[madpad]

Hello all,
Am going great so far on a project using Fabrik.

I have a table with several elements, and each has a reference range. If the value entered is outside this range, I would like to color code the off-range values as a different color, say Red, and all those within range, in a different color.

I would have thought some php code in the validations section may work, but not familiar with php coding, am not sure how to go about.

I did search the forum, and did not encounter this issue anywhere. Is this possible in Fabrik? Thanks in advance.

 

[cheesegrits]

Do you mean you want to color the row in the list if a given element's value is outside of the range? Are the range values on the same list and row as the value itself? Or are the range values simply something you know ahead of time, but don't necessarily exist as table data?

I think you can probably do this using a 'calc' element. I haven't tried this, but I think it should work.

We have an option for elements, under the list settings tab, to "use as row class". What this does is, on each row in the list, we take the value of that element, and add it as a class name to that row. So, if the value of your element is "my_class_1" on row 1, then row 1 will get "my_class_1" added as a class. You can then add that class in a custom CSS file, and apply whatever attributes you want.

The obvious issue with what you are doing, is that your element value by itself isn't enough, as you need to apply a class based on a range.

So, you could try creating a 'calc' element. The PHP code on your calc will need to return the class name you want, based on the value of the actual element's value. So, assuming your main element is called mytable___myvalue, and the range is between 20 and 50 inclusive, your code might look like this:

$my_value = (int)'{mytable___myvalue}';
if ($my_value >= 20 && $my_value <= 50) {
   return 'value_in_range';
}
else {
   return 'value_not_in_range';
}

Then you just need to create a custom_css.php file in your Fabrik list template folder, which defines those two classes, and sets the background color accordingly.

See the wiki for how to create a custom_css.php file.

http://fabrikar.com/wiki/index.php/3.x_Form_Templates#Custom_CSS

-- hugh

 

[madpad]

Hugh
Thanks for a quick response...

What I had in mind is to change the font color of the element depending upon if it is within a reference range, say 20 to 50. The reference range is not necessarily on the list, but something I know ahead of time. Having said that, I am open to coloring the background of the element cell itself instead of changing its font color.

Please do note I have multiple elements in each row - element1, element2, element3 etc...and they each have their own separate reference ranges.

ID Element1 Element2 Element3
(42-46.2) (0.25-1.25) (8.8-9.2)
1 45.2 0.12 8.6
2 41.2 1.23 9.2
3 42.1 1.28 9.1

I have not fully understood the row class concept as I never tried before, but I hope it does not color code the entire row, as opposed to a single element that is out of range.

Let me try out your calc setting later today - will reply back how it is working out.

Thanks again for the quick feedback...if Fabrik cannot do it, I dont think there is anything else out there that could do it.

 

[madpad]

I introduced a new calc element with the code that Hugh wrote above, and so I now have a new element test1range which displays values of either 'value_in_range' or 'value_not_in_range'.

I introduced a custom_css.php file but am lost with the script. Can someone point to an example script that shows how to reference it to the two classes 'value_in_range' or 'value_not_in_range'?

Many thanks.

 

[cheesegrits]

OK, well, the solution I suggested would only be able to change the class of the row, not individual cells (elements) on the row. So forget using the calc element.

For your requirement, you'd have to create a custom list template. Just copy ./components/com_fabrik/views/lists/tmpl/default to another name, and edit the default_row.php file. It looks like this:

<tr id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">
	<?php foreach ($this->headings as $heading => $label) {
		$style = empty($this->cellClass[$heading]['style']) ? '' : 'style="'.$this->cellClass[$heading]['style'].'"';
		?>
		<td class="<?php echo $this->cellClass[$heading]['class']?>" <?php echo $style?>>
			<?php echo @$this->_row->data->$heading;?>
		</td>
	<?php }?>
</tr>

What you'll need to do is insert code that checks your ranges, and applies either a class or a style accordingly:

<tr id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">
	<?php foreach ($this->headings as $heading => $label) {
                $extra_class = "";
                if ($heading == 'yourtable___element1') {
                   if ($row->_data->yourtable___element1_raw <= 20 && $row->_data->yourtable___element1_raw <= 50) {
                      $extra_class = " value_in_range";
                   }
                   else {
                      $extra_class = " value_not_in_range";
                   }
                }
                else if ($heading == 'yourtable___element2') {
                   if ($row->_data->yourtable___element2_raw <= 10 && $row->_data->yourtable___element1_raw <= 60) {
                      $extra_class = " value_in_range";
                   }
                   else {
                      $extra_class = " value_not_in_range";
                   }
                }
		$style = empty($this->cellClass[$heading]['style']) ? '' : 'style="'.$this->cellClass[$heading]['style'].'"';
		?>
		<td class="<?php echo $extra_class . ' ' . $this->cellClass[$heading]['class']?>" <?php echo $style?>>
			<?php echo @$this->_row->data->$heading;?>
		</td>
	<?php }?>
</tr>

You should be able to see what I'm doing there, and replace / extend accordingly.

You'll still need that custom_css.php to add the value_in_range and value_not_in_range classes.