Color Picklist Value Based On Status

  • 4
  • Question
  • Updated 2 years ago
  • Answered
I'm trying to figure out how to dynamically color a status picklist on a lead's table. Can you suggest the best way to do this? The leads will be updated via a popup and will need to re-render if it's changed. 
Photo of Seth Calkins

Seth Calkins

  • 142 Points 100 badge 2x thumb

Posted 5 years ago

  • 4
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,678 Points 20k badge 2x thumb
I can think of two ways to do this. 

1. You can create a formula field that chooses an image based on the picklist value.   (The images should be stored in a static resource).   If you put this formula field in your Skuid page it will show the correct image in the table. 

2. If you want to conditionally format the background of the picklist on the lead table you can create a custom renderer for that field.  In javascript you will have a series of if then statements.  When they are true you can add css attributes to the element. 
Photo of Seth Calkins

Seth Calkins

  • 142 Points 100 badge 2x thumb
 Option #2 is probably the best fit for my case. However, I'm not knowledgeable enough with javascript to write any if statements. 

I'm trying to create something similar to this - 
Photo of Seth Calkins

Seth Calkins

  • 142 Points 100 badge 2x thumb
can you provide an example of javascript to do this?
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,550 Points 10k badge 2x thumb
Something like this should work.  Just put it in as a custom field renderer inline snippet.

var $ = skuid.$,
    field = arguments[0],
    value = arguments[1];

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode]( field, value );

var colormap = {
    'Prospecting' : 'orange',
    'Qualification' : 'purple',
    'Needs Analysis' : '#AAAA33',
    'Perception Analysis' : '#8888AA',
    'Closed Won' : '#AA33AA'

var defaultColor = '#33AAAA';

if (field.mode === 'read') {
    field.element.css('background-color',colormap[value] || defaultColor);

Of course you'll need to change the colormap and default color variables to fit what you need.  This is what it looks like for me.

Photo of Don Souza

Don Souza, Employee

  • 1,180 Points 1k badge 2x thumb
Works like a charm!
Photo of John Dahlberg

John Dahlberg, Champion

  • 3,914 Points 3k badge 2x thumb
Another option is to use css and use a formula field to toggle your styling.  This keeps your logic out of code and in data, which I find scales better.  The general concept is to use merge text in your template field to insert a style value or dynamic class. 

It could look like:  <div class="{{Display_Color}}">{{Display_Value}}</div>

or:  <div class="ticker" style="background-color:{{{Display_Color}}};">{{Display_Value}}</div>

In the first example your formula would need to reference a css class definition and in the second example it would need to output a color value.

There are some examples here:

and here: