Apex Code Development You need to sign in to do that
Don't have an account?
Shuhbam Sinha How to show formula image in aura lightning datatable salesforce
Hello,
I have a requirement to show Image in AURA Lightning Datatabe column and this image field is a formula field which is using static resource to display the images . When I use this formula field in the lightning datatable i get the source url like below but not the image
<img src="/resource/SmartActive" alt="Smart Active RX Logo" style="height:40px; width:90px;" border="0"/>
How to show the exact image instead of source url. Please help me in this. I am using aura not lwc here .Thanks in Advance.
I have a requirement to show Image in AURA Lightning Datatabe column and this image field is a formula field which is using static resource to display the images . When I use this formula field in the lightning datatable i get the source url like below but not the image
<img src="/resource/SmartActive" alt="Smart Active RX Logo" style="height:40px; width:90px;" border="0"/>
How to show the exact image instead of source url. Please help me in this. I am using aura not lwc here .Thanks in Advance.
I found one workaround from Sai Praveen's help. What we can do here
var columns = [ { label: 'Logo', fieldName: 'Formula_Image__c', type: 'text', cellAttributes: { class: { fieldName: 'customCSSClass' }} },so my formula is using Sales__c custom field to popoulate the image . so now we can use one for loop in controller itself.rows.forEach(function(record){ if (record.Sales__c === '1200') { record.customCSSClass = 'Smart'; } if(record.Account__r.Sales__c === '1000'){ record.customCSSClass = 'logo'; } }now create css file for diiferent images like below :-.THIS .Smart{ background-image: url(/resource/image1); background-repeat: no-repeat; background-size: 100px; background-position: center; } .THIS .logo{ background-image: url(/resource/image2); background-repeat: no-repeat; background-size: 30px; background-position: center; }Now i guess you will be able to show images from that are coming from any formula field.
All Answers
This is not possible as of today as salesforce does not support it. Please find the below idea for the same where you can upvote it.
https://ideas.salesforce.com/s/idea/a0B8W00000GdVgOUAV/lightningdatatable-support-image-data-type
There is also some workaround suggested by one of the user in the comment of the Idea although Salesforce did not suggest any workaround.
Let me know if you face any issues.
If this solution helps, Please mark it as best answer.
Thanks,
I found one workaround from Sai Praveen's help. What we can do here
var columns = [ { label: 'Logo', fieldName: 'Formula_Image__c', type: 'text', cellAttributes: { class: { fieldName: 'customCSSClass' }} },so my formula is using Sales__c custom field to popoulate the image . so now we can use one for loop in controller itself.rows.forEach(function(record){ if (record.Sales__c === '1200') { record.customCSSClass = 'Smart'; } if(record.Account__r.Sales__c === '1000'){ record.customCSSClass = 'logo'; } }now create css file for diiferent images like below :-.THIS .Smart{ background-image: url(/resource/image1); background-repeat: no-repeat; background-size: 100px; background-position: center; } .THIS .logo{ background-image: url(/resource/image2); background-repeat: no-repeat; background-size: 30px; background-position: center; }Now i guess you will be able to show images from that are coming from any formula field.