1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.
    Dismiss Notice

[SOLVED] Conditional formatting

Discussion in 'Professional Support' started by nofc_fro, Aug 7, 2018.

Thread Status:
Not open for further replies.
  1. nofc_fro

    nofc_fro Member

    Level: Professional
    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].
     
  2. troester

    troester Well-Known Member Staff Member

    Level: Community
    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;}
     
    cheesegrits likes this.
  3. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    And the calc element would look something like ...

    Code (Text):

    $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
     
  4. nofc_fro

    nofc_fro Member

    Level: Professional
    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?
     
  5. troester

    troester Well-Known Member Staff Member

    Level: Community
    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
     
  6. nofc_fro

    nofc_fro Member

    Level: Professional
  7. troester

    troester Well-Known Member Staff Member

    Level: Community
  8. troester

    troester Well-Known Member Staff Member

    Level: Community
    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) )
     
Thread Status:
Not open for further replies.

Share This Page