If you are working on lightning components and searching for the steps to add a data grid for any object inside the lightning component, this is the right place!
In this article, I will show the detailed steps to add a contacts data grid in the lightning component.
1. Create a component in the name 'poc' and add below-mentioned code in the poc.cmp file
<aura:component implements="flexipage:availableForAllPageTypes" controller="poc">
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:datatable data="{! v.mydata }"
columns="{! v.mycolumns }"
keyField="Id"
hideCheckboxColumn="true"/>
</aura:component>
2. Add this code in 'poccontroller.js' - this is client-side controller
({
init: function (cmp, event, helper) {
cmp.set('v.mycolumns', [
{label: 'Contact Name', fieldName: 'Name', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'phone'},
{label: 'Email', fieldName: 'Email', type: 'email'}
]);
helper.getData(cmp);
}
})
3. Code in 'pochelper.js' - client side helper
({
getData : function(cmp) {
var action = cmp.get('c.getContacts');
action.setCallback(this, $A.getCallback(function (response) {
var state = response.getState();
if (state === "SUCCESS") {
cmp.set('v.mydata', response.getReturnValue());
} else if (state === "ERROR") {
var errors = response.getError();
console.error(errors);
}
}));
$A.enqueueAction(action);
}
})
4. Add new apex class with name 'poc' and add below-mentioned code
public with sharing class poc {
@AuraEnabled
public static List<Contact> getContacts() {
List<Contact> contacts =
[SELECT Id, Name, Phone, Email FROM Contact];
return contacts;
}
}
Add this component to the page layout through the app builder console and test the changes.
In case if you want to understand all the steps in detail, please go through the below-mentioned video.
In this article, I will show the detailed steps to add a contacts data grid in the lightning component.
1. Create a component in the name 'poc' and add below-mentioned code in the poc.cmp file
<aura:component implements="flexipage:availableForAllPageTypes" controller="poc">
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:datatable data="{! v.mydata }"
columns="{! v.mycolumns }"
keyField="Id"
hideCheckboxColumn="true"/>
</aura:component>
2. Add this code in 'poccontroller.js' - this is client-side controller
({
init: function (cmp, event, helper) {
cmp.set('v.mycolumns', [
{label: 'Contact Name', fieldName: 'Name', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'phone'},
{label: 'Email', fieldName: 'Email', type: 'email'}
]);
helper.getData(cmp);
}
})
3. Code in 'pochelper.js' - client side helper
({
getData : function(cmp) {
var action = cmp.get('c.getContacts');
action.setCallback(this, $A.getCallback(function (response) {
var state = response.getState();
if (state === "SUCCESS") {
cmp.set('v.mydata', response.getReturnValue());
} else if (state === "ERROR") {
var errors = response.getError();
console.error(errors);
}
}));
$A.enqueueAction(action);
}
})
4. Add new apex class with name 'poc' and add below-mentioned code
public with sharing class poc {
@AuraEnabled
public static List<Contact> getContacts() {
List<Contact> contacts =
[SELECT Id, Name, Phone, Email FROM Contact];
return contacts;
}
}
Add this component to the page layout through the app builder console and test the changes.
In case if you want to understand all the steps in detail, please go through the below-mentioned video.
Post
your comments/feedback/queries in the below comments section. Subscribe to my
Youtube channel and get updated with salesforce tutorials - click here
Twitter:
https://twitter.com/naveenkn55
Linkedin:
https://linkedin.com/in/naveenkn456
5 Comments
Hi, how can you make the Contact name as a link? so when you click on it, it will go to the contact record? is it possible?
ReplyDeleteI know it was a year ago but nice post mate. Ta
ReplyDeleteThank you.
Deletehi i have tried to run your code and i keep getting this error when trying to save it do you know why this is
ReplyDeleteFailed to save commissionTable.cmp: Invalid definition for null:commissionTableController: ApexService.getType() return null with currentNamespace: null, namespace: null, name: commissionTableController: Source
Thanks for using our services. I have retested the above code in my developer org. Which is working as expected. I feel that you may have an issue because of an existing class or code. Could you please try it in your developer edition with the new component and new apex class. If it works, you can add it to your existing class. I hope it resolves your issue. Please let me know in case if you still face the issue, we can figure out any other solution.
Delete