• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

[SOLVED] Conditional formatting

Status
Not open for further replies.

nofc_fro

Member
Hi, is it possible to have a conditional formatting?
For example, in an "MyList" list with this field: ID, Name, Age , I want to color the age:
green [0,30],
yellow [31,60],
red [61,100].
 
You can add a calc element returning a CSS class name (can be any string, assuming colgreen in the example), set this element to "Use as row class" in List view settings.
Then add custom CSS, e.g.
#listform_$c .fabrikForm tr.colgreen td.your-table___element {color:green;}
 
And the calc element would look something like ...

Code:
$myAge = (int)'{mylist___age_raw}';
if ($myAge <= 30) {
   return 'colgreen';
}
else if ($age <= 60) {
   return 'colyellow';
}
else {
   return 'colred';
}

Replace mylist___age_raw with the full element name of your age element, but keep the _raw suffix.

-- hugh
 
First of all thanks for the solution :)
Forgive me if I ask you to go step by step because I have not yet figured out how to do it.
"add a calc element returning a CSS class name", what do you mean?
I created the element "Age", I went to "List view settings" and in "List setting" I selected "Use as row class", then moved to "CSS" and insert: "Heading class": "aa "," Heading CSS ":" bb "," Cell class ":" cc "," Cell CSS ":" dd ". The php code that cheesegrits has kindly written to me, where should I put it?
 
So you have your Age element (which is filled by the user).
You don't need to do any list view settings in this Age element.

Create an additional calc(ulation) element, put Hugh's code in there . In the list view settings set "use as row class".

Then in your Fabrik list template (e.g. bootstrap) edit custom_css.php in folder components/com_fabrik/views/list/tmpl/bootstrap (if it doesn't exist rename custom_css_example.php)
and add your custom CSS definitions, e.g.
#listform_$c .fabrikForm tr.colgreen td.your-table___element {color:green;}
#listform_$c .fabrikForm tr.colyellow td.your-table___element {color:yellow;}
#listform_$c .fabrikForm tr.colred td.your-table___element {color:red;}

For custom CSS and custom templates see
 
CSS must be
#listform_$c tr.colgreen td.diary___age {color:green;}
#listform_$c tr.colyellow td.diary___age {color:yellow;}
#listform_$c tr.colred td.diary___age {color:red;}

(so no .fabrikForm and replace "print_list" with your real table name (diary) )
 
Status
Not open for further replies.
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top