function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ertyq MrskErtyq Mrsk 

Conditional Styling of Map Results in Salesforce LWC Table

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: 
<!-- body section in html-->
<tbody>
<template if:true={actualResults}>
    <template for:each={actualResults} for:item="keyValue">
        <tr key={keyValue.key}>
            <td scope="col" class={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 isLess;
            var styleColor;    

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

 
Nisar AhmadNisar Ahmad

Hi Ertyq Mrsk

try this: https://developer.salesforce.com/docs/component-library/tools/playground/iLfOlW4yl/8/edit

Thanks