Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Premiers pas avec Lightning Data Service pour les composants Aura

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Présenter Lightning Data Service pour les composants Aura.
  • Expliquer comment Lightning Data Service peut améliorer les performances de vos composants.
  • Utiliser Lightning Data Service pour charger des enregistrements dans votre interface utilisateur.

Qu’est-ce que Lightning Data Service ?

Remarque

Remarque

À compter de la version Spring ’19 (version d’API 45.0), vous pouvez créer des composants Lightning à l’aide de deux modèles de programmation : le modèle Composants Web Lightning et le modèle Composants Aura d’origine. Les composants Web Lightning sont des éléments HTML personnalisés, conçus à l’aide du format HTML et de JavaScript moderne. Les composants Web Lightning et les composants Aura peuvent coexister et interagir sur une page. Lightning Data Service prend en charge les deux types de composants, mais ce module aborde uniquement les composants Aura.

Nous avons conçu Lightning Data Service (LDS) pour en faire la couche données de Lightning. LDS est le pendant du contrôleur standard Visualforce dans les composants Lightning, qui permet l’accès aux données affichées sur une page. Sans LDS, chaque composant de l’application doit faire ses propres appels au serveur pour effectuer des opérations CRUD sur un enregistrement, même si tous les composants de l’application utilisent les données du même enregistrement. Chaque appel au serveur nuit aux performances et oblige les utilisateurs à patienter en se tournant les pouces au lieu de travailler sur leurs données. Ces appels indépendants au serveur conduisent également à des incohérences, avec des situations où un appel au serveur rafraîchit un seul composant sans mettre à jour les autres.

Lightning Data Service identifie et élimine les requêtes qui concernent les mêmes enregistrements, pour envoyer une seule requête unifiée qui met à jour tous les composants concernés. Ainsi, non seulement les incohérences de données entre composants sont éliminées, mais les données sont également mises en cache pour permettre à l’utilisateur de travailler hors ligne en cas de déconnexion. Les données sont ensuite synchronisées intelligemment lorsque la connexion est rétablie.

Animation montrant une application qui utilise Lightning Data Service pour remplir ses composants

Cette animation montre une application de gestion immobilière qui utilise Lightning Data Service pour modifier et mettre à jour ses composants. La barre de progression du statut de vente met à jour automatiquement les détails du bien lorsque le statut est mis à jour.

Animation montrant une application qui utilise Lightning Data Service pour remplir ses composants

Cette animation montre un deuxième composant de la même page qui crée et affiche des rendez-vous pour l’enregistrement parent.

En résumé, Lightning Data Service offre des composants Aura réutilisables qui :
  • Minimisent les XMLHttpRequests (XHR)
  • Récupèrent les enregistrements une seule fois, ce qui réduit le trafic réseau, la charge du serveur d’application et celle du serveur de base de données
  • Mettent en cache les données des enregistrements sur le client, indépendamment des métadonnées du composant
  • Partagent les données des enregistrements entre les composants
  • Permettent un chargement progressif de l’enregistrement, une mise en cache et la fusion de plusieurs champs et présentations dans le cache
  • Permettent de remplir le cache de manière proactive
  • Favorisent la cohérence en utilisant une seule instance des données de l’enregistrement pour plusieurs composants
  • Envoient des notifications lorsque les données de l’enregistrement changent

Si vous avez une application Lightning qui crée, lit, met à jour ou supprime des enregistrements, LDS est la manière la plus efficace d’effectuer des opérations CRUD.

LDS est là pour vous simplifier la vie. En choisissant LDS, vous n’aurez plus besoin d’écrire votre propre code contrôleur. Tout le code de vos accès aux données est contenu dans le composant LDS, ce qui réduit significativement la complexité de vos applications et de vos pages. Cette réduction de la complexité signifie aussi que vous passerez moins de temps à tester les performances et la qualité. Pensez à tous les cycles que vous allez économiser !

Découverte des composants basés sur un formulaire et du composant force:recordData

Comment profiter des avantages de Lightning Data Service ? Rien de plus simple ! Il suffit d'utiliser l'un des composants basés sur un formulaire ci-dessous ou le composant très polyvalent force:recordData.

Fonction de formulaire
Afficher, créer ou modifier des enregistrements lightning:recordForm
Afficher uniquement les enregistrements lightning:recordViewForm (avec lightning:outputField)
Créer ou modifier uniquement des enregistrements lightning:recordEditForm (avec lightning:inputField)
Afficher, créer, modifier ou supprimer des enregistrements avec une personnalisation précise force:recordData

Dans la plupart des cas, lightning:recordForm offre un point de départ idéal. Il combine et simplifie les fonctionnalités des composants lightning:recordViewForm et lightning:recordEditForm. Le composant lightning:recordForm bascule également entre les modes de modification et d'affichage une fois les modifications soumises avec succès. Vous obtenez un mappage de champs automatique et une validation au niveau du champ avec les composants reposant sur un formulaire.

Dans cet exemple, lightning:recordForm affiche le champ et l'étiquette du nom du compte avec une icône de crayon, de la même façon que dans une page de détail d'enregistrement. Lorsque l'utilisateur clique sur l'icône de crayon, le champ est modifiable avec les boutons Annuler et Enregistrer affichés dessous. L’ID d’enregistrement est hérité de la page d’enregistrement via l’interface force:hasRecordId. Si vous omettez l’attribut recordId, un formulaire créant un enregistrement apparaît.

<!-- Add this component to an account record Lightning page -->
<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
    <aura:attribute name="recordId" type="String" />
    <lightning:card title="Display, Create, or Edit Records">
        <lightning:recordForm recordId="{!v.recordId}" 
                              objectApiName="Account"
                              fields="Name" />
    </lightning:card>
</aura:component>

Pour les cas d'utilisation plus avancés qui nécessitent des présentations de champ personnalisées utilisant une feuille de style CSS et un rendu personnalisé des données d'enregistrement, utilisez lightning:recordViewForm et lightning:recordEditForm.

Dans cet exemple, lightning:recordEditForm affiche un champ de saisie avec le nom du compte de l'enregistrement actuellement visualisé. Le bouton personnalisé Nouveau gère la mise à jour de l’enregistrement lorsque l’utilisateur clique dessus. lightning:recordViewForm affiche un champ de nom de compte en lecture seule et une étiquette. lightning:messages affiche les erreurs éventuelles survenues lors de la mise à jour de l’enregistrement.

<!-- Add this component to an account record Lightning page -->
<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
    <lightning:card title="Display, Create, or Edit Records">
        <lightning:recordEditForm recordId="{!v.recordId}"
                                  objectApiName="Account">
            <lightning:messages />
            <lightning:inputField fieldName="Name" />
            <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
        </lightning:recordEditForm>

        <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Account">
            <lightning:messages />
            <lightning:outputField fieldName="Name" />
        </lightning:recordViewForm>
    </lightning:card>
</aura:component>
Remarque

Remarque

Explorez les composants basés sur un formulaire inclus dans le projet Applications intégrées à des composants Lightning. Le reste du module présente le composant force:recordData.

Les composants basés sur un formulaire gèrent la présentation, la validation, les modifications CRUD (créer, lire, mettre à jour et supprimer) et le traitement des erreurs. Avec des composants basés sur un formulaire aussi puissants, qui a besoin de force:recordData ? En tant que tel, force:recordData ne contient pas d’élément d’interface. Il s’agit uniquement de logique et d’un moyen de communication avec le serveur. force:recordData est un puissant composant qui permet de palier à l'absence d'éléments d'interface. Utilisez-le pour créer des interfaces utilisateur hautement personnalisables qui complètent les composants basés sur un formulaire fournis. Vous pouvez utiliser des composants personnalisés pour afficher les données extraites par force:recordData.

L’une des utilisations les plus simples de LDS est le chargement d’enregistrements. Pour charger un enregistrement côté client, vous devez ajouter la balise force:recordData à votre composant, et définir vos attributs recordId, mode, et layoutType ou fields.

  • recordId précise quel enregistrement doit être chargé. Il est impossible de charger un enregistrement sans recordId.
  • mode peut être défini sur EDIT ou VIEW, ce qui conditionne le comportement des notifications et les opérations qu’il sera possible d’effectuer sur l’enregistrement. Si vous utilisez force:recordData pour modifier l’enregistrement d’une quelconque manière, définissez le mode sur EDIT.
  • layoutType définit la présentation (FULL ou COMPACT) utilisée pour afficher l’enregistrement, qui déterminera quels champs sont inclus. Utiliser layoutType permet à votre composant de s’adapter aux définitions des présentations.
  • fields définit les champs de l’enregistrement qui seront interrogés.

L’attribut fields ou layoutType doit être fourni pour pouvoir charger les données des champs d’un enregistrement. Puisque les administrateurs modifient généralement les présentations, utiliser fields constitue une manière plus flexible d’obtenir les champs que vous souhaitez.

La balise force:recordData prend également en charge un ensemble d’attributs target*, que force:recordData renseigne lui-même. Les attributs target* peuvent être utilisés pour permettre l’accès depuis l’interface utilisateur.

  • targetRecord contient l’enregistrement chargé
  • targetFields contient une vue simplifiée de l’enregistrement chargé
  • targetError contient les erreurs éventuelles
<force:recordData aura:id="forceRecordCmp" 
  <!-- aura:id is required to reference the component in your Javascript controller -->
    recordId="{!v.recordId}"
    layoutType="{!v.layout}"
    fields="{!v.fieldsToQuery}"
    mode="VIEW"
    targetRecord="{!v.record}"
    targetFields="{!v.simpleRecord}" 
    targetError="{!v.error}"
/>

Dans cet exemple, lightning:formattedtext affiche le champ Name de l’enregistrement chargé par force:recordData.

<aura:component>

    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="simpleRecord" type="Object" />

     <force:recordData recordId="{!v.recordId}"
          targetRecord ="{!v.record}"
          targetFields ="{!v.simpleRecord}"
          fields="Id, Name" />

    <div class="recordName">
        <p class="slds-text-heading--medium">
            <lightning:formattedtext title="Record Name" value="{!v.simpleRecord.Name}" /></p>
    </div>

</aura:component>

Plusieurs méthodes Aura de modification des enregistrements sont disponibles. Voici un aperçu rapide des méthodes que vous pourrez utiliser dans vos composants contrôleurs en JavaScript.

  • saveRecord() insère ou met à jour l’enregistrement chargé dans le composant force:recordData.
  • deleteRecord() supprime l’enregistrement chargé.
  • getNewRecord() charge un nouveau modèle d’enregistrement qui procède à une insertion lorsqu’il est enregistré.
  • reloadRecord() exécute à nouveau le code de chargement pour remplacer le targetRecord en cours par les valeurs actuelles des attributs.

Nous présentons plus en détail le composant force:recordData dans l'unité suivante.