+ Start a Discussion
sumit suwalkasumit suwalka 

lightning component to show only specific accounts child record in data table

Hi All,
 i created a ligtning component in which i am showing records of custom object having lookup of account.
i want that it should show only those custom object records which are related to that particular account in which related list  i am using it.
how to do it?
Any suggestions?
My component and controller is given below:-
<aura:component controller="FBGFamilyController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
    
    <aura:attribute name="PageHeading" type="String" default="Remove  False positive On Click Of Check Box" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>

    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    <div class="slds-m-top--xx-large">
        <div class="slds-page-header">
            <div class="slds-align--absolute-center">
                <div class="slds-text-heading--large">       
                    {!v.PageHeading}
                </div>
            </div>
        </div>
    </div>
    
 

    
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade">
              <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Family Records</span>
          </h3>
        

        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id" 
                             onrowselection="{! c.removeRow }"
                           />
    </div>
</aura:component>
**********************************
controller is given below:-
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
           
            {label: 'Record Number', fieldName: 'Name', type: 'integer'},
            
            {label: 'Sister Account', fieldName: 's1', type: 'text'},
            {label: 'Sister Account', fieldName: 's2', type: 'text'}

        ]);
        
        var action = component.get('c.fetchRecords');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                 for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s1 = row.Sister_Company__r.Name;
                }
                 for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s2 = row.Sister_Company2__r.Name;
                }
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    removeRow : function(component, event, helper){
        var selRows = event.getParam('selectedRows');
        
        // Remove the record from the table
        var rows = component.get('v.mydata');
        for (var i = 0; i<selRows.length; i++){    
            var rowIndex = rows.indexOf(selRows[i]);
            console.log('rowIndex---->>> ' + rowIndex);
            var r=rows.splice(rowIndex, 1);   
            console.log('rrr---->>> ' + JSON.stringify(r));
            component.set('v.mydata', rows);
        }
    }
})
******************************************************
public class FBGFamilyController {
        @AuraEnabled
    public static List<FBG_Family__c> fetchRecords() {
        return [SELECT Id, Name, Sister_Company__r.Name, Sister_Company2__r.Name FROM FBG_Family__c];
    }
}
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sumit,

Greetings to you!

You can add the force:hasRecordId interface to a Lightning component to enable the component to be assigned the ID of the current record. The current record ID is useful if the component is used on a Lightning record page. When your component is invoked in a record context in Lightning Experience or the Salesforce app, the recordId is set to the ID of the record being viewed.

The component’s controller can access the ID of the current record from the recordId attribute, using component.get("v.recordId"). The recordId attribute is automatically added to the component by the force:hasRecordId interface.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement. 
I have used the Account and Contact object for this example, you can replace it with your custom object.

Apex:
public class RelatedContactListC {
    
    @AuraEnabled
    public static List<Contact> getCon(String rid){
        List<Contact> sr = [SELECT Name, Phone, Email, Account.Name FROM Contact WHERE AccountId=:rid];
        return sr;
    }
}

Component:
<aura:component controller="RelatedContactListC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="mydata" type="Contact"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:card title="Related Contacts">
        <div class="slds-p-left_large slds-p-right_medium">
            
            <lightning:datatable data="{! v.mydata }" 
                                 columns="{! v.mycolumns }" 
                                 keyField="Id" 
                                 hideCheckboxColumn="true"/>
        </div>
    </lightning:card>
</aura:component>

Controller:
({    
    doInit : function(component, event, helper) {        
        var recordId =  component.get("v.recordId");
        var action = component.get("c.getCon");
        action.setParams({rid : recordId});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.mycolumns', [
                    {label: 'Contact Name', fieldName: 'Name', type: 'text'},
                    {label: 'Phone', fieldName: 'Phone', type: 'phone'},
                    {label: 'Email', fieldName: 'Email', type: 'email'},
                    {label: 'Account Name', fieldName: 'AccountName', type: 'text'}
                ]);
                
                var rows = response.getReturnValue();
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row.Account) row.AccountName = row.Account.Name;
                }
                component.set("v.mydata", rows);
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                    errors[0].message);
                    }
                } 
                else {
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    }
})

Add this component to the Account record page using Lightning App Builder.

Please refer to the below links which might help you further with the above requirement.

I hope it helps you.

Kindly 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. It will help to keep this community clean.

Thanks and Regards,
Khan Anas​​​​​​​
sumit suwalkasumit suwalka
Hi Khan,
         i am trying to make the lookup field a hyper link which show the Account clicking on it.
my code is given below:-
 {label: 'Record Number ', fieldName: 'linkName', type: 'url', 
             typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {label: 'Sister Account ', fieldName: 's1', type: 'url', 
             typeAttributes: {label: { fieldName: 'Sister_Company__c' },value:{fieldName: 'Sister_Company__c.Id'}, target: '_blank'}},
            {label: 'Sister Account ', fieldName: 's2', type: 'url', 
             typeAttributes: {label: { fieldName: ' Sister_Company2__c' },value:{fieldName: 's2'}, target: '_blank'}}
*************
 if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
               
                  allValues.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
               allValues.forEach(function(record){
                    record.s1 = '/'+record.Sister_Company__r.Name;
                }); 
                 allValues.forEach(function(record){
                    record.s2 = '/'+record.Sister_Company2__r.Name;
                }); 
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);             
                here the name is working as hyper link but on lookup i am getting ids as hyperlink not their name.
                i want lookup field (Sister_Company__c's name as hyper link.
                how to do it?
                Any suggestions?