Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Création d'un formulaire de modification d'enregistrement pour gérer des données

Partie 1 : Création de lightning:recordEditForm

Dans cette étape, nous utilisons le composant d'emballage lightning:recordEditForm pour créer une présentation de modification qui nous permettra de mettre à jour l'enregistrement. lightning:inputField, à l'intérieur du composant lightning:recordEditForm, est utilisé pour créer des champs modifiables dans la présentation.

  1. Dans la Console du développeur, cliquez sur le balisage du composant SimilarProperty.
  2. Ajoutez le code suivant après la balise fermante </lightning:recordViewForm>.
  3. <lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}">
        <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>
                    <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:inputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                    <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                    <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordEditForm>
    
  4. Enregistrez le fichier.

Partie 2 : Ajout d'une fonction d'aide

Ensuite, nous allons ajouter une fonction d’aide à notre composant Aura qui nous permettra de basculer entre les états de modification et d’affichage du formulaire personnalisé que nous venons de créer. Les fonctions d'aide sont un composant local qui permet d'améliorer la réutilisation du code et d'épargner au contrôleur côté client la lourdeur de la logique de JavaScript.

  1. Cliquez sur le bouton Helper (Aide) pour ajouter un fichier d'aide au paquet de composants SimilarProperty.
  2. Renommez la fonction par défaut en showHide et ajoutez component comme paramètre de la fonction.
  3. Ajoutez ce qui suit à la fonction showHide.
  4. var editForm = component.find("editForm");
    $A.util.toggleClass(editForm, "slds-hide");
    var viewForm = component.find("viewForm");
    $A.util.toggleClass(viewForm, "slds-hide");
    
  5. Enregistrez le fichier.
  6. Passez au fichier nom SimilarPropertyController.js et remplacez le contenu de la fonction editRecord par :
  7. helper.showHide(component);
    
  8. Enregistrez le fichier et actualisez la page d'enregistrement de propriété.
  9. Cliquez sur l'icône Edit (Modifier) pour afficher le formulaire de modification.

Partie 3 : Gestion des réussites et annulation

  1. Dans le fichier SimilarPropertyController.js, ajoutez les fonctions suivantes indiquées ci-dessous (n'oubliez pas la virgule entre les fonctions.).
  2. handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The property's info has been updated.",
            "type": "success"
        });
        toastEvent.fire();
        helper.showHide(component);
    },
    handleCancel : function(component, event, helper) {
        helper.showHide(component);
        event.preventDefault();
    }
    
  3. Enregistrez le fichier.
  4. Actualisez la page Property Record (enregistrement de propriété), puis cliquez sur l'icône Edit (Modifier) d'une propriété.
  5. Modifiez l’un des éléments et cliquez sur Submit (Soumettre).
  6. Répétez et cliquez sur Cancel (Annuler).

Désolé, j'aurais peut-être besoin d'un peu d'aide ! Vous pouvez comparer votre code à 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>
    <lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}">
        <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>
                    <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:inputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                    <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                    <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordEditForm>
</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) {
        helper.showHide(component);
    },

    handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({"title": "Success!","message": "The property's info has been updated.","type": "success"});toastEvent.fire();
        helper.showHide(component);
    },

    handleCancel : function(component, event, helper) {
        helper.showHide(component);
        event.preventDefault();
    }
})

SimilarPropertyHelper.js

({
    showHide : function(component) {
        var editForm = component.find("editForm");
        $A.util.toggleClass(editForm, "slds-hide");
        var viewForm = component.find("viewForm");
        $A.util.toggleClass(viewForm, "slds-hide");
    }
})