1

I am working on converting VF component to LWC. I use lightning out to display LWC on VF page. The data I get is the Id of lookup fields (account and user). I want to display it as it is displayed in VF component. The VF component shows name and also shows details on mouse hover. Can this be done for LWC datatable?

VF and it's corresponding LWC

components

Pop Up on Mouse Hover

popup

Data received by VF component and LWC

data

HTML

<template>
    <lightning-card title="Visit Report" icon-name="standard:catalog">
        <div class="slds-table_bordered slds-table_striped slds-scrollable slds-m-around_medium">
            <lightning-datatable data={data} columns={columns} key-field="id"  
                hide-checkbox-column="true" 
                onrowaction={handleRowActions}></lightning-datatable>
        </div>
    </lightning-card>
</template>

Javascript

const columns = [
    {
        label: 'Action',
        initialWidth: 50,
        type: 'button',
        typeAttributes: {
            label: 'View',
            name: 'view',
            variant: 'base',
        }
    },
    { label: 'Engagement Report', fieldName: 'Name', type:'text' }, 
    {
        label: 'Account',
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'Account__c'},
            name: 'account',
            variant: 'base',
        }
    },
    { label: 'Visit/Report Date', fieldName: 'Visit_Date__c', type: 'date',
        typeAttributes: {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        },
    }, 
    { label: 'Format Type', fieldName: 'Visit_Type__c', type: 'text' }, 
    { label: 'Temperature Reading', fieldName: 'Temperature_Reading__c', type: 'text' }, 
    { label: 'Send Copy to Editorial Team', fieldName: 'Send_copy_to_Editorial_team__c', type: 'text' }, 
    {
        label: 'Created By ID',
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'CreatedById'},
            name: 'createdBy',
            variant: 'base',
        }
    },
    {
        label: 'Last Modified By ID',
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'LastModifiedById'},
            name: 'modifiedBy',
            variant: 'base',
        }
    }, 
];

export default class RelatedVisitReport extends NavigationMixin(LightningElement) {
    @api recordId;
    @track data;
    @track error;
    @track columns = columns;

    @wire(visitReport, { contactId: '$recordId' }) wired(result) {
        if (result.data) {
            this.data = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
    //code to handle row actions of datatable
}
4
  • You have to create a custom component - Similar question was asked before salesforce.stackexchange.com/questions/257221/… – Amit Dec 19 '19 at 13:42
  • @Amit Thanks! Can you help me with LWC datatable displaying ID instead of Name as displayed in VF datatable? – SFdev Dec 19 '19 at 13:46
  • Are you want to display name instead of Id in lwc? – Amit Dec 19 '19 at 13:49
  • @Amit Yes I want to display Name instead of ID in my LWC – SFdev Dec 19 '19 at 14:07
1

For showing popup use custom component - LWC: How do I display "out of box" object hover?

For showing hyperlink use typeAttribute in lightning-datatable. Use following updated code snippet.

const columns = [
    {
        label: 'Action',
        initialWidth: 50,
        type: 'button',
        typeAttributes: {
            label: 'View',
            name: 'view',
            variant: 'base',
        }
    },
    { label: 'Engagement Report', fieldName: 'Name', type:'text' }, 
    //For Hyperlink
    {
        label: 'Account',
        fieldName: 'AccountLink',
        type: 'url',
        typeAttributes:
        {
            label: {
                fieldName: 'AccountName'
            }
        }
    },
    //End For Hyperlink
    { label: 'Visit/Report Date', fieldName: 'Visit_Date__c', type: 'date',
        typeAttributes: {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        },
    }, 
    { label: 'Format Type', fieldName: 'Visit_Type__c', type: 'text' }, 
    { label: 'Temperature Reading', fieldName: 'Temperature_Reading__c', type: 'text' }, 
    { label: 'Send Copy to Editorial Team', fieldName: 'Send_copy_to_Editorial_team__c', type: 'text' }, 
    {
        label: 'Created By ID',
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'CreatedById'},
            name: 'createdBy',
            variant: 'base',
        }
    },
    {
        label: 'Last Modified By ID',
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'LastModifiedById'},
            name: 'modifiedBy',
            variant: 'base',
        }
    }, 
];

export default class RelatedVisitReport extends NavigationMixin(LightningElement) {
    @api recordId;
    @track data;
    @track error;
    @track columns = columns;

    @wire(visitReport, { contactId: '$recordId' }) wired(result) {
        //Clone returned Array
        let  newArray = result.data.map(a => Object.assign({}, a));
        if (result.data) {
            let  newArray = result.data.map(a => Object.assign({}, a));
                for(let i=0; i< newArray.length; i++) {
                    newArray[i].AccountLink = "/"+newArray[i].Account__c;
                    newArray[i].AccountName = "/"+newArray[i].Account__r.Name; // Query Account__r.Name field
            }
            this.data = newArray;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
    //code to handle row actions of datatable
}
1
  • Can I trigger onRowAction using column type url for lightning datatable? – SFdev Jan 2 '20 at 12:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.