Le Toulouse-Salesforce-Developer-Group vous met à disposition les slides du meetup du 22 mars sur le développement de composent Lightning,

1. Toulouse-Salesforce-
Developer-Group
Bienvenue
Lightning Component

2. Forward-Looking Statement
Statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks,
uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could
differ materially from the results expressed or implied by the forward looking statements we make. All statements other than statements of historical fact could
be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any
statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded
services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service,
new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions
or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and
acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and
manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and
utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is
included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These
documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Website.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently
available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions
based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update
these forward-looking statements.

3. Sommaire
• Les outils
• Cas métier
• Le composant lightning
• Le bouton

4. Les outils

5. Les outils
• Console du développeur
• Eclipse
– https://www.eclipse.org/downloads/
• Sublime Text
– https://www.sublimetext.com/
• Visual Studio Code
– https://code.visualstudio.com/
*Chacun des outils nécessite un plug-in additionnel

6. Cas métier

7. Cas métier
• Dans ma société, j’ai besoin que les utilisateurs
puissent désactiver un contact rapidement.
• Attention, cette désactivation n’est possible que si je
dispose d’au moins un contact actif sur le compte.

8. Cas métier
Compte
Contact
Un compte peut avoir de 1 à plusieurs contacts.
Je dois avoir au moins 1 contact actif sur le compte.

9. Le contrôleur

10. ContactDesactivateCtrl.cls
 Le contrôleur APEX contiendra 3 fonctions.
 getContact
 me retourne l’enregistrement de contact sur lequel mon bouton se
trouve
 getHasContact
 me retourne le nombre de contacts actifs sur le
compte
 saveContact
 enregistre les modifications sur le contact

11. ContactDesactivateCtrl.cls
public class PXS_ContactDesactivateCtrl {
@AuraEnabled
public static Contact getContact(String contactId){
return [select Id,
Name,
Actif__c,
RecordTypeId,
OwnerId,
AccountId
from Contact
where Id =:contactId
limit 1];
}
}
A RETENIR :
- l’attribut « @AuraEnabled » est obligatoire
pour un appel depuis un composant lightning
- La méthode doit être « static »

12. ContactDesactivateCtrl.cls
@AuraEnabled
public static Integer getHasContact(String contactId){
Contact Cnt = [Select Id, AccountId from Contact where Id=:contactId];
list<Contact> ExistingContacts = [select Id,
Name
from Contact
where AccountId =: Cnt.AccountId
and Actif__c=:true
return (ExistingContacts.size());
}

13. ContactDesactivateCtrl.cls
@AuraEnabled
public static Contact saveContact(String jsonContact){
Contact cnt = (Contact) JSON.deserialize(jsonContact, Contact.class);
cnt.Actif__c = false;
cnt.OwnerId = userInfo.getUserId();
database.update(cnt);
return cnt;
}

14. Le composant

15. Le composant
Le composant devra :
 Disposer d’un bouton retour
 Disposer d’un bouton sauvegarder
 Nous fournir un message différent en cas de succès
ou d’erreur lors de l’enregistrement

16. Le composant
Le composant est découpé en sous composants
- Le fichier cmp
- Il contient le balisage (HTML)
- Le fichier controller
- Fichier JS : les fonctions de base utilisées dans notre composant
- Le fichier helper
- Fichier JS : les fonctions avancées utilisées dans le contrôleur
- Le fichier css
- Il contient les css utilisées dans le composant

17. Le composant :
La partie front du composant

18. ContactDesactivate.cmp
<aura:component controller="ContactDesactivateCtrl" implements="force:LightningQuickActionWithoutHeader,force:hasRecordId">
<aura:attribute name="Contact" type="Contact" default="{'sobjectType':'Contact'}" />
<aura:attribute name="hasContact" type="Integer" default="1" />
<aura:attribute name="recordId" type="String" />
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:if istrue="{!v.hasContact == 1}">
{!$Label.c.ContactDesactivate_Block}
<ui:button label="{!$Label.c.BtnBack}" press="{!c.BtnBack}"/>
<aura:set attribute="else">
{!$Label.c.ContactDesactivate_Confirm}<br/>
<ui:button label="{!$Label.c.BtnBack}" press="{!c.BtnBack}"/>
<ui:button class="slds-button slds-button_brand" label="{!$Label.c.BtnSubmit}" press="{!c.BtnSubmit}" />
</aura:set>
</aura:if>
</aura:component>
A RETENIR:
Attention au « V » & au « C »
 "{!v.hasContact}" fait appel à une variable du composant
 "{!c.BtnBack} " fait appel à une fonction javascript

19. Le composant :
Le contrôleur javascript

20. Fonction type (Javascript)
NomDeLaFonction : function(component, event, helper) {
//Récuperation de la méthode APEX
var action = component.get("c.saveContact");
//Affectation des paramètres
action.setParams({
"jsonContact":JSON.stringify(component.get("v.Contact"))
});
// la fonction de call Back
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
}else if (state === "ERROR"){
btn.set("v.disabled",false);
var errors = response.getError();
}
});
// Execute la fonction
$A.enqueueAction(action);
},
A RETENIR
var action = component.get("c.saveContact");
=> Le « c » permet d’indiquer que je vais rechercher la fonction sur le contrôlleur
"jsonContact":JSON.stringify(component.get("v.Contact"))
=> « JSON.stringify » permet de convertir en « String » ma variable
action.setCallback(this, function(a) {…})
=> La fonction de « callback » correspond au retour lors de l’appel de la fonction APEX
$A.enqueueAction(action);
=> Permet de faire l’appel de la fonction précédemment initiée
Javascript est sensible à la casse : « A » est différent de « a »

21. ContactDesactivateController.js
({
doInit : function(component, event, helper) {
helper.retrieveContact(component);
helper.hHasContact(component);
},
BtnBack : function(component, event, helper) {
helper.backFunction();
},
BtnSubmit: function(component, event, helper) {
helper.btnSaveContact(component, event);
}
}
A RETENIR
helper.backFunction();
=> Fait appel à la fonction nommée « backFunction » se trouvant
dans le helper JS

22. Le composant :
Le helper

23. PXS_ContactDesactivateHelper.js
({
retrieveContact : function(component) {
var action = component.get("c.getContact");
action.setParams({
"contactId":component.get("v.recordId")
});
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
component.set("v.Contact", a.getReturnValue());
}else if (state === "ERROR"){
var errors = response.getError();
}
});
$A.enqueueAction(action);
},
A RETENIR
- Les noms de fonction du contrôleur JS,
du helper et du contrôleur APEX doivent
être différents.

24. PXS_ContactDesactivateHelper.js
hHasContact : function(component) {
var action = component.get("c.getHasContact");
action.setParams({
"contactId":component.get("v.recordId")
});
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
component.set("v.hasContact", a.getReturnValue());
//this.createComponent(component, a.getReturnValue());
}else if (state === "ERROR"){
var errors = response.getError();
}
});
$A.enqueueAction(action);
},
backFunction : function() {
// Close the action panel
var dismissActionPanel = $A.get("e.force:closeQuickAction");
dismissActionPanel.fire();
},

25. PXS_ContactDesactivateHelper.js
btnSaveContact : function(component, event) {
//inactive Btn
var btn = event.getSource();
btn.set("v.disabled",true);
var action = component.get("c.saveContact");
action.setParams({
"jsonContact":JSON.stringify(component.get("v.Contact"))
});
action.setCallback(this, function(a) {
var state = a.getState();
if (state === "SUCCESS") {
component.set("v.Contact", a.getReturnValue());
//inform user
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Success",
"type":"success",
"message": "Contact désactivé avec succès..."
});
resultsToast.fire();
var urlEvent = $A.get("e.force:navigateToURL");
urlEvent.setParams({
"url": "/" + component.get("v.Contact.AccountId")
});
urlEvent.fire();
}else if (state === "ERROR"){
btn.set("v.disabled",false);
var errors = response.getError();
console.log("Error message : ", errors);
}
});
$A.enqueueAction(action);
},

26. Le bouton

27. Lightning action button
Pour cela, je clique sur le menu
« Buttons, Links and Actions »
puis sur le bouton « New Action ».
Afin d’ouvrir notre composant, je vais créer
une action lightning.

28. Le rendu final

29. Le rendu final
Le bouton permettant de désactiver un contact est disponible.

30. Le rendu final
La fenêtre s’ouvre, nous pouvons « valider » ou « annuler »

31. Le rendu final
Le message de succès apparait après la modification