How do you change the color of a tab in a tabset based on a specific value in a picklist

  • 1
  • Question
  • Updated 3 years ago
  • Answered
On my Account tab I have tabset with 3 tabs to breakdown the fields. In the first tabset tab I have an Industry field picklist. Is there a way to change the color of that first tab based on what is picked in the picklist. Basically if "Other" is chosen then the tab color would change to red, if "Commercial" is chosen it would turn yellow and so on... If this is possible the more detailed the explanation you can provide the better, from the steps to take and the code to include.
Thanks for the help
Photo of Anthony Hare

Anthony Hare

  • 440 Points 250 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Anthony,

One option would be to set up a Model Action on the Account.Industry field and run a Skuid JavaScript snippet when the field changes.  The snippet would set the CSS on the tab based on the Industry.

Here's a quick hack to get you started (note I am just typing and none of this is tested!):

var params = arguments[0], $ = skuid.$; 
var row = params.row;
var updates = params.updates;
var industry = params.row.Industry;
var colormap = {
    'Commerical' : 'yellow',
    'Other' : 'red'
}
var defaultColor = 'pink';
$('#myTab').css('background-color', colormap[industry] || defaultColor);

Regards,
Irvin 
(Edited)
Photo of Anthony Hare

Anthony Hare

  • 440 Points 250 badge 2x thumb
Thank you Irvin,

I'm still unable to get this option to work. If you have any other suggestions or if anyone else has any ideas I would appreciate it.

Thanks again.
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
Try changing 'background-color' to 'background'
Photo of Anthony Hare

Anthony Hare

  • 440 Points 250 badge 2x thumb
Now it is working beautifully.

Thank You for all the help!!!!
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
No problem! Happy Skuidifying!
Photo of Anthony Hare

Anthony Hare

  • 440 Points 250 badge 2x thumb
Got another one for you... sorry first real experience with this ability in skuid. Attached is a pic of the same basic, Picklist value changes the tab color function that I had a problem with previously. This time it is with a Form Status...Form_Status__c field picklist with with 4 Status's available. None, Draft,On Hold, & Complete. I am trying to get the third tab "DFE" to change color whenever the On Hold Status is selected. As a side not I will have to also make this work for DFA, SCP & RX tabs. So any help getting this to work would be great.

Thanks for the help again!
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
So you would replace the "li:third" with "li:nth-child(2)". The count starts at 0, so the first child is 0, second child is 1, third child is 2, etc.

If you are looking to do more of this sort of thing in the future, it might be worth your while to take a look at this page.