0

I am trying to change the font color of a custom field values displayed in a table. This is based on a condition wherein if this custom field's value is less than a specific amount, it will display said value in red font.

I have no problem in displaying the correct values, but each time I try to attempt to style the values, nothing changes.

Note: computedValue is the variable assigned in Apex class to get the value of the custom field named Computed_Value__c

Below are some portions of the codes I have problem with:

html file:

<!-- body section in html-->
<tbody>
<template if:true={actualResults}>
    <template for:each={actualResults} for:item="keyValue">
        <tr key={keyValue.key}>
            <td scope="col" style={keyValue.styleColor}>
                <div>{keyValue.value.computedValue}</div>
            </td>
        </tr>   
    </template> 
</template>
</tbody> 

javascript file:

import getAllResult from '@salesforce/apex/SampleController.getAllResult';

export default class SampleLWC extends LightningElement {

@track actualResults = [];

//section in javascript

getAllResult()
    .then(result => {
        if (result) {
            let mapResult = [];
            
            var styleColor;    

            for (var key in result) {
                mapResult.push({ key: key, value: result[key] });
                        
            }
            this.actualResults = mapResult.map(e => {
                 let isLess = e.Computed_Value__c < 1000;
                 e.styleColor = isLess ? 'background-color:red' :'background- 
                 color:none';
                 return e;
            });
        }
    })
    .catch(error => {
        this.error = error;
    });
}     

2 Answers 2

2

It looks like you're declaring mapResult but not actually adding any objects to the array, nor adding the styleColor attribute to any of those objects:

Assuming your Apex is returning a List of records...

this.actualResults = [...result].map(e => {
   // You may have to "clone" each element in "result" array if you get an immutable error
   // let o = JSON.parse(JSON.stringify(e)); // replace e with o below
   let isLess = e.Computed_Value__c < 1000;
   e.styleColor = isLess ? 'background-color:red' : 'background-color:none';
   return e;
});

EDIT: Taking your current code all the way home You can replace the following:

if (result) {
...
}

With:

if (result) {
    //let result = [{Id:'00123',Computed_Value__c:1200}, {Id:'00124',Computed_Value__c:800}];
    this.actualResults = [...result].map(e => {
        let isLess = e.Computed_Value__c < 1000;
        e.styleColor = isLess ? 'background-color:red' : 'background-color:none';
        return e;
    });
}

And simplify your code by using the unique SF Id as the Key:

<tr key={keyValue.Id}>
    <td scope="col" style={keyValue.styleColor}>
        <div>{keyValue.computedValue}</div>
    </td>
</tr> 
5
  • Thanks for your response. I modified my code based on your suggestion, but the result is still the same: no effect on font-colors even when the criteria is met. For this line, this.actualResults = [...result].map(e => { , I added mapResult. Is this correct?
    – Ertyq
    Commented Feb 23, 2021 at 3:29
  • If you are providing background color, then in html you should use style attribute instead of class. Example: style={keyValue.styleColor}>
    – manjit5190
    Commented Feb 23, 2021 at 20:44
  • @manjit5190 I modified html code to this style={keyValue.styleColor}> but vs code displays following : Do not use empty rulesets
    – Ertyq
    Commented Feb 24, 2021 at 3:19
  • I was able to remove above message by disabling css.validate to false in settings.json file. No more errors so far and was able to deploy it, but still, it does not change the background color. Hoping anyone can help me on this.
    – Ertyq
    Commented Feb 24, 2021 at 7:24
  • @Ertyq Thanks for the comments, I've edited my answer. You can get rid of mapResult by using the Id of the records as the key. Commented Feb 24, 2021 at 18:43
1

Here is simplified version of code which works.

HTML:

<template>
    <tbody>
        <template if:true={actualResults}>
            <template for:each={actualResults} for:item="keyValue">
                <tr key={keyValue.key}>
                    <td scope="col" style={keyValue.styleColor}>
                        <div>{keyValue.Computed_Value__c}</div>
                    </td>
                </tr>
            </template>
        </template>
    </tbody>
</template>

JS:

import {LightningElement} from "lwc";

export default class App extends LightningElement {

    get actualResults() {

        let result = [{
            key: 1,
            Computed_Value__c: 1200
        }, {
            key: 2,
            Computed_Value__c: 800
        }]

        return result.map(e => {
            // You may have to "clone" each element in "result" array if you get an immutable error
            // let o = JSON.parse(JSON.stringify(e)); // replace e with o below
            let isLess = e.Computed_Value__c < 1000;
            e.styleColor = isLess ? 'background-color:red' : 'background-color:green';
            return e;
        });
    }
}

Result

Result

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .