Lightning DataTable: composant Aura
LightningDataTableController (Contrôleur Apex)
public class LightningDataTableController{
@AuraEnabled
public static List<Contact> fetchAccountContacts(String accountId) {
List<Contact> lstContact=new List<Contact>();
lstContact=[select id ,Name,Email,Phone from contact where accountid=:accountId];
return lstContact;
}
}
LightningDataTable.cmp (composant)
<aura:component controller="LightningDataTableController"
implements="force:hasRecordId,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List" default="[{label: 'Name', fieldName: 'LinkName', type: 'url', typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
{label: 'Email', fieldName: 'Email', type: 'text'},
{label: 'Phone', fieldName: 'Phone', type: 'text'}]"/>
<aura:attribute name="recordId" type="String" default="" />
<!-- the container element determine the height of the datatable -->
<lightning:card aura:id="lightCard" class="slds-card_boundary" title="{!'Contacts ('+v.data.length+')'}" iconName="standard:contact">
<div style="overflow-x: auto;">
<lightning:datatable style="height: 90% !important;display: block;"
aura:id="contacts"
columns="{!v.columns}"
data="{!v.data}"
keyField="id"
/>
</div>
</lightning:card>
</aura:component>
LightningDataTableController.js (contrôleur JS)
({
doInit : function(component, event){
var contactAction = component.get("c.fetchAccountContacts");
contactAction.setParams({
accountId : component.get("v.recordId")
});
contactAction.setCallback(this,function(response){
var state = response.getState();
if (state === "SUCCESS" && response.getReturnValue() != '') {
var records =response.getReturnValue();
records.forEach(function(record){
record.LinkName = '/'+record.Id;
});
component.set('v.data',response.getReturnValue());
}else if(state === "ERROR"){
console.log('A problem occurred: ' + JSON.stringify(response.error));
}
});
$A.enqueueAction(contactAction);
}
})
Lightning DataTable: Composant Web Lightning
LightningDataTableController (Contrôleur Apex)
public class LightningDataTableController{
@AuraEnabled(cacheable=true)
public static List<Contact> fetchAccountContacts(String contactId) {
List<Contact> lstContact=new List<Contact>();
lstContact=[select id ,Name,Email,Phone from contact where accountid=:contactId];
return lstContact;
}
}
LightningDataTable.html (Modèle)
<template>
<div class="hr">
</div>
<lightning-card icon-name="standard:record" title="{strTitle}">
<div class="slds-m-around_medium">
<template if:true="{contacts}">
<lightning-datatable columns="{columns}" data="{contacts}" hide-checkbox-column="true" key-field="Id">
</lightning-datatable>
</template>
</div>
</lightning-card>
<div class="hr">
</div>
</template>
LightningDataTable.Js (contrôleur JS)
import { LightningElement, api, wire,track } from 'lwc';
import fetchRecords from '@salesforce/apex/LightningDataTableController.fetchAccountContacts';
const columns = [
{
label: 'Name',
fieldName: 'RecordUrl',
type: 'url',
typeAttributes: {
label: { fieldName: 'Name' },
target: '_self'
}
},
{
label: 'Email',
fieldName: 'Email'
},
{
label: 'Phone',
fieldName: 'Phone'
}
];
export default class LightningDataTable extends LightningElement {
@api recordId;
@api strTitle;
@track columns;
@track contacts;
constructor() {
super();
this.strTitle='Account Contacts';
this.columns = columns;
this.contacts = [];
}
// retrieving the data using wire service
@wire(fetchRecords, {contactId:'$recordId' })
records(result) {
if (result.data) {
this.contacts = [];
result.data.forEach(item => {
let contact = {};
contact = {
RecordUrl:'/lightning/r/Contact/' + item.Id + '/view',
Id:item.Id,
Email:item.Email,
Name:item.Name
Phone:item.Phone
};
this.contacts.push(contact);
});
}
}
}
LightningDataTable.js-meta.xml (XML pour le fichier de configuration dans Salesforce)
<lightningcomponentbundle fqn="LightningDataTable" xmlns="http://soap.sforce.com/2006/04/metadata">
<apiversion>45.0</apiversion>
<isexposed>true</isexposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</lightningcomponentbundle>
LightningDataTable.css (CSS)
.hr {
border: 0;
clear:both;
display:block;
width: 99%;
background-color:#CCC;
height: 1px;
margin-top:10px;
margin-bottom: 10px;
}
Remarque: Une fois le code entier enregistré, vous allez le déposer dans la page Lightning Record Detail du compte.