[EVOL] Add Custom Data Type (Image) to display in Lightning-Datatable

[bhavesh-bhuckory-ag2r]

[pegros]

Just saw your contribution.

Thank you for pointing out this new possibility. It might also help supporting richtext fields in data tables (already possible in tiles/cards).

I have a few concerns with your implementation :

• putting img links on each row may slow down the table rendering? It would be better to go the custom icon way, leveraging the existing sfpegIconDsp implementation
• what is the size of the rendered image ?
• When the table switches to tile list automatically (e.g. on mobile or narrow windows), what happens ?
• how does the sorting work on this column?
• it would be great to support data tree as well for global consistency.

[bhavesh-bhuckory-ag2r]

Hello, here is an initial context of this PR:

Problem We need to display custom SVG / PNG images in a column of a lightning-datatable. These images are stored in static resources (in specific folders), and their paths are returned by a custom formula field.

However, the standard lightning-datatable types do not support displaying images. The types icon and button-icon only work with Salesforce's SLDS icons (like utility:action, etc.).

We also tried using the IMAGE() function in the formula field, which usually works in standard Salesforce layouts. But in a datatable, it only shows the tag as plain text — the image does not appear.

Solution To keep things simple and avoid heavy changes, we created a Custom Data Type that works with the standard lightning-datatable. (https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types.html#pass-in-custom-data-types-using-a-slot)

We made the following changes:

• Created a new LWC component: sfpegListCustomDataTypeProvider, which provides custom types.

Here's how the structure looks like :

• Updated sfpegListCmp.html to use this provider in the lightning-datatable tag, using the slot approach (as per Salesforce documentation).=> https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types.html#pass-in-custom-data-types-using-a-slot

How It Works

The sfpegListCustomDataTypeProvider component defines and returns custom data types. Each custom type uses an HTML file in the same folder as a template.

In sfpegListCustomDataTypeProvider.js, the function getDataTypes() returns the custom types. Currently, we only added one custom type: customImage.

Here’s the format:

customImage: {
  template: customImageTemplate, // the HTML file to use
  typeAttributes: ["imageUrl"],  // the dynamic value to pass
  standardCellLayout: true
}

customImage is the name of the type we defined.

customImageTemplate is the HTML file that contains an tag. => imported through =>import customImageTemplate from './sfpegListCustomImageTemplate';

Later, if we want to add more custom types, we just define them in getDataTypes() and create their own HTML files.

In the typesAttributes, we have the ability to define properties which we want to be generic. In the case of customImage, it is important to let the image url (which will be passed to the src="" attribute of the tag) to be dynamic per record displayed. Here we defined "imageUrl" as the typeAttribute, thus enabling it to take value of any field of the record. Usage example :

{
    "label" : "Profile Picture",
    "type" : "customImage",
    "fieldName" : "profilePicture",
    "sortable" : "true",
    "typeAttributes" : {
        "imageUrl" : {
            "fieldName" : "profilePicture" //fieldName specifies from which field or mapProperty (if apex) to be used to take the image url. 
        }
    },
    "cellAttributes" : {
        "alignment" : "center"
    }
}

Note : the imageUrl attribute always takes the path of the image. The reason is because it is assigned directly in the 'src' attribute: The img tag is as follows in the sfpegListCustomImageTemplate.html :

<img
        src={typeAttributes.imageUrl}
        class="slds-avatar slds-avatar_circle slds-avatar_large"
    />

as per the salesforce doc, the typeAttributes object allows to directly reference the properties in this html.

An example of this field value is "/resource/gpsicons/test.svg"

To be also noted that the sorting and filtering work as usual, that is based on the text of the field value (for e.g the profilePicture field). For the example above, if the user types "test", the corresponding row is filtered.

Then lastly, we need to call the sfpegListCustomDataTypeProvider in the sfpegListCmp.html, notably in the lightning-datatable tag, setting the value of slots="customdatatype" (as per SFDoc).

This is the minimal way of doing the custom type, having less code and without impacting the sfpegListCmp component. By adding this line of code, even if the datatable does not use any column of that type, it does not cause any regression.

We also provided a small guide to configure the column in the sfpegListCmp.md file

[bhavesh-bhuckory-ag2r]

Just saw your contribution.

Thank you for pointing out this new possibility. It might also help supporting richtext fields in data tables (already possible in tiles/cards).

I have a few concerns with your implementation :

• putting img links on each row may slow down the table rendering? It would be better to go the custom icon way, leveraging the existing sfpegIconDsp implementation
• what is the size of the rendered image ?
• When the table switches to tile list automatically (e.g. on mobile or narrow windows), what happens ?
• how does the sorting work on this column?
• it would be great to support data tree as well for global consistency.

Hello,

• putting img links on each row may slow down the table rendering? It would be better to go the custom icon way, leveraging the existing sfpegIconDsp implementation

==> The sfpegIconDsp depends on the sfpegIcons.svg static resource, meanwhile we have a different folder with a number of .svg files (approx 70). Also, we wanted to cater for images in general, e.g .PNG format, that's why the use of <img tag instead of lightning-icon found inside of sfpegIconDsp

• what is the size of the rendered image ?

==> I have not specified the height and width of the image, but we can create typeAttributes to have them set dynamically, if not we can set a default size. When the table switches to tile list automatically (e.g. on mobile or narrow windows), what happens ? ==> Here is a screenshot of Mobile dimension

• how does the sorting work on this column?

=> sorting and filtering work just like normal columns, that is based on the field text value... example if the field value is "/resource/gpsicons/test/svg", the sorting will be based on this value

• It would be great to support data tree as well for global consistency. ==> Since it works similar to datatables, i have added the feature for data tree as well now. (I will commit soon) Create a Custom Data Type for lightning-tree-grid | Work with Salesforce Data | Lightning Web Components Developer Guide | Salesforce Developers

[nbendjamaa]

Hi Pierre-Emmanuel, This feature will be very helpful to us to dispaly custom icons from static resources in the datatable, it will help adding other custom data types in the future and we will give you a feedback in the next months regarding the use of this feature. Thank you for considering this Merge Request. it will be very helpful

[bhavesh-bhuckory-ag2r]

Hello Sir , are there any actions expected on our side prior to merging this PR please ? We would be very grateful to have this feature up and running in the main repo, since we have requirements of displaying custom images from static resources in datatables.

Thank you for your help and consideration.

to : @pegros

cc @nbendjamaa

[pegros]

@bhavesh-bhuckory-ag2r @scolladon @nbendjamaa I just published the new PEG_LIST packaging with the latest component versions. I already started integrating the feature in this new framework including new badge, pill, richText and iconText custom types. I still need to support static resources, asset files and content files for icons to be able to support Lightning as well as External Site URLs but this should be OK soon.

[pegros]

FYI, when I see the icons you use in your examples, I would recommend to directly use emojis like 📎 or 🚩 instead of static reousrces of asset files as they render much quicker.

[bhavesh-bhuckory-ag2r]

FYI, when I see the icons you use in your examples, I would recommend to directly use emojis like 📎 or 🚩 instead of static reousrces of asset files as they render much quicker.

Hello @pegros Unfortunately many of the icons we need are not available as emojis. For the ones available, yes we can use them. Otherwise for the other ones, they are available as svg files (1 svg for each icon) under a folder.

Looking forward to the solution supporting static resources soon.

Thank you for your help.

[pegros]

@bhavesh-bhuckory-ag2r @scolladon @nbendjamaa I implemented a first version of the feature on the latest sfpegListCmp release. I did not publish a new version of the unlocked package yet but you may retrieve the content of the version from the github repo for now to check that it meets your requirements. I plan to further work on it to add support for datatree display mode as well as include also another display type for multi-picklists.

[bhavesh-bhuckory-ag2r]

@bhavesh-bhuckory-ag2r @scolladon @nbendjamaa I implemented a first version of the feature on the latest sfpegListCmp release. I did not publish a new version of the unlocked package yet but you may retrieve the content of the version from the github repo for now to check that it meets your requirements. I plan to further work on it to add support for datatree display mode as well as include also another display type for multi-picklists.

Hello @pegros Thank you for the updated version so far.

As you mentionned above, you will include a display type for multi-picklists. Does it include displaying several icons in a single cell ? We have a requirement as shown in this image below :

So I would like to ask if we could have a custom type which takes a list of resource urls, or separated by ;(semi-colons) ?

Thank you. @nbendjamaa @scolladon

[pegros]

@bhavesh-bhuckory-ag2r This is an interesting idea. I first wanted to replicate my sfpegMultiValuePillCmp component available in PEG_MISC but I shall see what is achievable without too much complexity.

FYI @scolladon @nbendjamaa

[pegros]

@bhavesh-bhuckory-ag2r Just added a multi-value display mode for dataTable and tileList display mode. You may have a look at this first version for tests, while waiting for the dataTree support.

FYI @scolladon @nbendjamaa

[pegros]

FYI @bhavesh-bhuckory-ag2r @scolladon @nbendjamaa I added a whole set of new custom icons (see sfpegIconDsp) for usual rating and qualification purposes (stars, flags, warnings...) Also added the custom types for the datatree display mode.

[pegros]

FYI @bhavesh-bhuckory-ag2r @scolladon @nbendjamaa Just added a new lookup custom type to better handle lookup fields in sfpegListCmp (with link and popover in any display mode).

[bhavesh-bhuckory-ag2r]

@bhavesh-bhuckory-ag2r Just added a multi-value display mode for dataTable and tileList display mode. You may have a look at this first version for tests, while waiting for the dataTree support.

FYI @scolladon @nbendjamaa

Hello @pegros Thank you so much for this evol. We will test the custom icons soon on the data-table. Does it take into consideration pictures (jpg/png/svg) found inside of a static resource folder ?

[pegros]

@bhavesh-bhuckory-ag2r via the avatar display type, you may currently show whatever image file stored as an asset file in Salesforce. It also works for the multi-value display type with the avatar as variant and a semi-colon separated list of URLs in the main field value. If you have many SVG icons, I would rather suggest extending the sfpegIcons.svg static resource with your own set of icon sprites in the proper sizes to leverage this multi-value type. I might enhance the support of images in a later phase but not in the short term as it would require some rework to component code as well as underlying configuration to support a dynamically loaded static resource. FYI @scolladon