Change Field Color

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hello,
Is there a way to allow users to change the backgound color of a field on a SKUID page? We have users that would like to highlight fields as red, green, or yellow.

I added in a CSS to highlight a column, but our users want the ability to change the field colors themselves. Is this possible?

Thank you.

CSS
.nx-basicfieldeditor-column:last-child
.nx-basicfieldeditor-section-wrapper:last-child
.nx-basicfieldeditor-section-header {
color: black
}

.nx-basicfieldeditor-column:last-child
.nx-basicfieldeditor-section-wrapper:last-child
.nx-basicfieldeditor-section {
background-color: white
}

.nx-basicfieldeditor-column:last-child
.nx-basicfieldeditor-section-wrapper:last-child
.nx-basicfieldeditor-item {
background-color: yellow
}
Photo of Colin O'Brien

Colin O'Brien

  • 170 Points 100 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
There is not a way to do this declaratively.  However,  I think you could pretty easily create a field on your salesforce object that allowed users to select a color,  and then use javascript to inject that value into a css style within a custom component.  
Photo of Colin O'Brien

Colin O'Brien

  • 170 Points 100 badge 2x thumb
I will give that a try
Thanks Rob for your help!
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Colin ... here's an example that's similar to your need. This is a snippet that we use as a custom field renderer on the the Priority field on the Task object. It conditionally adds a CSS class to the field based on its value.


// Conditionally formats the Priority field in task lists to highlight high priority tasks
//Adds CSS classes to allow for conditional formatting
var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]);
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
if (field.mode == 'read' && value == 'High') {
field.element.addClass("highpriority");
}


In your scenario, you could have a picklist field called Colour Selector. Then you'd need a custom field renderer (snippet) on the field whose colour you want to affect. That snippet would check the value of Colour Selector and add the appropriate CSS class.