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.
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.
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 -
can you provide an example of javascript to do this?
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); }<br>
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.
Works like a charm!
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:
{{Display_Value}}
or:
{{Display_Value}}
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/t/css-for-template-fields
and here:
