Change row color if the element has a specific value

[andre00silva]

Hello
I've been trying to change my "Pedidos de Or?amento" list rows color based on the element "request_status". That element can be "Por Confirmar", "Por Or?amentar" and "Or?amentado". If the element has one of these values "Por Confirmar" and "Por Or?amentar", it's background color needs to turn red. Is there a way to do this using JS or do I need to change CSS? If I need to, can you please tell me how, because I'm still a newbie in CSS.
Thanks in advance!

 

[Sophist]

You need to create a hidden calculated field which contains a CSS class for when request_status equals either of the red backgrounds, and set this hidden calculated field to be a row class element.

Then you need to set CSS so that when this class is present in a list row, the list row background colour is set to red.

 

[andre00silva]

And how do I create that calc element? If I name it "request_check", what do I put inside the calc?

 

[Sophist]

http://fabrikar.com/forums/index.php?wiki/calculation-element/

 

[andre00silva]

http://fabrikar.com/forums/index.php?wiki/calculation-element/

I'm afraid that link won't say how I can create a CSS class inside calc I know how to use calc, I just don't know how to return a CSS class

 

[Sophist]

Just return the class as a string. Fabrik will then add it as an HTML class.

 

[andre00silva]

Sweet. After that, what do I do next?

 

[Sophist]

Then you add whatever CSS is needed to your custom CSS file so that when the row is given this class, the background is set to red.

 

[Sophist]

If you need further help, please give a URL to a publicly accessible list and I will help futher.

 

[andre00silva]

Hm, I think I got it ahah. By the way, the string returned must start with '.'? Eg: "return '.red'" ?
Can you help me creating a custom CSS file? How do I do that?

 

[Sophist]

Are you sure about the string starting with a "."? You use the "." in CSS to create a class like '.myclass { stuff }', but in HTML it is normally 'class="myclass"'?

 

[andre00silva]

Are you sure about the string starting with a "."? You use the "." in CSS to create a class like '.myclass { stuff }', but in HTML it is normally 'class="myclass"'?

Yes, you're right ahah. I've changed it to

return 'class="red"';

 

[andre00silva]

Are you sure about the string starting with a "."? You use the "." in CSS to create a class like '.myclass { stuff }', but in HTML it is normally 'class="myclass"'?

Still, I need help with that custom CSS file. I've seen other posts and I still can't manage to understand that xd

 

[Sophist]

I doubt that that is right either. Check the list output HTML and see what is produced.

 

[andre00silva]

I doubt that that is right either. Check the list output HTML and see what is produced.

In HTML is just returns

<span class="fabrikinput fabrikElementReadOnly" style="display:inline-block;" name="fzmms_quotereq___request_check" id="fzmms_quotereq___request_check">class="red"</span>

 

[Sophist]

1. Did you set the calc field as row class by setting the List view settings / Use as row class to "Yes"?

2. You need to look at the HTML for the entire row.

 

[andre00silva]

1. Did you set the calc field as row class by setting the List view settings / Use as row class to "Yes"?

2. You need to look at the HTML for the entire row.

I forgot to do that, but its already set now. I've made "View Source Code" and clicked F3 and searched for all "red" words. All that comes are these:

<div class="fabrikElement">
        <span class="fabrikinput fabrikElementReadOnly" style="display:inline-block;" name="fzmms_quotereq___request_check" id="fzmms_quotereq___request_check">class="red"</span>

["FbCalc","fzmms_quotereq___request_check",{"repeatCounter":0,"editable":true,"value":"class=\"red\"","label":"Reqcheck","defaultVal":"class=\"red\"","inRepeatGroup":false,

 

[Sophist]

I need to see the HTML for the row that should have the red background - is your site publicly accessible so I can take a look?

 

[andre00silva]

I need to see the HTML for the row that should have the red background - is your site publicly accessible so I can take a look?

I see what you want now. Nope, unfortunately, is it on an intranet. But here the the HTML of the row

<tr id="list_24_com_fabrik_24_row_7" class="fabrik_row oddRow0 class--red request_checkclass--red">
            <td class="fabrik_select fabrik_element">
            <input type="checkbox" id="id_7" name="ids[7]" value="7"><div style="display:none">
<input type="checkbox" class="fabrik_joinedkey" value="11" name="fzmms_quotereq_details_58_repeat[7]">
</div>        </td>
            <td class="fabrik_actions fabrik_element">
            <div class="btn-group">
<a data-loadmethod="xhr" class="btn fabrik_edit fabrik__rowlink btn-default" data-list="list_24_com_fabrik_24" data-isajax="0" data-rowid="7" data-iscustom="0" href="/zmms/index.php/pedidos-menu/form/24/7" title="Editar">
   

<a type="button" class="btn php-2 listplugin btn-default" data-list="24_com_fabrik_24" title="PHP">
    <i data-isicon="true" class="icon-lightning "></i> <span class="hidden">PHP</span></a>

</div>
        </td>
            <td class="fzmms_quotereq___date_time fabrik_element fabrik_list_24_group_49">
            29 maio 2018 (Ter.)        </td>
            <td class="fzmms_quotereq___contact_id fabrik_element fabrik_list_24_group_49">
            <a data-loadmethod="xhr" class="fabrik___rowlink  fabrik_edit" data-list="list_24_com_fabrik_24" data-isajax="0" data-rowid="7" data-iscustom="1" href="/zmms/index.php/contactos/details/44/3">
Malandro</a>
        </td>
            <td class="fzmms_quotereq___request_id fabrik_element fabrik_list_24_group_49">
            <a data-loadmethod="xhr" class="fabrik___rowlink  fabrik_edit" data-list="list_24_com_fabrik_24" data-isajax="0" data-rowid="7" data-iscustom="1" href="/zmms/index.php/pedidos-menu/details/24/7">
ZMTK_2018_000063</a>
        </td>
            <td class="fzmms_quotereq___request_designation fabrik_element fabrik_list_24_group_49">
            sadasd        </td>
            <td class="fzmms_quotereq___part_quantity fabrik_element fabrik_list_24_group_49">
            1        </td>
            <td class="fzmms_quotereq___request_status fabrik_element fabrik_list_24_group_49">
            Confirmar        </td>
    </tr>

 

[Sophist]

Ok - so it is working, sort-of.

<tr id="list_24_com_fabrik_24_row_7" class="fabrik_row oddRow0 class--red request_checkclass--red">

contains "class--red and request_checkclass--red" both of which are from this element having Use as row class = Yes. These look odd because you just need the colour and not the "class="

If you make the calc produce just "red" as I previously suggested then you will have

<tr id="list_24_com_fabrik_24_row_7" class="fabrik_row oddRow0 red request_checkred">

Now you need to add CSS. Following the instructions in the wiki, copy "components/com_fabrik/views/form/tmpl/bootstrap/custom_css_example.php" to "components/com_fabrik/views/form/tmpl/bootstrap/custom_css.php" and put the CSS you need in there.

I haven't tried this, but I would imagine that the CSS you need is something like:

tr.request_checkred {background-color:#FF0000};