0

I want to have SVG image in one column of data table along with it's data. Can't make any changes to HTML, so can't use IMG tag. I have SVG file as static resource. here's the code of HTML and JS

HTML-

<template>
<c-generic-list-view
direct-column-property-input={columns}
records={myTaskWrappers}


records-per-page={recordsPerPage}
display-row-selector=true
searchable-cols={searchableColsList}
onrowsselected={rowSelectedEvent}
max-row-selection=1
>

JS code-

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';

// Apex functions
import getMyPartnerTask from 
'@salesforce/apex/PartnerTaskController.getMyPartnerTask';

// CSS
import listViewCSS from '@salesforce/resourceUrl/listViewCSS';
import InProgress_Status from "@salesforce/resourceUrl/InProgressStatusIcon";


// Column Header Labels
import columnHeader1 from '@salesforce/label/c.Task_Name';
import columnHeader2 from '@salesforce/label/c.Task_Category';
import columnHeader3 from '@salesforce/label/c.Task_Status';
import columnHeader4 from '@salesforce/label/c.Estimated_Effort';
import columnHeader5 from '@salesforce/label/c.Due_date';


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,
    cellAttributes: {
        class:{fieldName:'statusColor'},
        iconName:{fieldName:'statusIconName'}, 
        iconPosition:'left'
    }
},
{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: 'status',
    hideDefaultActions: true,
    sortable: true,
    typeAttributes: {
        value: {fieldName: 'Due_Date__c'},
        textColor:{fieldName:'dueDateColor'},
        iconColor:{fieldName:'dueDateColor'},
        icon:{fieldName:'iconName'}, 
        size: { fieldName: 'sizedueDate' },
        iconPosition:'left'
}
}

]

const DUEDATECONDITIONALFORMATTINGPROEPRTIES =
[
    {textColor: 'red',
    iconName: 'utility:warning'
    }
]

const STATUSCONDITIONALFORMATTINGPROEPRTIES = 
[
    {
      textColor: 'grey',
    //  iconName: 'utility:threedots'
    // textColor: 'change-color',
    // iconName: this.statusIcon
    }
]

export default class MyTasksListView extends LightningElement {
myTaskWrappers;
columns = PARTNERTASKCOLUMN;
statusIcon = InProgress_Status;


connectedCallback(){
    
        getMyPartnerTask()
        .then((result)=>{
            console.log(' ICON '+ this.statusIcon);

            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
        }));
            this.setConditionalFormatting();
            this.dateFormat();
            
        })
        .catch(error => {
            console.error('Error retrieving data '+error);
        });
    }

    setConditionalFormatting() {
        if (this.myTaskWrappers) {
          this.myTaskWrappers = this.myTaskWrappers.map(item => {
            if (item.Due_Date__c || item.Status__c) {
              let dueDate = new Date(item.Due_Date__c);
              console.log('Due '+dueDate);
              let today = new Date();
              let nextBusinessDay = new Date(today);
              fifthBusinessDay.setDate(fifthBusinessDay.getDate() + 1);
      
                if (fifthBusinessDay.getDay() !== 0 && fifthBusinessDay.getDay() !== 6) {
                  businessDaysCount++;
                }
              }
      
              let iconName = dueDate > today && dueDate <= fifthBusinessDay ? DUEDATECONDITIONALFORMATTINGPROEPRTIES[0].iconName : " ";
              let dueDateColor = dueDate > today && dueDate <= fifthBusinessDay ? DUEDATECONDITIONALFORMATTINGPROEPRTIES[0].textColor : " ";
              let statusColor = item.Status__c === 'In Progress' ? STATUSCONDITIONALFORMATTINGPROEPRTIES[0].textColor : " ";
            //   let statusIconName = item.Status__c === 'In Progress' ? STATUSCONDITIONALFORMATTINGPROEPRTIES[0].iconName : " ";
            
            let statusIconName = item.Status__c === 'In Progress' ? '<img src={this.statusIcon}/>' : " ";
            
      
              return {
                ...item,
                "dueDateColor": dueDateColor,
                "iconName": iconName,
                "statusColor": statusColor,
                "statusIconName": statusIconName,
                "sizedueDate" : 'x-small',
                "statusSize" : 'x-small'
              };
              debugger;
            }

            return item;
          });
        }
      }

}

1 Answer 1

0

Referred this link from google and it works. creating custom type

link - https://salesforcecodex.com/salesforce/show-image-in-lightning-web-component-data-table/

3

You must log in to answer this question.

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