Color Picklist Value Based On Status

edited November 14, 2018 in Questions
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. 

Comments

  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    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. 


  • edited September 26, 2014
     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 - image
  • edited September 29, 2014
    can you provide an example of javascript to do this?
  • edited November 14, 2018
    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';    field.element.css('border-radius','6px');  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.

    image
  • Don SouzaDon Souza ✭✭✭
    edited December 5, 2017
    Works like a charm!
  • John DahlbergJohn Dahlberg ✭✭✭✭
    edited December 16, 2017
    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:

    https://community.skuid.com/skuid/topics/css-for-template-fields

    and here:

    https://community.skuid.com/skuid/topics/field-rendering


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!