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

  • 2
  • Question
  • Updated 3 years ago
  • Answered
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)
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb

Posted 3 years ago

  • 2
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
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
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
@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.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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)
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
Can we implement this functionality without using JS code snippet
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
@irvin, Please let me know your solution when you get time
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
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 &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>
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
Thanks a lot Irvin :) Its working fine.
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
@Irvin, Can you please check my post https://community.skuidify.com/skuid/..., if you could give some approach
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
@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.
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Cool.
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
@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)
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Have you tried performing this logic in a field renderer instead of a model action?
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
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.
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
Thanks a lot Irvin!! It's working
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Awesome!  Post a screenshot or two and let's see the final solution.
(Edited)
Photo of Ritz Gupta

Ritz Gupta

  • 320 Points 250 badge 2x thumb
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');
}
});
}
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Thanks for sharing!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Indeed.  Thanks for sticking with this.  Looks good!