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

Ritika,

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.

Regards,
Irvin

https://community.skuid.com/t/can-i-highlight-the-background-of-a-cell-in-a-table

@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.

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;

Can we implement this functionality without using JS code snippet

@irvin, Please let me know your solution when you get time

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">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
            <field id="Available_Quantity__c"/>
            <field id="Required_Quantity__c"/>
            <field id="StageName"/>
            <field id="Amount"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Opportunity">
         <maintitle>
            <template>{{Model.labelPlural}}</template>
         </maintitle>
         <subtitle>
            <template>Home</template>
         </subtitle>
         <actions>
            <action type="savecancel"/>
         </actions>
      </pagetitle>
      <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read">
         <fields>
            <field id="Name" allowordering="true"/>
            <field id="Amount"/>
            <field id="StageName" valuehalign="" type="CUSTOM" snippet="stageRenderer">
               <label>Stage</label>
            </field>
            <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=""/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css>
         <cssitem location="inline" name="highlight-row" cachelocation="false"> table.nx-skootable-data tbody tr.highlight-row td {    
   background-color: LightCoral;
}</cssitem>
      </css>
      <javascript>
         <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);
    break;
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);
    break;
}</jsitem>
         <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 &amp;gt; row.Available_Quantity__c) {
    field.item.element.addClass("highlight-row");
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
    </jsitem>
      </javascript>
   </resources>
</skuidpage>

Thanks a lot Irvin 🙂 Its working fine.

@Irvin, Can you please check my post https://community.skuid.com/t/trying-to-update-a-formula-field-of-table-row-when-a-reference-field-is-updated?topic-reply-list[settings][filter_by]=all&topic-reply-list[settings][page]=1#reply_15947088, if you could give some approach

@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.

Cool.

@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”);

}

Have you tried performing this logic in a field renderer instead of a model action?

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.

Thanks a lot Irvin!! It’s working

Awesome!  Post a screenshot or two and let’s see the final solution.

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; 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’); } }); }

Thanks for sharing!

Indeed.  Thanks for sticking with this.  Looks good!