How to add conditional inline CSS to a cell in a table based on value in the cell ?

Questions
,
1

I want to change the background color of the cells in a table dynamically based on the value in cell.

I found this example which I tried to modify according to my requirement but I was not successful in add or overriding CSS

var $ = skuid.$;var field = arguments[0];
var value = arguments[1];

switch( field.mode ){
case ‘edit’:
skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value );
break;

case 'read':
case 'readonly':
    var cellElem = field.element;
    var iconElem =
        $( '<div>' )
            .addClass('ui-silk')
            .appendTo( cellElem );
     
    switch( value )
    {
        case 'Value 1':
            iconElem.addClass('ui-silk-flag-red');
            break;
        case 'Value 2':
            iconElem.addClass('ui-silk-flag-orange');
            break;
        case 'Value 3':
            iconElem.addClass('ui-silk-flag-green');
            break;
        default:
            iconElem.addClass('ui-silk-sport-8ball');
            break;
    }
    break;

}

Can anyone suggest what we can do in such scenarios?

-Thanks,
Charles M

2

Did you create a JavaScript snippet and specify it as a custom renderer for the field in question?  Check out this tutorial:

http://help.skuidify.com/m/11720/l/204496-table-component-custom-field-renderers

3

Yes Irvin,

I followed the same exercise and was able create the results as per the example.

But when I tried to tweak it to my requirement it is not displaying the columns

var $ = skuid.$, field = arguments[0],
value = arguments[1];
var iconElem =
$( ‘

’ )
.addClass(newcss)
.appendTo(cellElem);

switch( value )
{
case ‘Manufacturing’:
iconElem.addClass(‘color-red’);
break;
case ‘Retail’:
iconElem.addClass(‘color-blue’);
break;
case ‘Government’:
iconElem.addClass(‘color-blue’);
break;
case ‘Consulting’:
iconElem.addClass(‘color-red’);
break;
default:
iconElem.addClass(‘color-red’);
break;
}
break;

.color-red {
color:red;
}
.color-blue {
color:blue;
}

I added these css classes in newcss.

Added the javascript snippet to the field and associated it with the respective column.

In the preview the values in the industry column were blank.

I checked the inspect element and I couldn’t find the values or nx-fieldtext which displays the value of the picklist.

Please let me know if there is any work around.

-Thanks,
Charles M

4

Hi,

Here’s an example of field rendering that I created for another community member. Hope this helps.

<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>
5

Thanks Irvin,

This code helped me get a pretty good perspective on how to apply css in various ways.

Thanks again it helped me do what I’m looking for.

-cheers,
Charles M