0

I am trying to create a custom Account Team for a custom project called "Project". The Project will have "Project Members" so we can see which users are working on the project and what roles etc. they have on the project. I was able to create the table successfully, but I really want to show the user's profile avatar next to their name. If you look at account teams from salesforce out of the box, it shows avatars next to the name of the user.

Full context of the LWC:

projectTeamMembers.html

<template>
    <lightning-datatable
        data = {dataProject}
        columns = {columns}
        key-field = "id"
        hide-checkbox-column="true">
    </lightning-datatable>
</template>

projectTeamMember.js

import { LightningElement,track,wire,api } from 'lwc';
import getProjectMembers from '@salesforce/apex/ProjectTeamMembers.getProjectMembers';

// datatable columns with row actions. Set sortable = true
const columns = [ { label: 'Team Member', fieldName: 'Team Member', sortable: "true"},
                  { label: 'Team Role', fieldName: 'Team Role', sortable: "true"},
                  { label: 'Start Date', fieldName: 'Start_Date__c', sortable: "true"},
                  { label: 'End Date', fieldName: 'End_Date__c', sortable: "true" },];

export default class ProjectTeamMembers extends LightningElement {

    @track dataProject;
    @track error;
    @track columns = columns;
    @api recordId;
    @wire(getProjectMembers, {recordId: '$recordId'})
    wiredProjectMembers(result) {
        if (result.data) {
            this.dataProject = result.data.map((elem) => ({
                ...elem,
                ...{
                    'Team Member': elem.Employee__r.Name,
                    'Team Role': elem.Project_Role__c,
                    'Start Date': elem.Start_Date__c,
                    'End Date': elem.End_Date__c,

                }
        }));
            this.data = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
}

ProjectTeamMembers.cs

public with sharing class ProjectTeamMembers {
    public ProjectTeamMembers() {

    }

    @AuraEnabled (cacheable = true)
    public static List<Project_Member__c> getProjectMembers(String recordId){
        try {
            
            List<Project_Member__c> pm = [SELECT Employee__r.Name, Project_Role__c, Start_Date__c, End_Date__c FROM Project_Member__c WHERE Project__c =:recordId];
            return pm;

        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

So the goal is to somehow display an image next to the 'Team Member' for each user based on their profile pictures. If anyone has solutions or resources on it please let me know.

1 Answer 1

0

You can create your own Custom Data type for cells of LWC data table, refer this documentation;

The lightning-datatable component formats data based on the type you specify for the column.

Before you create your own data type, check the standard data types to see if one meets your requirements.

Here is the screenshot of table from documentation:

enter image description here

You must log in to answer this question.

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