Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Utilisation de composants Lightning de base

Partie 1 : Création d’un contrôleur de classe Apex

Notre composant aura besoin de données de Salesforce et il doit permettre à notre administrateur Salesforce de déterminer quoi rechercher en définissant des critères de recherche lorsque le composant est ajouté à la page. Ouvrons les hostilités en créant une nouvelle classe Apex qui acceptera des critères de recherche.

  1. Dans la Developer Console, sélectionnez File (Fichier) > New (Nouveau) > Apex Class (Classe APEX). Nommez la classe MyPropertyController, puis cliquez sur OK.
  2. Remplacez le code par défaut par :
  3. public with sharing class MyPropertyController {
    
        public static List<Property__c> findProperties (Id recordId, Decimal priceRange) {
            List<Property__c> property = [SELECT Price__c FROM Property__c WHERE Id=:recordId];
            Decimal propertyPrice = property[0].Price__c;
            List<Property__c> similarProperties = getSimilarProperties(recordId, priceRange, propertyPrice);
            return similarProperties;
        }
    
        private static List<Property__c> getSimilarProperties (Id recordId, Decimal priceRange, Decimal price ) {
            Decimal range;
            if (priceRange == null) {
                range = 100000;
            } else {
                range = priceRange;
            }
            return [
                SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range
            ];
        }
    }
    

    La méthode findProperties utilise deux paramètres : recordId et priceRange. Le paramètre recordId est destiné à l'enregistrement de la propriété actuelle. La méthode utilise alors ces paramètres pour déterminer le prix de la propriété. Puis, les trois paramètres recordId, priceRange et propertyPrice sont transmis à la méthode getSimilarProperties qui renvoie une liste de propriétés similaires.


  4. Enregistrez le fichier.
  5. Ajoutez @AuraEnabled à la deuxième ligne de la classe Apex.

  6. La signature @AuraEnabled indique à la classe d'autoriser l'appel à cette méthode à partir d'un composant Lightning. Toutes les méthodes appelées depuis un composant Lightning doivent également être déclarées comme static.


  7. Enregistrez le fichier.
  8. Fermez l'onglet dans la Console du développeur.

Partie 2 : Créez le composant SimilarProperties (propriétés similaires)

  1. Dans la Developer Console, sélectionnez File (Fichier) > New (Nouveau) > Lightning Component (Composant Lightning).
  2. Donnez au composant le nom SimilarProperties, sélectionnez Lightning Record Page (Page d'enregistrement Lightning), puis cliquez sur Submit (Envoyer).
  3. Ajoutez controller="MyPropertyController" à la balise <aura:component>.
  4. Collez le code suivant dans votre nouveau composant à l’intérieur de la balise <aura:component>.
  5. <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="similarProperties" type="Object[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:card iconName="custom:custom85" title="Similar Properties">
        <div class="slds-p-left_medium slds-p-right_medium">
            <ul class="slds-list_vertical slds-has-dividers_top-space">
                <aura:iteration items="{!v.similarProperties}" var="item">
                    <li class="slds-list__item">
                        {!item.Name}
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </lightning:card>
    

    Remarquez la déclaration <aura:attribute>.


    Comme nous avons sélectionné Lightning Record Page (Page d’enregistrement Lightning), le composant utilise également l’interface force:hasRecordId qui récupère automatiquement l’ID de la page d’enregistrement actuelle et le stocke dans <aura:attribute> sous le nom recordId.


    Ensuite, nous disposons d'un attribut nommé similarProperties qui stocke les propriétés renvoyées par la classe Apex. Cela prend la forme d’un JSON, de sorte que son type est configuré sur Object[].


    L’IU du composant est constituée d’un composant de base Lightning appelé <lightning:card>. La carte utilise une icône de SLDS nommée custom85. Surprise : il s'agit d'un panneau immobilier ! Dans le corps de la carte, vous voyez une liste non classée <ul> qui contient un élément de liste <li>. La liste non classée parcourt un tableau d’éléments similarProperties et renvoie un élément de liste <li> pour chacune des entrées du tableau. Le composant utilise <aura:iteration> pour faire des boucles au sein des enregistrements dans l’attribut similarProperties et, pour chaque enregistrement, il affiche le nom {!item.Name} de la propriété.


    Enfin, lorsque le composant se charge, la fonction doInit est appelée dans le contrôleur du composant. Ce qui nous amène donc à créer cette fonction.


  6. Cliquez sur CONTROLLER (contrôleur), dans la barre latérale de droite de la Console du développeur.
  7. Remplacez le code par défaut par le code suivant :
  8. ({
        doInit : function(component, event, helper) {
            var action = component.get("c.findProperties");
            action.setParams({
                recordId: component.get("v.recordId"),
                priceRange: "100000"
            });
            action.setCallback(this, function(response){
                var similarProperties = response.getReturnValue();
                component.set("v.similarProperties", similarProperties);
            });
            $A.enqueueAction(action);
        }
    })
    
  9. Enregistrez le fichier.
  10. Revenez à la page Enregistrement de propriété et cliquez sur l'icône Setup (Configurer) Icône Configurer, puis sélectionnez Edit Page (Modifier la page).
  11. Localisez le composant SimilarProperties dans les composants Custom (Personnalisé) et faites-le glisser sur la page, en haut de la colonne de droite.
  12. Cliquez sur Save (Enregistrer), puis sur Back (Retour).
  13. La page doit maintenant afficher une liste des propriétés de la même plage de prix.

Partie 3 : Création d'un composant enfant

Lors du développement de composants Aura, vous pouvez placer tout le balisage dans un unique composant. Toutefois, une meilleure pratique consiste à diviser les choses en composant plus petits à inclure dans un composant plus grand. Cela signifie que ces sous-composants peuvent également être utilisés dans d'autres composants.

Pour cette étape, nous allons créer un composant pour afficher davantage d'informations sur chaque enregistrement.

  1. Dans la Developer Console, sélectionnez File (Fichier) > New (Nouveau) > Lightning Component (Composant Lightning).
  2. Donnez un nom au composant SimilarProperty et laissez toutes les cases décochées.
  3. Cliquez sur le bouton Submit (Envoyer).
  4. Ajoutez ce qui suit à la ligne 2.
  5. <aura:attribute name="property" type="Property__c"/>
    {!v.property.Name}
    
  6. Enregistrez le fichier.
  7. Revenez au composant SimilarProperties.cmp. Remplacez {!item.Name} dans <li> par :
  8. <c:SimilarProperty property="{!item}"/>
    
  9. Enregistrez le fichier et actualisez la page Détails de propriété. Vous ne devriez pas remarquer de changement.

Partie 4 : Amélioration de l'interface

  1. Remplacez {!v.property.Name} dans SimilarProperty.cmp par :
  2. <lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c">
        <lightning:outputField fieldName="Name"/>
    </lightning:recordViewForm>
    

    Pour améliorer l'interface utilisateur de notre composant enfant, nous allons utiliser le composant d'emballage lightning:recordViewForm. Il accepte un ID d'enregistrement et affiche les champs associés à cet enregistrement spécifiés par le composant lightning:outputField. Dans le code ci-dessus, vous avez spécifié que le champ Nom doit être affiché.


  3. Enregistrez le fichier et actualisez la page Détails de propriété.
  4. Enregistrez ce qui suit dans SimilarProperty.cmp après le lightning:outputField initial :
  5. <lightning:outputField fieldName="Beds__c"/>
    <lightning:outputField fieldName="Baths__c"/>
    <lightning:outputField fieldName="Price__c"/>
    <lightning:outputField fieldName="Status__c"/>
    
  6. Enregistrez le fichier et actualisez la page Détails de propriété.
  7. Ensuite, nous allons utiliser lightning:layout, qui est un système de grille flexible qui permet d'organiser les conteneurs dans notre composant. Remplacez les quatre lignes de code que vous venez de coller par ce qui suit.
  8. <lightning:layout multipleRows="true">
        <lightning:layoutItem size="6">
            <lightning:outputField fieldName="Beds__c"/>
        </lightning:layoutItem>
        <lightning:layoutItem size="6">
            <lightning:outputField fieldName="Baths__c"/>
        </lightning:layoutItem>
        <lightning:layoutItem size="6">
            <lightning:outputField fieldName="Price__c"/>
        </lightning:layoutItem>
        <lightning:layoutItem size="6">
            <lightning:outputField fieldName="Status__c"/>
        </lightning:layoutItem>
    </lightning:layout>
    
  9. Enregistrez le fichier et actualisez la page Détails de propriété.
  10. Remplacez le contenu de <lightning:recordViewForm> par ce qui suit.
  11. <div class="slds-media">
        <div class="slds-media__figure">
            <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/>
        </div>
        <div class="slds-media__body">
            <lightning:layout class="slds-hint-parent">
                <a onclick="{!c.navToRecord}">
                    <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                </a>
            </lightning:layout>
            <lightning:layout multipleRows="true">
                <lightning:layoutItem size="6">
                    <lightning:outputField fieldName="Beds__c"/>
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    <lightning:outputField fieldName="Baths__c"/>
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    <lightning:outputField fieldName="Price__c"/>
                </lightning:layoutItem>
                <lightning:layoutItem size="6">
                    <lightning:outputField fieldName="Status__c"/>
                </lightning:layoutItem>
            </lightning:layout>
        </div>
    </div>
    
  12. Enregistrez le fichier et actualisez la page Détails de propriété.

Un problème est survenu ? Vérifiez le code de vos composants par rapport à ce qui suit.

MyPropertyController.apxc

public with sharing class MyPropertyController {
    @AuraEnabled
    public static List<Property__c> findProperties (Id recordId, Decimal priceRange) {
        List<Property__c> property = [SELECT Price__c FROM Property__c WHERE Id=:recordId];
        Decimal propertyPrice = property[0].Price__c;
        List<Property__c> similarProperties = getSimilarProperties(recordId, priceRange, propertyPrice);return similarProperties;
    }

    private static List<Property__c> getSimilarProperties (Id recordId, Decimal priceRange, Decimal price ) {
    Decimal range;
    if (priceRange == null) {
        range = 100000;
    } else {
        range = priceRange;
    }
    return [
        SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
        FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range];
    }
}

SimilarProperties.cmp

<aura:component controller="myPropertyController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="similarProperties" type="Object[]"/>
    <aura:handler name="init" value="{! this}" action="{!c.doInit}"/>
    <lightning:card iconName="custom:custom85" title="Similar Properties">
        <div class="slds-p-left_medium slds-p-right_medium">
            <ul class="slds-list_vertical slds-has-dividers_top-space">
                <aura:iteration items="{!v.similarProperties}" var="item">
                    <li class="slds-list__item">
                        <c:SimilarProperty property="{!item}"/>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </lightning:card>
</aura:component>

SimilarPropertiesController.js

({
    doInit : function(component, event, helper) {
        var action = component.get("c.findProperties");
        action.setParams({
            recordId: component.get("v.recordId"),
            priceRange: "100000"
        });
        action.setCallback(this, function(response){
            var similarProperties = response.getReturnValue();
            component.set("v.similarProperties", similarProperties);
        });
        $A.enqueueAction(action);
    }
})

SimilarProperty.cmp

<aura:component >
    <aura:attribute name="property" type="Property__c"/>
    <lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c">
        <div class="slds-media">
            <div class="slds-media__figure">
                <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/>
            </div>
            <div class="slds-media__body">
                <lightning:layout class="slds-hint-parent">
                    <a onclick="{!c.navToRecord}">
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                    </a>
                </lightning:layout>
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6"  >
                        <lightning:outputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordViewForm>
</aura:component>