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

Questions
8

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>