Highlight a field based on Value on another field

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
Hello there, I am trying to high a field based on values from another picklist field. The highlight is only working when the user changes the field. It does not work when if there are no changes to the field. Below is my In-Line snippet does anyone knows what I need to change to make this work. Thanks

var params = arguments[0], $ = skuid.$; var model = params.model;

var row = params.row;

   console.log(params);
  
  var field = arguments[0], 
  value = skuid.utils.decodeHTML(arguments[1]); 

   skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 
    var cstatus = params.row.Charter_Status__c;
    var statusColors = {
        'Order Entry' : 'Yellow',
        'Base Camp' : 'Yellow',
        'PO Pending':'Yellow',
        'Scheduling':'Yellow',
        'Scheduling CCC':'Yellow',
        'Current':'Green',
        'Review':'Green',
        'Cancelled':'Red',
        'Customer Hold':'Red'
    };
        var defaultColor = 'White';
        
     $('.nx-basicfieldeditor-item.ShareWithCutomer').css('background', statusColors[cstatus] || defaultColor );
   
Photo of Andrew Ottaru

Andrew Ottaru

  • 1,098 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
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);
(Edited)
Photo of Andrew Ottaru

Andrew Ottaru

  • 1,098 Points 1k badge 2x thumb
@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? 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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.$;
$(document.body).one('pageload',function(){
var myModel = skuid.model.getModel('YourModelName');
        var row = myModel.getFirstRow();
        var field = row.Charter_Status__c;
            var statusColors = {
               'Base Camp' : 'Yellow',
               'PO Pending':'Yellow',
               'Scheduling':'Yellow',
               'Scheduling CCC':'Yellow',
               'Current':'Green',
               'Review':'Green',
               'Cancelled':'Red',
               'Customer Hold':'Red'
        };
        var defaultColor = 'White';
    
        $(".backgroundColor").css("background-color",statusColors[field] || defaultColor);
        
        $($('.color-controller .nx-field')[0]).on('change', function(){
            var val = $(this).find('select').val();
            $(".backgroundColor").css("background-color",statusColors[val]);
        });
});
})(skuid);



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

Hope this gets you working.
(Edited)
Photo of Andrew Ottaru

Andrew Ottaru

  • 1,098 Points 1k badge 2x thumb
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
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 
Photo of Andrew Ottaru

Andrew Ottaru

  • 1,098 Points 1k badge 2x thumb
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
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
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
(Edited)