function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sunny sengar 17sunny sengar 17 

Lighting Component DataTable Columns not display the vlaue

I have a component that is going to be using a <lightning:datatable /> object I am attempting to set the actions with:
 fetchAccHelper : function(component, event, helper) {
        var actions =[{ label : 'Show Details', name : 'show_details', iconName : 'action:preview'}];
        
        component.set('v.mycolumns', [
            //    {label: 'CaseNumber', fieldName: 'CaseNumber', type: 'Auto Number'},
            
            {label: 'Case Number', fieldName: 'Case_NumberF__c', type: 'url',sortable: true,filterable: true,typeAttributes: {label: { fieldName: 'Case_NumberF__c'},target: '_blank'}},              
            {label: 'Subject', fieldName: 'Subject', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'Picklist'},
            {label: 'Created By', fieldName: 'CreatedBy.Name', type: 'Text'},
            {label: 'Last Activity', fieldName: 'LastModifiedBy.Name', type: 'Lookup'},
            {type:"action", typeAttributes:{ rowActions : actions }}
        ]);
        var action = component.get("c.fetchCase");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.show_details = '/'+record.Id;
                });
                component.set("v.CaseList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    

When I  console.log('@@@@@@@@',response.getReturnValue()); from my call back function I do see that I am getting the apropreate and expected resluts from my controller, however my lighting datatabel is displaying Case Number, Subject, Status Fields, but CreatedBy and LastModifiedBy fields value does not showing. 

Any help would be much apreciated!Thanks

User-added image


 
Best Answer chosen by sunny sengar 17
ANUTEJANUTEJ (Salesforce Developers) 
So I checked and I found an example on using createdby.name and below is the link: https://www.infallibletechie.com/2020/06/how-to-display-parent-field-value-in.html

As mentioned can you try checking if  { label: 'Created By', fieldName: 'CreatedBy', type: 'text' }, this works?

As present in the below code can you try if you modify your if(state=="success") part to fit the below snippet as I think they are setting the value again after getting the records: 
  
if ( state === "SUCCESS" ) {
               
                var rows = response.getReturnValue();
               
                for ( var i = 0; i < rows.length; i++ ) {
                   
                    var row = rows[i];
                   
                    if ( row.Account ) {
                        row.AccountName = row.Account.Name;
                    }
                   
                    if ( row.CreatedBy ) {
                        row.CreatedBy = row.CreatedBy.Name;
                    }
                   
                }
Below is the whole snippet for quick reference: 
<aura:component implements="force:appHostable"
                controller="ContactController">
               
    <aura:attribute type="Contact[]" name="contactList"/>
    <aura:attribute name="mycolumns" type="List"/>
   
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
   
    <lightning:datatable data="{! v.contactList }"
                         columns="{! v.mycolumns }"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         onrowaction="{!c.handleRowAction}"/>
   

</aura:component>

JavaScript Controller:

({
   
    init: function ( cmp, event, helper ) {
       
        var actions = [
            { label: 'Edit', name: 'edit' },
            { label: 'View', name: 'view' } ];


        cmp.set( 'v.mycolumns', [
            { label: 'Name', fieldName: 'Name', type: 'text' },
            { label: 'Account Name', fieldName: 'AccountName', type: 'text' },
            { label: 'Created By', fieldName: 'CreatedBy', type: 'text' },
            { type: 'action', typeAttributes: { rowActions: actions } } ] );

        var action = cmp.get( "c.fetchContacts" );
        /*action.setParams({
        });*/
        action.setCallback(this, function( response ) {
           
            var state = response.getState();
           
            if ( state === "SUCCESS" ) {
               
                var rows = response.getReturnValue();
               
                for ( var i = 0; i < rows.length; i++ ) {
                   
                    var row = rows[i];
                   
                    if ( row.Account ) {
                        row.AccountName = row.Account.Name;
                    }
                   
                    if ( row.CreatedBy ) {
                        row.CreatedBy = row.CreatedBy.Name;
                    }
                   
                }
               
                cmp.set( "v.contactList", rows );
                console.log( 'Contacts are ' + cmp.get( "v.contactList" ) );
               
            }
           
        });
        $A.enqueueAction( action );
       
    },

    handleRowAction: function ( cmp, event, helper ) {
       
        var action = event.getParam( 'action' );
        var row = event.getParam( 'row' );
        var recId = row.Id;

        switch ( action.name ) {
            case 'edit':
                var editRecordEvent = $A.get("e.force:editRecord");
                editRecordEvent.setParams({
                    "recordId": recId
                });
                editRecordEvent.fire();
                break;
            case 'view':
                var viewRecordEvent = $A.get("e.force:navigateToURL");
                viewRecordEvent.setParams({
                    "url": "/" + recId
                });
                viewRecordEvent.fire();
                break;
        }
    }
   
})

Apex Class:

public class ContactController {
   
    @AuraEnabled
    public static List < Contact > fetchContacts() {
        return [ SELECT Id, Name, Account.Name, CreatedBy.Name FROM Contact LIMIT 10 ];
    }

}

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Sunny,

Can you check if you are passing the correct soql results that have the necessary details if so I would suggest you to check the lightning:datatable tag.

For reference, I am placing the tag below so that you can try checking it:
  
<lightning:datatable
                keyField="id"
                data="{! v.data }"
                columns="{! v.columns }"
                hideCheckboxColumn="true"/>

reference: https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
ravi soniravi soni
hy sunny,
did you add createdBy.Name,lastModifiedBy.Name these fields in your query. if you didn't add then add and check again.
For Example : SELECT Id, Status,createdBy.Name,lastModifiedBy.Name  FROM Case limit 5
let me know if it helps you and marking it as best.
Thank You
sunny sengar 17sunny sengar 17
Thanks @ANUTEJ

But i Checked Lightning datatable tag is correct, When i pass 'filedName: CreatedById' instead of 'filedName: CreatedBy.Name' Then Received the response in datatable. 

User-added image


User-added image
sunny sengar 17sunny sengar 17
Thanks @Veer, 

 I have add createdBy.Name,lastModifiedBy.Name in Soql query, But  In datatable CreatedBy field i received ID. But i need Profile Name.
 
ANUTEJANUTEJ (Salesforce Developers) 
So I checked and I found an example on using createdby.name and below is the link: https://www.infallibletechie.com/2020/06/how-to-display-parent-field-value-in.html

As mentioned can you try checking if  { label: 'Created By', fieldName: 'CreatedBy', type: 'text' }, this works?

As present in the below code can you try if you modify your if(state=="success") part to fit the below snippet as I think they are setting the value again after getting the records: 
  
if ( state === "SUCCESS" ) {
               
                var rows = response.getReturnValue();
               
                for ( var i = 0; i < rows.length; i++ ) {
                   
                    var row = rows[i];
                   
                    if ( row.Account ) {
                        row.AccountName = row.Account.Name;
                    }
                   
                    if ( row.CreatedBy ) {
                        row.CreatedBy = row.CreatedBy.Name;
                    }
                   
                }
Below is the whole snippet for quick reference: 
<aura:component implements="force:appHostable"
                controller="ContactController">
               
    <aura:attribute type="Contact[]" name="contactList"/>
    <aura:attribute name="mycolumns" type="List"/>
   
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
   
    <lightning:datatable data="{! v.contactList }"
                         columns="{! v.mycolumns }"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         onrowaction="{!c.handleRowAction}"/>
   

</aura:component>

JavaScript Controller:

({
   
    init: function ( cmp, event, helper ) {
       
        var actions = [
            { label: 'Edit', name: 'edit' },
            { label: 'View', name: 'view' } ];


        cmp.set( 'v.mycolumns', [
            { label: 'Name', fieldName: 'Name', type: 'text' },
            { label: 'Account Name', fieldName: 'AccountName', type: 'text' },
            { label: 'Created By', fieldName: 'CreatedBy', type: 'text' },
            { type: 'action', typeAttributes: { rowActions: actions } } ] );

        var action = cmp.get( "c.fetchContacts" );
        /*action.setParams({
        });*/
        action.setCallback(this, function( response ) {
           
            var state = response.getState();
           
            if ( state === "SUCCESS" ) {
               
                var rows = response.getReturnValue();
               
                for ( var i = 0; i < rows.length; i++ ) {
                   
                    var row = rows[i];
                   
                    if ( row.Account ) {
                        row.AccountName = row.Account.Name;
                    }
                   
                    if ( row.CreatedBy ) {
                        row.CreatedBy = row.CreatedBy.Name;
                    }
                   
                }
               
                cmp.set( "v.contactList", rows );
                console.log( 'Contacts are ' + cmp.get( "v.contactList" ) );
               
            }
           
        });
        $A.enqueueAction( action );
       
    },

    handleRowAction: function ( cmp, event, helper ) {
       
        var action = event.getParam( 'action' );
        var row = event.getParam( 'row' );
        var recId = row.Id;

        switch ( action.name ) {
            case 'edit':
                var editRecordEvent = $A.get("e.force:editRecord");
                editRecordEvent.setParams({
                    "recordId": recId
                });
                editRecordEvent.fire();
                break;
            case 'view':
                var viewRecordEvent = $A.get("e.force:navigateToURL");
                viewRecordEvent.setParams({
                    "url": "/" + recId
                });
                viewRecordEvent.fire();
                break;
        }
    }
   
})

Apex Class:

public class ContactController {
   
    @AuraEnabled
    public static List < Contact > fetchContacts() {
        return [ SELECT Id, Name, Account.Name, CreatedBy.Name FROM Contact LIMIT 10 ];
    }

}

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
This was selected as the best answer
ANUTEJANUTEJ (Salesforce Developers) 
I tried the same and I was able to get the created by name and last modified by name in the datatable, I think you need to make the below changes and try 
  
{label: 'Created By', fieldName: 'CreatedBy.Name', type: 'Text'},
            {label: 'Last Activity', fieldName: 'LastModifiedBy.Name', type: 'Lookup'},

to 

{ label: 'Created By', fieldName: 'CreatedBy', type: 'text' },
{ label: 'Last Modified By', fieldName: 'LastModifiedBy', type: 'text' },
     
and 
       
if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.show_details = '/'+record.Id;
                }

to 


            if ( state === "SUCCESS" ) {
               
                var records = response.getReturnValue();
               
                for ( var i = 0; i < records .length; i++ ) {
                   
                    var record= records [i];
                   
                    
                    if ( record.LastModifiedBy ) {
                        record.LastModifiedBy = record.LastModifiedBy.Name;
                    }
                   
                    if ( record.CreatedBy ) {
                        record.CreatedBy = record.CreatedBy.Name;
                    }
                   
                }
               
                cmp.set( "v.CaseList", records);
                console.log( 'Cases are ' + cmp.get( "v.records" ) );

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.