Highlight a field based on Value on another field

Components are not attached to the DOM until they have finished rendering, so your jQuery query isn’t returning any elements on the first pass (meaning you aren’t applying the background color to anything).

Fortunately, this is pretty easy to fix: field.element will give you the HTML element currently in context:

field.element.css('background', statusColors[cstatus] || defaultColor);

@JD, Thank you for your help on this. I am new with JavaScript and your help is really appreciated. I was able to highlight Charter Status field using your solution.

What I am trying to do is highlight Shared with Customer field based on Charter Status, Please see my attached image. Is this possible?

Andrew - there are some complexities assoiated with highlighting a second field in real time.  This means some significant changes to your snippet  (Maybe I should say a complete rewrite). 

Some setup first. 
1. Add a CSS Class value to your “Share with Customer” field called “backgroundColor”
2. Add a CSS Class value to your “Charter Status” field called “color-controller”

Then: 
3. Add a javascript resource of type “In-Line”  Your code needs to look like this: 

(function(skuid){ var $ = skuid&#46;$;<br />$(document&#46;body)&#46;one('pageload',function(){<br />var myModel = skuid&#46;model&#46;getModel('YourModelName');<br />&nbsp; &nbsp; &nbsp; &nbsp; var row = myModel&#46;getFirstRow();<br />&nbsp; &nbsp; &nbsp; &nbsp; var field = row&#46;Charter_Status__c;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var statusColors = {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Base Camp' : 'Yellow',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'PO Pending':'Yellow',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Scheduling':'Yellow',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Scheduling CCC':'Yellow',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Current':'Green',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Review':'Green',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Cancelled':'Red',<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Customer Hold':'Red'<br />&nbsp; &nbsp; &nbsp; &nbsp; };<br />&nbsp; &nbsp; &nbsp; &nbsp; var defaultColor = 'White';<br />&nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; $("&#46;backgroundColor")&#46;css("background-color",statusColors[field] || defaultColor);<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; $($('&#46;color-controller &#46;nx-field')[0])&#46;on('change', function(){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = $(this)&#46;find('select')&#46;val();<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("&#46;backgroundColor")&#46;css("background-color",statusColors[val]);<br />&nbsp; &nbsp; &nbsp; &nbsp; });<br />});<br />})(skuid);

You will need to replace YourModelName in line 4 with your true model name. 

Hope this gets you working.

Thank you Rob, I have followed instructions you have provided however the fields are not highlighted. I am not sure what I am missing. I need more help on this. Thanks

Debug your code.  Look in the browser console to see if errors are getting thrown.  Follow those errors back in the code.  Look in the code editor in the Composer to see if there are any red x icons or exclamation points - hover over these for hints.

Double check the configuration of the javascript resource and the css classes on the fields. 

Hi Rob, After debugging the code we have found out that the field is being highlighted for few seconds when the page loads but changing back to the default background. We are not sure what is causing this. Thanks

Hi Andrew, 

This problem has been solved a number of ways.  Recently, Ritz had a similar use case and you can read about her solution here:

How to change background color of skuid table row If a column value is greater than the other column value.

Search the community for other solutions.

Regards,
Irvin