1

I have added the utility icon to my table based on condition i.e. dynamically and it's working fine but I want to change its color too which doesn't seem to work for me. If anyone could help. I tried classes as well but nothing works.

JS code for your reference

const PARTNERTASKCOLUMN = [
    {label: columnHeader1,
        type: 'url',
        hideDefaultActions: true,
        fieldName: 'Name',
        typeAttributes: {label: {fieldName: 'Name'}, urlValue: '_self'},
        sortable: true
    },
    {label: columnHeader3,
        type: 'text',
        hideDefaultActions: true,
        fieldName: 'Status__c',
        sortable: true
    },
    {label: columnHeader2,
        type: 'text',
        hideDefaultActions: true,
        fieldName: 'Category__c',
        sortable: true
    },
    {label: columnHeader4,
        type: 'text',
        hideDefaultActions: true,
        fieldName: 'Estimated_Efforts__c',
        sortable: true
    },
    {label: columnHeader5,
        type: 'date',
        hideDefaultActions: true,
        fieldName: 'Due_Date__c',
        sortable: true,
        cellAttributes: {
            class:{fieldName:'dueDateColor'},
            iconName:{fieldName:'iconName'}, 
            iconPosition:'left',
            iconColor: { fieldName: 'dueDateColor' }
        }
    }
]

const DUEDATECONDITIONALFORMATTINGPROEPRTIES =
[
    {
        date: todayDate,
        textColor: 'slds-text-color_error',
        iconName: 'utility:warning'
    }
]

export default class MyTasksListView extends LightningElement {
    myTaskWrappers;
    columnIsSortableDefault= true;
    hideColumnDefaultActionsDefault= true;
    recordsPerPage= 2;
    displayRowSelector= true;
    searchableColsList=[true, false , true, false , false];
    

    columns = PARTNERTASKCOLUMN;

    hideViewButton = true;
    hideDismissButton = true;
    selectedRecord=null;
    //isLoading = false;

    // Labels for UI
    label = {
        myTasksHeader,
        viewButton,
        dismissTaskButton,
        findTaskSearchBar
    };

    connectedCallback(){
        loadStyle(this, listViewCSS)
            .then(() => console.log('ListViewCSS Styles loaded.'))
            .catch(error => console.log("Error " + error.body.message));

        getMyPartnerTask()
        .then((result)=>{

            console.log('RESULT  '+result);
            this.myTaskWrappers = (result);
            this.myTaskWrappers = result.map(wrapper => ({
                Name: wrapper.name, 
                Status__c: wrapper.status,
                Due_Date__c: wrapper.dueDate, 
                Category__c: wrapper.category, 
                Estimated_Efforts__c: wrapper.estimatedEffort
            }));
            console.log('MY TASK WRAPPER '+this.myTaskWrappers);
            console.log('Called conditional');
            this.setConditionalFormatting();
            this.dateFormatLocaleWise();
            
        })
        .catch(error => {
            console.error('Error retrieving data '+error);
        });
    }

    setConditionalFormatting(){
        if(this.myTaskWrappers){
            this.myTaskWrappers = this.myTaskWrappers.map(item => {
                console.log('today '+ todayDate);
                console.log('date ' + item.Name +' ' + item.Due_Date__c);
                if(item.Due_Date__c){
                    
                    let iconName = item.Due_Date__c >todayDate ? DUEDATECONDITIONALFORMATTINGPROEPRTIES[0].iconName :" "
                    let dueDateColor = item.Due_Date__c >todayDate ? DUEDATECONDITIONALFORMATTINGPROEPRTIES[0].textColor :" "
                    return {...item, 
                        "dueDateColor":dueDateColor,
                        "iconName":iconName
                    }
                }
                return item;
            });
        }
    }

1 Answer 1

1

i have used a custom table component which is having custom attributes.

CustomdataTable.html

<template> </template>

CustomdataTable.js

import LightningDatatable from 'lightning/datatable';
import DatatableStatusTemplate from "./statusTemplate.html";

export default class CustomDatatable extends LightningDatatable {
static customTypes = {
    
    status: {
        template: DatatableStatusTemplate,
        standardCellLayout: true,
        typeAttributes['value','iconColor','icon','size','textColor','isPolaris','displaySpinner']
    },

};
}

Create a html template of status now.

status.html

<template>
<c-generic-status 
    icon={typeAttributes.icon} 
    icon-color={typeAttributes.iconColor} 
    size={typeAttributes.size} 
    value={typeAttributes.value}
    text-color={typeAttributes.textColor}>
</c-generic-status>
</template>

Generic status component which we will receiving all these type attributes and display icon as per our given typer attributes in parent component.

genericStatus HTML

<template>
<lightning-icon 
    icon-name={icon}
    src={iconSrc}
    class={iconClass} 
    size={size}>
</lightning-icon>
<span class={textColor}>
    {value}
</span>
</template>

Generic Status JS

import { LightningElement , api } from 'lwc';
import PolarisIcon from '@salesforce/resourceUrl/polarisIcons';

export default class GenericStatus extends LightningElement {
@api value;
@api iconColor;
@api icon;
@api size;
@api textColor;

get iconSrc(){          
    if(this.isPolaris){
        return PolarisIcon + '/polaris-icons-svg/' + this.icon + '.svg#icons';
    }
    else{
        return '';
    }
}

get iconClass(){
    return this.iconColor + ' slds-m-right_xx-small';
}
}

You can fill out css as per your requirement. I hope it helps.

2
  • Nice one, welcome to the site!
    – Matt Lacey
    Jul 20, 2023 at 14:26
  • thanks @MattLacey
    – SF Learner
    Jul 20, 2023 at 15:00

You must log in to answer this question.

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