This is what we do, with specific fields, but I’d certainly appreciate other approaches - and see if the column heads can also be colored.
Add a CSS In-Line Resource:
table.nx-skootable-data tbody tr.highlight_row_red-odd:nth-child(odd) td {
color: #FF0000;
}
table.nx-skootable-data tbody tr.highlight_row_red-even:nth-child(even) td {
color: #F80000;
}
Add a Javascript In-line Snippet:
var field = arguments[0];
var value = arguments[1];
field.item.element.removeClass(“highlight_row_red-odd”);
field.item.element.removeClass(“highlight_row_red-even”);
if ( field.model.getFieldValue( field.row, ‘Selection_Date__c’) === null )
{
field.item.element.addClass(“highlight_row_red-odd”);
field.item.element.addClass(“highlight_row_red-even”);
}
if ( field.mode == “edit” ) {
skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value ); }
else {
skuid.ui.fieldRenderers[field.metadata.displaytype].read( field, value );
}
On the appropriate column in the table, replace the standard Field Renderer with the Custom snippet defined above.
This is just the tip of the iceberg, so to speak. There is also:
.blueHighlight {
background-color: lightblue;
}
var cellElem = field.element;
var cellElem2 = field.item.fields[i].element;
cellElem.addClass(“blueHighlight”);
cellElem2.addClass(“blueHighlight”);
and:
field.element.css(“font-Weight”, “bold”);
field.element.css(“background-color”, “#B1F2A4”);
which may give you some ideas and hints.
