BackGround Color of Field

[tiagovareta]

Hi,

Is it possible to have a field with a different Background Color if it has value or not?
For example if the field is empty, the background color turns red, if it has a value it is light green.

How can I do that?

 

[cheesegrits]

Do you need it to change as values on the form change? If so, two JS events on the element, a 'load' and a 'blur' event, that do ...

if (this.getValue() === '') {
jQuery('#yourtable___yourelement').css('background-color', 'red');
}
else {
jQuery('#yourtable___yourelement').css('background-color', 'green');
}

If you just need to do it staticly on load, a custom CSS file in the template folder (see wiki) that does ...

.fabrikDataEmpty #yourtable___yourelement {
background-color: red !important;
}

#yourtable___yourelement {
background-color: green;
}

... which should turn it green by default, but be overridden by red if the wrapper has the fabrikDataEmpty class.

-- hugh

 

[tiagovareta]

Do you need it to change as values on the form change? If so, two JS events on the element, a 'load' and a 'blur' event, that do ...

if (this.getValue() === '') {
jQuery('#yourtable___yourelement').css('background-color', 'red');
}
else {
jQuery('#yourtable___yourelement').css('background-color', 'green');
}

If you just need to do it staticly on load, a custom CSS file in the template folder (see wiki) that does ...

.fabrikDataEmpty #yourtable___yourelement {
background-color: red !important;
}

#yourtable___yourelement {
background-color: green;
}

... which should turn it green by default, but be overridden by red if the wrapper has the fabrikDataEmpty class.

-- hugh

Hi Cheesegrits,

Thank you one more time! That's what I wanted!

However, when applying "load and blur" events in JavaScript, forms that are related to the main form do not apply colors.
That is, in the main form is working perfectly, in the fields of related forms does not work (related forms are in tabs) ...

 

[cheesegrits]

Point me at the form.

-- hugh

 

[tiagovareta]

Point me at the form.

-- hugh

Hi, Cheesegrits,

The main form is: 2 - Contactos Geral, in this form the colors appear well.
The secondary forms, which are related to the main and have fields that also wanted the color to appear:
2 - Emails
2 - Moradas
2 - Contactos

These 3 forms are on tabs of the main form.

 

[cheesegrits]

That site doesn't seem to be in your My Sites, so I can't login.

-- hugh

 

[tiagovareta]

That site doesn't seem to be in your My Sites, so I can't login.

-- hugh

Hi Cheesegrits,

That's it! Name: ORI GEST

After logging in to the front end:
- 6th Menu (Equipa) + 1st SubMenu (Todos os Assessores)

I ask you to edit the registry with id 1, as soon as you open the form, you will get 4 green fields!
Navigate to the 3rd tab, the fields(Morada, N.? Porta, C?digo Postal, Localidade), they should also be taking on the colors and it is not working.
Navigate to the 4th tab, the field(Contacto), It should be assuming the colors too and it's not working.
Navigate to the 5th tab, the field (Email), It should be assuming the colors too and it's not working.

Thank you so much for your help !!!

 

[cheesegrits]

Ah, OK, those are repeat groups, which means the element name changes, as it has _0, _1 etc appended. So you can't hard code the name. So instead of ...

jQuery('#yourtable___yourelement')

... do ...

jQuery('#' + this.baseElementId)

... which should work for repeat and non repeat groups.

-- hugh

 

[tiagovareta]

Ah, OK, those are repeat groups, which means the element name changes, as it has _0, _1 etc appended. So you can't hard code the name. So instead of ...

jQuery('#yourtable___yourelement')

... do ...

jQuery('#' + this.baseElementId)

... which should work for repeat and non repeat groups.

-- hugh

Yes, yes, yes!!!

That's it! Thank you one more time!!!