Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Utilisation d'événements et d'actions

Partie 1 : Accès à une propriété similaire

Dans le composant SimilarProperty, l’adresse (qui est stockée dans le champ Name [Nom]) est un lien sur lequel vous pouvez cliquer. L’élément <a> possède un événement onclick qui déclenche la fonction navToRecord.

  1. Dans la Console du développeur, cliquez sur le composant SimilarProperty.
  2. Cliquez sur CONTROLLER (contrôleur) et remplacez le code de l'espace réservé par :
  3. ({
        navToRecord : function (component, event, helper) {
            var navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParams({
                "recordId": component.get("v.property.Id")
            });
            navEvt.fire();
        }
    })

    Il s'agit d'une fonction particulièrement simple. Elle se contente de déclarer une variable qui indique à Lightning Framework qu’il s'agit de $A, pour appeler l'événement e.force:navigateToSObject. L'ID de la propriété est transmis comme un paramètre de l'événement.

  4. Enregistrez le fichier et actualisez la page Détails de propriété.
  5. Dans le composant Propriétés similaires de la page, cliquez sur le nom d'une propriété pour accéder à la page de l'enregistrement de cette propriété.

Partie 2 : Modification d'une propriété similaire « sur place »

La dernière touche de fonctionnalité que nous allons ajouter au composant consiste à autoriser un utilisateur à modifier l'une des propriétés dans la liste des propriétés similaires sans réellement y accéder.

  1. Dans la Console du développeur, accédez au balisage du composant SimilarProperty.
  2. Ajoutez une nouvelle ligne après la balise fermante </a> qui intègre <h3> et collez le code suivant.
  3. <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
    

    C’est encore un autre composant de base Lightning, <lightning:buttonIcon>, qui vous permet d’utiliser une icône comme bouton. Dans ce cas, il utilise l'icône de modification (représentant un crayon) de la section des utilitaires des icônes de SLDS. Lorsque l'utilisateur clique sur le bouton, la fonction editRecord que nous sommes sur le point d'ajouter se déclenche.

  4. Enregistrez le fichier.
  5. Cliquez sur CONTROLLER (contrôleur) dans la barre latérale et ajoutez la fonction suivante en dessous de la fonction navToRecord (n'oubliez pas d'ajouter une virgule pour séparer les fonctions.).
  6. editRecord : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": component.get("v.property.Id")
        });
        editRecordEvent.fire();
    }
  7. Enregistrez le fichier.
  8. Revenez à la page Détails de propriété et actualisez-la.
  9. Dans le composant Similar Properties (Propriétés similaires), cliquez sur l’icône de modification d’une propriété pour la modifier en contexte avec la zone de modification de la boîte de dialogue contextuelle par défaut.

Vous rencontrez des problèmes ? Vérifiez que votre code ressemble à ce qui suit.

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:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}"/>
            </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>

SimilarPropertyController.js

({
    navToRecord : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.property.Id")
        });
        navEvt.fire();
    },
    editRecord : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": component.get("v.property.Id")
        });
        editRecordEvent.fire();
    }
})