Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Affichage des données d'enregistrement avec lightning:recordForm

Partie 1 : Création d'une carte de courtier

  1. Dans la Developer Console, créez un composant Aura portant le nom BrokerCard.
  2. Cochez la case Lightning Record Page (Page d'enregistrement Lightning), puis cliquez sur Submit (Envoyer).
  3. Ajouter le code suivant au composant.
  4. <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="property" type="Property__c"/>
    <force:recordData aura:id="propertyRecord"
                    recordId="{!v.recordId}"
                    targetFields="{!v.property}"
                    layoutType="FULL"/>
    
    <lightning:card iconName="standard:user" title="{! 'Broker for ' + v.property.Name}">
        <div class="slds-p-left_large slds-p-right_medium">
        </div>
    </lightning:card>
    
  5. Enregistrez le fichier.
  6. Cliquez sur l'icône Setup (Configurer) Configuration dans le coin supérieur droit, et choisissez Edit Page (Modifier la page).
  7. Ajoutez le composant BrokerCard dans la colonne de droite, au-dessus du composant Similar Properties.
  8. Cliquez sur le bouton Save (Enregistrer), puis sur le lien Back (Retour) pour revenir à la page d'enregistrement de propriété.

Partie 2 : Ajout d'un lightning:recordForm

  1. Dans la Console du développeur, ajoutez le code suivant au composant BrokerCard, à la ligne 12.
  2. <lightning:recordForm aura:id="brokerForm"
                            recordId="{!v.property.Broker__c}"
                            objectApiName="Broker__c"
                            layoutType="Full"/>
    
  3. Enregistrez le composant, puis actualisez la page d'enregistrement de propriété.

Partie 3 : Modification du mode recordForm

  1. Dans la Console du développeur, ajoutez l'attribut mode="View" à l'onglet lightning:recordForm.
  2. Enregistrez le fichier et actualisez la page d'enregistrement de propriété.
  3. Cliquez sur un champ pour le modifier, puis sur Save (Enregistrer).

Partie 4 : Modification de la présentation du formulaire

  1. Dans la Console du développeur, définissez le layoutType de recordForm comme Compact.
  2. Enregistrez le fichier et actualisez la page d'enregistrement de propriété.

Partie 5 : Limitation des champs à afficher

  1. Dans la Console du développeur, ajoutez l'attribut suivant au composant.
  2. <aura:attribute name="brokerFields" type="String[]" default="Name,Title__c,Phone__c,Email__c"/>
    
  3. Supprimez layoutType="Compact" de recordForm.
  4. Ajoutez les attributs suivants au recordForm.
  5. fields="{!v.brokerFields}" columns="2"
    
  6. Enregistrez le composant, puis actualisez la page d'enregistrement de propriété.

Mon composant ne fonctionne pas ! Comparez votre code à ce qui suit.

BrokerCard.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="property" type="Property__c"/>
    <aura:attribute name="brokerFields" type="String[]" default="Name,Title__c,Phone__c,Email__c"/>
    <force:recordData aura:id="propertyRecord"
                        recordId="{!v.recordId}"
                        targetFields="{!v.property}"
                        layoutType="FULL"/>
    <lightning:card iconName="standard:user" title="{! 'Broker for ' + v.property.Name}">
        <div class="slds-p-left_large slds-p-right_medium">
            <lightning:recordForm aura:id="brokerForm"
                                recordId="{!v.property.Broker__c}"
                                objectApiName="Broker__c"
                                fields="{!v.brokerFields}"
                                columns="2"
                                mode="View"/>
        </div>
    </lightning:card>
</aura:component>