List Colour

[keith21]

Hi
I have a drop down element called prbi___Status, with Active and Inactive. If active is selected to show green in list view for that cell, if inactive to show red for cell. How do I do this?

 

[keith21]

I did a bit off research can I add it into the template_css.php file for list?
will it look like this?
.property_cell {"
$element = $this->_row->data->prbi___Status;
if ($element == "Red") {echo ".property_cell {background-color: #FF0000;}";}
elseif ($element == Amber) {echo ".property_cell {background-color: #FF9900;}";}
elseif ($element == Green) {echo ".property_cell {background-color: #339900;}";}
"}";

 

[troester]

In general
- you shouldn't modify Fabrik core files (will be overridden with the next update), use custom_css.php
- I'm pretty sure you won't get any row data in xxx_css.php

In your case:
- in your status element enable "use as row class" in element's list view settings (which will add a 'class="Red"' etc. to the list's tr tag
- add custom css (in custom_css.php), e.g.
tr.Red {background-color: #FF0000;} (or 'tr.Red td.your-full-elementname' if you only want to style one cell instead of row)

 

[keith21]

Sorry I am kind off new to this, so do i make a change to the default.php and the css file.

 

[chozma]

Hi Keith21,
I think what Troester is saying is that you should create your own custom list template rather than overwriting the default Fabrik files (never a good plan really). Then you should modify the css and files in that template folder instead. Have a look at this forum post: http://fabrikar.com/forums/index.php?wiki/creating-a-custom-list-template/
Does that make more sense to you?
Kind regards, Hannah

 

[keith21]

Thanks Hannah, I am in progress off doing that right now. once again thanks for the input.

 

[chozma]

Happy to help, just shout if you get stuck!

 

[troester]

If you only want to add CSS you don't need to create a custom template.
You can put your CSS in custom_css.php in the default Fabrik bootstrap template.

 

[keith21]

Hi Hanna
I have had a look at the default.php, where in the code do I put this line
<?php echo $this->_row->data->prbi___Status;?>
to access the status.
Sorry my php is not so good. What I would like to achieve is basically a traffic light alert. So if red is selected the cell would show red, amber or green.

I have attached my default.php.

Thanks in advance.

Keith

 

[chozma]

Hi Keith,

I think this is the section of the file you are looking for

            foreach ($group as $this->_row) :
                echo $this->loadTemplate('row');
            endforeach

This part of the code handles the production of the table. So for each row that needs to be created, it calls the default_row.php function - echo $this->loadTemplate('row') . Have a look at default_row.php as I think this is really where you want to focus and change code.

You will need default_row.php to apply the new css styling to the rows you want. It's this line in default_row.php that puts the styling on the row.

<tr id="<?php echo $this->_row->id;?>" class="<?php echo $this->_row->class;?>">

So, you will need an if statement to check whether the status is the value you are looking for. If it is you will need this line above to put in whatever class you want. The class will then change the background colour however you need.

You might want to do a var_dump of $this->_row to figure out how the data is structured so you can access your element Status.

I hope that makes sense, let me know if you get stuck with anything else... Good luck!

Hannah

 

[cheesegrits]

You really don't need to do any editing of PHP or cloning templates. All you need is a custom_css.php in your main list template folder. There should be an example already in there.

As Troester pointed out, we already have an option, under "List settings" for the element, to "Use as row class", which is specifically designed to do exactly what you need. If you set this as 'yes' for an element, we then add the value of that element in each row to the row's (tr) class list. So if your two possible values are "active" and "inactive", then we will add "active" or "inactive" to each row's class, as appropriate.

Obviously you can use that to style the whole row ...

tr.active {
  background-color: green;
}

... which tells CSS to style table rows with class 'active' with a green background.

But if you want to restrict your styling to just one cell (td), then you can use a more specific CSS selector. Each cell (td) in your list's table already automatically has the element's full name as a class. So you can use something like this to be more specific in your custom CSS about what you are styling ...

tr.active td.prbi___Status {
  background-color: green;
}
 
tr.inactive td.prbi___Status {
  background-color: red;
}

... which tells CSS to style any td's with the class 'prbi___Status' which are inside a tr with class 'active' as green, and those inside a tr with class 'inactive' as red.

-- hugh

 

[chozma]

That's a much better solution Keith21, much easier than fiddling around with that PHP! Sorry I should have thought to tell you about this rather than going off on one about php code.

 

[keith21]

OMG thank you so much, this is what I really needed. Prob would not have done this without you lots help, so a massive Thanks you.
Keith

 

[cheesegrits]

So you managed to do it with just CSS?

-- hugh

 

[keith21]

Yes, works really well. I just need to figure out now how to have a notification when you hover over it.

 

[keith21]

Hi just another question to the above, I have added another Status feild adding the css code although it show the first feilds colour . please see pic as to what it shows up. how can I have more that one feild to show the colour in the cell. Thanks for the help in advance

 

[keith21]

The css looks like this, although both my cells show up with the same colour.

tr.green td.prbi___CCFlag {
background-color: green;
}

tr.red td.prbi___CCFlag {
background-color: red;
}

tr.amber td.prbi___CCFlag {
background-color: yellow;
}

tr.blue td.prbi___CCFlag {
background-color: blue;
}

tr.green td.prbi___SYFlag {
background-color: green;
}

tr.red td.prbi___SYFlag {
background-color: red;
}

tr.amber td.prbi___SYFlag {
background-color: yellow;
}

tr.blue td.prbi___SYFlag {
background-color: blue;

}

 

[cheesegrits]

You'll have to use different values for the status color values, like blue_syflag and blue_ccflag, and differentiate the CSS class selection accordingly.

-- hugh

 

[keith21]

I have changed the values as you said, like syflag_blue and ccflag_blue. The css changed to

tr.ccflag_blue td.prbi___CCFlag {
background-color: blue;
}

tr.syflag_blue td.prbi___SYFlag {
background-color: blue;

}

This does not work, I do not have any colour in both cells. What have I done wrong?

 

[keith21]

This is how have set the values in the backend, took a pic off it.