Field Renderer No Longer Working

Questions
1

This field renderer has been working well for us for a long time and now it isn’t. I wonder if it is from a recent update?

//
var field = arguments[0],value = arguments[1];
var currentDate = new Date();
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;
if (skuid.time.parseSFDate(value) <  currentDate) {
field.element.css({‘min-height’:‘30px’,‘color’:‘red’});
}
//

It is supposed to turn the text red if the date is in the past. The date just looks normal now, even though it is in the past.

2

Kaede,

I added console.log to verify the logic and the values.  Everything is still processing correctly except the field.element.css.  It does not change the color of the text.

I have updated your code and swapped the field.element.css.  In this version you can see the pink background and the height of the field change, but the font color of the date remains black.

var params = arguments[0], $ = skuid.$;<br>var field = arguments[0],value = arguments[1];<br>console.log('Field -&gt;' + field);<br>console.log('Value -&gt;' + value);<br>var currentDate = new Date();<br>console.log('Current Date' + currentDate);<br>console.log('parseddate -&gt; '+skuid.time.parseSFDate(value) );<br>skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);<br>if (skuid.time.parseSFDate(value) &lt; &nbsp;currentDate) {<br>&nbsp; &nbsp; console.log('if is true');<br>&nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; //field.element.css({'min-height':'30px','color':'red'});<br>&nbsp; &nbsp; field.element.css({'background-color':'pink','min-height':'100px','color':'white'});&nbsp;<br>}


Maybe Skuid can explain why this isn’t working?

Thanks,

Bill

3

Hi Kaede/Bill -

The reason the color isn’t changing is because Skuid is applying more specific styling to the children of the field.element.  For example, in the case of a field in ‘read’ mode, they are styling nx-fieldtext while in ‘edit’ mode they are styling the input/textarea/etc.  When CSS is processed, it always will take the most specific styling available falling back to parents for attributes where there isn’t a more specific value provided.

To be honest, I’m not sure if this is a recent change or not but I wouldn’t think it is.  It also could be somewhat theme specific - possibly you changed your theme recently?  Either way, if you modify your selector to the following, you should see the behavior you are looking for.  Also, the min-height won’t achieve a larger font size.  Not sure if this is what you are after but using the font-size attribute will ensure the text itself is larger (assuming that is what you are after).

field.element.find('input, textarea, .nx-richtext-input, .nx-fieldtext').css({'font-size':'large','color':'red'});


As an alternative, you could use a css class to achieve your goal and then the custom renderer could just add the necessary class to field.element.  Something like the following:

JS

if (skuid.time.parseSFDate(value) &lt; &nbsp;currentDate) {&nbsp; &nbsp; field.element.addClass('datewarning');<br>} else {<br>&nbsp; &nbsp; field.element.removeClass('datewarning');<br>}

CSS

.nx-field.datewarning .nx-fieldtext,.nx-field.datewarning input,&nbsp;<br>.nx-field.datewarning textarea,&nbsp;<br>.nx-field.datewarning .nx-richtext-input {<br>&nbsp; &nbsp; color: red;<br>&nbsp; &nbsp; font-size: large;<br>}


Hope this helps!