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
Manish DeshmukhManish Deshmukh 

How Build a Lightning page to display Account / Contact records.

Khan AnasKhan Anas (Salesforce Developers) 
Hi Manish,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex: 
public class ContactDisplayC {
    
    @AuraEnabled
    
    public static List<Contact> show(){
        List<contact> contacts=[SELECT Id, FirstName, LastName, Phone FROM Contact LIMIT 20];
        return contacts;        
    }
}

Component: 
<aura:component controller="ContactDisplayC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:datatable keyField="id" 
                         data="{!v.data}" 
                         columns="{!v.columns}"/>
</aura:component>

Controller: 
({
    doInit : function(component, event, helper) {
        component.set('v.columns',[
            
            {label: 'First Name', fieldName: 'FirstName', type: 'text'},
            {label: 'Last Name', fieldName: 'LastName', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'}
            
        ]);
        var action=component.get("c.show");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS'){
                
                var result=response.getReturnValue();
                component.set("v.data",result);
            }
        });
        $A.enqueueAction(action);
    },
})

Application: 
<aura:application extends="force:slds">
    <c:ContactDisplay/>
</aura:application>

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
Manish DeshmukhManish Deshmukh
Hi Khan
In your code you can show only contacts record but i want to show Account with contacts record.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Manish,

Please try below code:

Apex: 
public class RadioAccRelatedConC {
    
    @AuraEnabled
    public static List<Account> getAccounts() {
        List<Account> accList=new List<Account>();
        accList=[SELECT Id, Name, Phone FROM Account LIMIT 20];
        return accList;
    }
    
    @AuraEnabled
    public static List<Contact> getCon(List<String> accId) {
        return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:accId];
    }
}

Component: 
<aura:component controller="RadioAccRelatedConC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="data1" type="Object"/>
    <aura:attribute name="columns1" type="List"/>
    <aura:attribute name="selectedRowsCount" type="Integer" default="0"/>
    <aura:attribute name="maxRowSelection" type="Integer" default="5"/>
    <aura:attribute name="isButtonDisabled" type="Boolean" default="true" access="PRIVATE"/>
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="id"
                             maxRowSelection="{! v.maxRowSelection }"
                             onrowselection="{! c.updateSelectedText }"/>
    </div>
    
    <br/><br/>
    
    <div style="height: 300px">
        <lightning:datatable
                             columns="{! v.columns1 }"
                             data="{! v.data1 }"
                             keyField="id"
                             hideCheckboxColumn="true"/>
    </div>
</aura:component>

Controller: 
({
    init: function (component, event, helper) {
        component.set('v.columns', [
            {label: 'Account Name', fieldName: 'Name', editable: true, type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}
        ]);
        
        component.set('v.columns1', [
            {label: 'Contact Name', fieldName: 'Name', editable: true, type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}
        ]);
        
        var action=component.get('c.getAccounts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                component.set("v.data", rows);
            }
        });
        $A.enqueueAction(action);    
        
        component.set('v.maxRowSelection', 1);
        component.set('v.isButtonDisabled', true);
    },
    
    updateSelectedText: function (cmp, event) {
        
        var selectedRows = event.getParam('selectedRows');
        var aId = [];
        for (var i = 0; i < selectedRows.length; i++){
            aId.push(selectedRows[i].Id);
        }
        
        var action=cmp.get('c.getCon');
        action.setParams({accId : aId});
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows1 = response.getReturnValue();
                console.log('rows1 ->> ' + rows1);
                cmp.set("v.data1", rows1);
            }
        });
        $A.enqueueAction(action);    
    },
})

Application: 
<aura:application extends="force:slds">
    <c:RadioAccRelatedCon/>
</aura:application>

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
Deepali KulshresthaDeepali Kulshrestha
Hi Manish,


Greetings to you!

I have gone through your query please try below code:

Show_All_Accounts Lightning component
---------------------------------------------
<aura:component controller="Show_All_Accounts_Controller">
    
    <aura:attribute name="acclist" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.allAccount}"/>
      
    <table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
        <thead>
           <tr class="slds-line-height_reset">
                             
                <th class="" scope="col">
                    <div class="slds-truncate" title="Account Id">ACCOUNT ID</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Account Name">ACCOUNT NAME</div>
                </th>               
            </tr>
        </thead>
        <tbody>          
            <aura:iteration items="{!v.acclist}" var="acc">
                <tr>
                    
                    <td>
                        {!acc.Id}
                    </td>
                    <td>
                        {!acc.Name}
                    </td>
                </tr>
            </aura:iteration>                
        </tbody>
    </table>
</aura:component>
----------------------------------------------
Javascript controller 
----------------------------------------------
({
    allAccount : function(component, event, helper) {
        var action = component.get("c.getAllAccounts");
        
        action.setCallback(this,function(a)
                           {
                               component.set("v.acclist",a.getReturnValue()) ; 
                           });
        
        $A.enqueueAction(action);
    }  
})

----------------------------------------------
Apex controller 
----------------------------------------------
public class Show_All_Accounts_Controller {

    @AuraEnabled
    public static List<Account> getAllAccounts()
    {
        List<account> acc_list =[select Id,Name from account limit 100];
        return acc_list; 
    }    
}

-------------------------
Lightning application
-------------------------
<aura:application extends="force:slds">
    <c:Show_All_Accounts />
</aura:application>

    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com