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

edited May 8, 2019 in Questions
How to change background color of skuid table row If a column value say (Required Quantity) is greater than the other column value (Available Quantity) when required quantity value is changed, (Required Quantity column is editable)


  • edited May 8, 2019

    This is easily accomplished using a custom field renderer and CSS.  Unfortunately, I am very busy this AM.  If no one else replies before then, I will post code later today.

  • edited July 30, 2015
    @Moshe, I need to fetch two values from row, one is available Quantity and other is Required Quantity, If i make Required Quantity as custom field renderer, then in arguments[1], I have the value of Required Quantity, how to i get the value of Available Quantity for the same row in snippet.
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Here is how to get other values from the row. 
    var field = arguments[0]; var value1 = arguments[1]; var row = field.row; var value2 = row.FieldName;
  • edited July 30, 2015
    Can we implement this functionality without using JS code snippet
  • edited July 30, 2015
    @irvin, Please let me know your solution when you get time
  • edited May 8, 2019
    Hi Ritika,

    In the following page XML, I have given you several options to consider.  You will see both cell and row level conditional highlighting.  

    If you want to preview the page, you will need to add two custom fields to the Opportunity object: Available Quantity and Required Quantity.

    Hope this is close to what you desire.

    Cheers, Irvin
    <skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Opportunity">   <models>
          <model id="Opportunity" limit="100" query="true" createrowifnonefound="false" sobject="Opportunity">
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Available_Quantity__c"/>
                <field id="Required_Quantity__c"/>
                <field id="StageName"/>
                <field id="Amount"/>
          <pagetitle model="Opportunity">
                <action type="savecancel"/>
          <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read">
                <field id="Name" allowordering="true"/>
                <field id="Amount"/>
                <field id="StageName" valuehalign="" type="CUSTOM" snippet="stageRenderer">
                <field id="Required_Quantity__c" decimalplaces="" valuehalign="" type="CUSTOM" snippet="requiredQuantityRenderer"/>
                <field id="Available_Quantity__c" decimalplaces="" valuehalign="" type=""/>
                <field id="CreatedDate" allowordering="true" valuehalign="" type=""/>
                <action type="edit"/>
                <action type="delete"/>
             <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
                <view type="standard"/>
             <cssitem location="inline" name="highlight-row" cachelocation="false"> table.nx-skootable-data tbody tr.highlight-row td {    
       background-color: LightCoral;
             <jsitem location="inlinesnippet" name="stageRenderer" cachelocation="false">// stageRenderer.js
    var $ = skuid.$;
    var field = arguments[0];
    var value = arguments[1];
    var row = field.row;
    switch (field.mode) {
    case 'edit':
        skuid.ui.fieldRenderers[field.metadata.displaytype].edit(field, value);
    case 'read':
    case 'readonly':
        var cellElem = field.element;
        cellElem.css('background-color', function () {
            var bgValue = null;
            if (value) {
                if (row.StageName === 'Closed Won') {
                    bgValue = '#71EEB8';
                } else if (row.StageName === 'Closed Lost') {
                    bgValue = '#FF6347';
                } else {
                    bgValue = '#FFF8DC';
            return bgValue;
        skuid.ui.fieldRenderers[field.metadata.displaytype].read(field, value);
             <jsitem location="inlinesnippet" name="requiredQuantityRenderer" cachelocation="false">// requiredQuantityRenderer.js
    var $ = skuid.$;
    var field = arguments[0];
    var value = arguments[1];
    var row = field.row;
    if (value &gt; row.Available_Quantity__c) {
    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);

  • edited July 30, 2015
    Thanks a lot Irvin :) Its working fine.
  • edited July 30, 2015
    @Irvin, For highlight, it highlights the row when required quantity is greater, but when i change back it to original value, it doesn't remove the highlight from row i have written below snippet for that:- else if(value < row.Available_Quantity__c){ field.item.element.addClass("normal-row"); } CSS: table.nx-skootable-data tbody tr.normal-row td { background-color:#e7e8ec; } table.nx-skootable-data tbody tr.normal-row:nth-child(odd) td{ background-color:#fff; } Now highlight works only when i refresh the page, normal-row features works as expected. Thanks.
  • edited May 8, 2019
  • edited July 30, 2015
    @Irvin, this highlights the row after saving the record, Can we do it before saving record.

    i have below snippet on Model action "When row in model updated", When Required_quantity__c is updated.
    It goes inside the if else condition, but it makes all the table row highlighted. I want only that row to be highlighted where I am updating required quantity.

    What should I change in this code snippet?

    var $ = skuid.$;
    var params = arguments[0];
    var item = params.item;
    var row = params.row;

    var availableQty = params.model.getFieldValue(params.row,'Available_Quantity__c');
    var requiredQty = params.model.getFieldValue(params.row,'Required_Quantity__c');

    if (requiredQty > availableQty) {
    console.log('in high');
    $("table.nx-skootable-data tbody tr td").css("background-color", "LightCoral");
    else {
    console.log("in low");

  • edited May 8, 2019
    Have you tried performing this logic in a field renderer instead of a model action?
  • edited July 30, 2015
    in field renderer this is working, but it highlights the row after saving/pressing the save button in this case, but I want to highlight the row before save as soon as i change the value of required quantity if the value is greater than available quantity it should highlight the row. But with the above code its highlighting all the rows, so what change should I make to highlight a particular row.
  • edited July 31, 2015
    Thanks a lot Irvin!! It's working
  • edited May 8, 2019
    Awesome!  Post a screenshot or two and let's see the final solution.
  • edited August 3, 2015
    Hey Irvin, This is my solution, I referred one of the post from community for using delayInputCallback var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]), $ = skuid.$; var row = field.row; // Run the default renderer skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); if (field.mode === 'edit') { var input = field.element.find(':input'); var MAX_VALUE = row.AvailableQty__c; var inputValueIsBad = function(inputValue) { return parseFloat(inputValue,10)>=MAX_VALUE; } skuid.utils.delayInputCallback(input,function(newValue,oldValue){ var val = input.val(); if (inputValueIsBad(input.val())) { field.item.element.addClass('highlightrow'); } else { field.item.element.removeClass('highlightrow'); } }); }
  • edited May 8, 2019
    Thanks for sharing!
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Indeed.  Thanks for sticking with this.  Looks good! 
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!