Dans ce guide je vais créer un composant Lightning avec un affichage sous forme de liste de détail lié à un contact. Les données alimentant la liste sont issues d’un service externe via une API REST.
Création du composant Lightning
La plupart des opérations vont se dérouler dans la Developer Console. Pour l’ouvrir il faut cliquer sur l’engrenage en haut à droite. Pour avoir accès à toute les possibilités du développement (accès webservice) il est indispensable d’effectuer le développement et les test dans une organisation sandbox. Salesforce n’autorise pas de développer directement sur l’organisation de production.
Petite aparté, pour pouvoir passer son code de la sandbox à la production, il faut impérativement disposer d’une couverture de code suffisante pour les classes APEX qui seront développées.
Dans la Developer Console, choisr le menu File->New-> Lightning Component :
Il faut saisir les informations souhaitées pour le nom du composant et les options souhaitées pour l’intégration du composant dans les éléments lightning. Une fois la création lancé, la Developer Console va changer l’affichage et proposer la liste des éléments indispensables et optionnels.
Création du Composant
Le premier élément, la partie component contiendra la présentation du composant sous un format HTML. Dans mon exemple il s’agit d’afficher la liste des mails envoyés depuis sendinblue. Je me suis basé sur l’aide de salesforce présentant le composant Datatable : https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example
Voici l’exemple de mon code :
Il faut noter dans la définition du composant aura, la partie controller. Cet élément défini pour la partie client le controller qui sera appelé en backend. Je vais donc avoir une classe SendinblueDataTableController qui retournerra une Liste de SendinblueAPIEvent (objet à définir également). Et recordIdContact contiendra l’ID du contact salesforce qui sera le paramètre passé à mon controller.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId"
access="global"
controller="SendinblueDataTableController" >
<aura:attribute name="data" type="SendinblueAPIEvent[]"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="recordIdContact" type="String" default="{!v.recordId}"/>
<!-- handlers-->
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<!-- the container element determine the height of the datatable -->
<div style="height: 300 px">
<lightning:datatable
keyField="id"
data="{! v.data }"
columns="{! v.columns }"
hideCheckboxColumn="true"/>
</div>
</aura:component>
Ajout du Controller
Le controller contient le code logique qui sera exécuté côté client pour alimenter les données de la liste. Dans mon cas il s’agit uniquement de faire un appel à une API lors du chargement du composant. Le code ici est en javascript, il est possible comme je l’ai fait de mettre des éléments de débogage en utilisant le console.log qui affichera les messages dans la fenêtre console du navigateur.
({
init : function(component, event, helper) {
component.set('v.columns', [
{label: 'Sujet', fieldName: 'subject', type: 'text'},
{label: 'Date envoi', fieldName: 'date_Z', type: 'date'},
{label: 'Email', fieldName: 'email', type: 'text'}
]);
console.log("APPEL getEmailFromlAccount");
var action = component.get("c.getEmailFromAccount");
action.setParams({
contactId: component.get('v.recordIdContact')
});
action.setCallback(this, function(response) {
var state = response.getState();
var data = response.getReturnValue();
if(response.getState() == "SUCCESS"){
component.set('v.data', data);
}
});
$A.enqueueAction(action);
}
})
Dans les autres éléments constitutifs d’un composant, on peut créer un helper. Il permet de mettre à disposition des fonctions de formatage, ou de comportement sur les données du composants (tri par exemple.) Dans mon cas je n’en n’ai pas eu besoin.
Des élements de style, d’image et de documentation peuvent être ajouté.
Création de la classe controller APEX
A partir de là, le développement est orienté sur la partie serveur (backend). Le langage utilisé par Salesforce est APEX, qui est très proche du Java. Dans la Developer Console, choisir File -> New -> Apex Class.
public class SendinblueDataTableController {
@AuraEnabled
public static List<SendinblueAPIEvent> getEmailFromAccount(String contactId){
String email = '';
List<Contact> contacts = [select email from Contact where Id = :contactId];
if (contacts != null){
for(Contact c : contacts){
email = c.email;
}
} else {
email = 'test@scandevelopers.com';
}
List<SendinblueAPIEvent> sobj = new List<SendinblueAPIEvent>();
string strListEvent = SendinblueAPI.getListEmail(email);
SendinblueApexJson obj = SendinblueApexJson.parse(strListEvent);
if ((obj != null) && (obj.events != null)){
Integer i=0;
for (SendinblueApexJson.Events item : obj.events){
if (i< 5){
SendinblueAPIEvent apiEvent = new SendinblueAPIEvent();
apiEvent.email = item.email;
apiEvent.date_Z = item.date_Z;
apiEvent.subject = item.subject;
sobj.add(apiEvent);
}
i++;
}
}
return sobj;
}
}
La méthode qui sera accessible depuis le composant lightning doit être préfixé avec l’annotation @AuraEnabled. Dans l’exemple suivant, je vais chercher dans un premier temps à récupérer l’email du contact à partir de son ID passé en paramètre. Ensuite j’accède à l’API Sendinblue que j’ai encapsulé, et je ne récupère que les 5 premiers enregistrements.
0 Comments