Skip to main content

Exploitation des données avec Lightning Data Service

Objectifs de formation

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

  • Développer des solutions qui incluent des composants de base lightning-record-*-form
  • Utiliser les adaptateurs Wire de Lightning Data Service (LDS) pour lire les données
  • Utiliser les fonctions LDS pour modifier les données
Remarque

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

S’il s’agit de votre première incursion dans le monde des composants Web Lightning, ne vous précipitez pas. Prenez un peu de recul. Avant de vous lancer dans ce module, veillez à suivre le module Bases des composants Web Lightning et le parcours Découverte de l’utilisation de JavaScript ici sur Trailhead. Ce module et ce parcours comportent des concepts et des connaissances nécessaires au travail que vous effectuez ici.

Exploitation des données dans les composants Web Lightning

Il existe plusieurs façons d’exploiter les données Salesforce dans les composants Web Lightning. En déterminant la solution à utiliser pour un cas d’utilisation spécifique, vous serez en mesure d’écrire moins de code, qui sera également plus simple et facile à gérer. Choisir une solution adaptée à la situation améliore en outre les performances de vos composants et applications.

Dans ce module, vous apprendrez quand et comment utiliser différentes solutions. Nous examinerons dans un premier temps les options les plus simples, mais les moins personnalisables, puis les options plus complexes et plus personnalisables.

Utilisation des données dans Lightning Data Service

Lightning Data Service est le moyen privilégié (et le plus simple) d’exploiter les données Salesforce. Avec Lightning Data Service, les développeurs utilisent JavaScript pour relier des composants aux données Salesforce.

Lightning Data Service assure également la sécurité en créant des appels au serveur pour sécuriser les points de terminaison de l’API de l’interface utilisateur. En utilisant un cache partagé côté client dans tous les composants, Lightning Data Service optimise les performances. Un enregistrement mis en cache est récupéré depuis ce dernier, ce qui permet d’éliminer les appels inutiles au serveur.

Ne comptez pas sur la réception de données provenant d’un adaptateur Wire à un moment précis du cycle de vie du composant. Les données des adaptateurs Wire ne sont pas toujours accessibles dans les points d’ancrage de cycle de vie comme connectedCallback() ou renderedCallback(). Pour en savoir plus sur le cycle de vie des données de service Wire, consultez la page Compréhension du service Wire.

Lightning Data Service maintient des données cohérentes et à jour dans plusieurs composants et clients tout au long du cycle de vie de l’application. Si plusieurs composants utilisent Lightning Data Service pour exploiter un enregistrement et que l’un d’eux met à jour l’enregistrement, les autres composants tiennent automatiquement compte de cette modification.

Dans les sections suivantes, nous allons présenter différentes manières d’exploiter les données Salesforce dans Lightning Data Service.

Lecture ou modification des données avec les composants de base du formulaire d’enregistrement

La manière la plus simple d’exploiter des enregistrements uniques dans les composants Web Lightning consiste à utiliser les composants lightning-record-*-form. Ces composants de base utilisent Lightning Data Service en arrière-plan et héritent de ses capacités de mise en cache et de synchronisation. Chaque composant de base vous offre des fonctionnalités et des niveaux de personnalisation différents.

  • Le composant de base lightning-record-form est le plus simple. Le composant lightning-record-form vous permet de spécifier une présentation et d’autoriser les administrateurs à configurer les champs de formulaire par déclaration. Vous pouvez également spécifier une liste organisée de champs pour définir par programmation les éléments affichés. lightning-record-form vous permet de consulter et de modifier des enregistrements.
  • Le composant de base lightning-record-view-form vous permet de consulter des enregistrements.
  • Le composant de base lightning-record-edit-form vous permet de modifier des enregistrements.

Utilisez lightning-record-view-form ou lightning-record-edit-form lorsque vous devez personnaliser la présentation du formulaire, préremplir les valeurs de champ ou modifier le rendu des données d’enregistrement.

Voici un exemple qui utilise lightning-record-form pour créer des comptes.

accountCreator.html

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

accountCreator.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

Points marquants du code :

accountCreator.html 

  • Ligne 3 : l’utilisation de lightning-record-form dans le balisage nous permet de bénéficier de tous les avantages fournis par Lightning Data Service en matière de sécurité et de performances. Le composant lightning-record-form fonctionne en mode edit (c’est-à-dire en mode de modification) lorsqu’il ne spécifie pas de paramètre recordId et crée un enregistrement lors de la soumission.
  • Ligne 4 : la liaison de la propriété object-api-name indique le type d’objet à charger.
  • Ligne 5 : la liaison de la propriété fields indique les champs à afficher dans le formulaire.
  • Ligne 6 : nous définissons handleSuccess comme gestionnaire de l’événement success.

accountCreator.js 

  • Lignes 3 à 6 : au début du fichier, nous importons des références dans l’objet de compte et ses champs. Le fait de référencer les objets et les champs de cette manière garantit l’intégrité des références. Salesforce vérifie que l’objet et les champs existent, les empêche d’être supprimés et assure qu’ils sont inclus dans les ensembles de modifications et les packages qui référencent le composant. L’importation de références d’objet et de champ garantit que votre code de composant continue de fonctionner même si l’objet ou les champs sont renommés.
  • Ligne 10 : nous définissons le gestionnaire d’événements handleSuccess pour l’événement success. handleSuccess est exécuté à la fin de l’opération de sauvegarde.
  • Lignes 11 à 17 : nous affichons un message de confirmation en déclenchant ShowToastEvent, dans lequel event.detail.id référence la propriété id de l’enregistrement créé.

Si les personnalisations fournies par les composants lightning-record-*-form sont insuffisantes, vous pouvez invoquer Lightning Data Service directement à l’aide d’un adaptateur Wire ou d’une fonction JavaScript. 

Lecture des données avec les adaptateurs Wire de LDS

Les adaptateurs Wire de LDS constituent un autre moyen d’exploiter les données Salesforce. Utilisez un adaptateur Wire pour lire les données (enregistrements) et les métadonnées (détails de la présentation, champs d’un objet, etc.) Salesforce. Pour les utiliser, décorez une propriété ou une fonction avec @wire et spécifiez l’adaptateur Wire.

Les adaptateurs Wire de LDS vérifient d’abord le cache LDS et ne récupèrent les données sur le serveur qu’en cas de besoin. Ils réagissent aux modifications et actualisent les données en conséquence. Par exemple, lorsque la valeur d’un paramètre est modifiée ou que d’autres composants modifient les données dans le cache Lightning Data Service, un adaptateur provisionne les nouvelles données vers la fonction ou la propriété liée.

Examinons un exemple qui utilise l’adaptateur Wire getRecord.

wireGetRecordProperty.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

Points marquants du code :

  • Ligne 2 : nous importons l’adaptateur Wire getRecord et la fonction getFieldValue.
  • Ligne 3 : comme nous l’avons fait dans l’exemple accountCreator, nous importons une référence dans le champ Account.Name. (À la ligne 6, nous l’utilisons pour indiquer à l’adaptateur Wire getRecord les champs à récupérer.)
  • Ligne 5 : lorsque le composant wireGetRecordProperty est placé sur une page d’enregistrement, @api recordId permet au composant parent (la FlexiPage) de transmettre l’ID de l’enregistrement actuel au composant.
  • Ligne 6 : pour lier la propriété de compte, nous appliquons le décorateur @wire et spécifions l’adaptateur Wire à appeler (getRecord), ainsi que les paramètres dont l’adaptateur a besoin (recordId et fields).
  • Ligne 7 : l’adaptateur Wire provisionne un flux de valeurs pour la propriété account, qui sera définie plusieurs fois. Si un enregistrement est récupéré, il est stocké dans account.data. Si la récupération de l’enregistrement échoue, l’erreur est stockée dans account.error.
  • Lignes 6 à 7 : lors de la première attribution d’une valeur à la propriété recordId, l’adaptateur Wire récupère les données du serveur et les stocke dans le cache LDS pour y accéder ultérieurement. En transmettant le paramètre recordId sous forme de chaîne avec un préfixe $, nous rendons recordId réactif. Chaque fois que la valeur de recordId change, l’adaptateur Wire reçoit de nouvelles données, à partir du cache ou du serveur. Si un autre composant modifie l’enregistrement mis en cache, l’adaptateur Wire transmet la nouvelle valeur de l’enregistrement à la propriété account.
  • Lignes 8 à 10 : nous définissons une méthode d’obtention pour la propriété name (nom). La fonction getFieldValue donne accès aux valeurs de champ à partir des données renvoyées.

Dans cet exemple, la propriété name (nom) peut être récupérée dans le fichier HTML comme suit :

wireGetRecordProperty.html

<template>
  Account Name: {name}
</template>

wireGetRecordProperty est un exemple de décoration de propriété. Nous pouvons décorer une fonction de la même manière. Les décorateurs sont utiles lorsque vous souhaitez exécuter une logique sur les enregistrements renvoyés. Voici l’exemple précédent (wireGetRecordProperty) retravaillé pour lier une fonction (wiredAccount) à la place d’une propriété.

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
    get name() {
        return getFieldValue(this.data, ACCOUNT_NAME_FIELD);
    }
}

Points marquants du code :

  • Lignes 8 à 9 : au lieu de décorer une propriété, nous décorons la fonction wiredAccount. La fonction reçoit, en tant que paramètre, un objet qui possède deux attributs : data et error. Nous utilisons la décomposition d’objet ES6 pour extraire les attributs de l’objet.
  • Lignes 11 à 17 : étant donné que les adaptateurs Wire de LDS ne provisionnent pas de valeur unique, mais un flux de valeurs, il est possible d’invoquer la fonction wiredAccount plusieurs fois. En conséquence, une fonction liée doit réinitialiser les états qu’elle influence. Ainsi, aux lignes 11 à 17, si l’adaptateur Wire provisionne de nouvelles données, nous les stockons dans la propriété data et indiquons que la propriété error n’est pas définie. En cas d’erreur, nous stockons cette dernière dans la propriété error (erreur) et indiquons que la propriété data n’est pas définie.

Dans cet exemple, nous pouvons accéder à la propriété name (nom) de la même manière que nous y avons accédé dans l’exemple précédent.

Modification des données avec les fonctions LDS

Les adaptateurs Wire de LDS sont parfaits pour lire des données, mais vous avez besoin d’une fonction LDS pour créer, mettre à jour ou supprimer des enregistrements. Notez que, bien que les adaptateurs Wire soient invoqués par le moteur des composants Lightning Web, vous devez appeler les fonctions de manière impérative. Les fonctions LDS notifient le cache LDS lorsque des enregistrements sont créés, mis à jour ou supprimés. Prenons cet exemple, qui utilise la fonction LDS createRecord pour créer un enregistrement de compte.

ldsCreateRecord.js

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}

Points marquants du code :

  • Ligne 2 : nous importons la fonction LDS createRecord.
  • Lignes 3 à 4 : nous importons l’objet Account et le champ Account.Name (comme nous l’avons fait dans les exemples précédents) pour garantir l’intégrité des références.
  • Ligne 6 : nous définissons la méthode handleButtonClick comme un gestionnaire d’événements. Elle réagit à l’événement qui se produit lorsqu’un utilisateur clique sur un bouton lightning-button dans le fichier .html (non représenté ici). Lorsque la fonction handleButtonClick est appelée, elle invoque la fonction createRecord de manière impérative.
  • Ligne 10 : notre gestionnaire d’événements transmet une chaîne pour le champ Account.Name, dont l’adaptateur a besoin pour créer un compte.
  • Ligne 13 : lorsque nous appelons une fonction LDS de manière impérative, celle-ci renvoie une promesse (un objet JavaScript qui simplifie l’exécution d’appels asynchrones).
  • Lignes 14 à 16 : dans la méthode then, nous définissons ce qui se produit lorsque le compte est correctement créé.
  • Lignes 17 à 19 : dans la méthode catch, nous définissons ce qui se produit lorsque la création du compte échoue.

Remarque :  les fonctions LDS ne vous permettent de travailler qu’avec des enregistrements uniques. Bien que vous puissiez utiliser plusieurs fonctions dans le même composant (pour créer deux types d’enregistrements différents dans la même opération, par exemple), chaque fonction s’exécute dans sa propre transaction indépendante. Par conséquent, il n’existe pas de logique de restauration commune. Si vous avez besoin qu’une opération DML combinée soit transactionnelle, envisagez d’utiliser Apex.

Pour en savoir plus sur les adaptateurs Wire et les fonctions LDS ainsi que leur utilisation, consultez le guide du développeur de composants Web Lightning et le blog des développeurs Salesforce.

Déploiement d’un composant Web Lightning de création de comptes

Maintenant que nous avons examiné différentes manières d’exploiter Lightning Data Service, passons à la pratique.

Avant de commencer

Nous partons du principe que votre environnement de développement Salesforce DX est configuré et que vous savez l’utiliser pour créer des composants Web Lightning et les déployer dans une organisation. Si vous ne maîtrisez pas encore ce processus, suivez le projet Prise en main rapide : composants Web Lightning.

Création d’un Trailhead Playground

Pour ce projet, vous devez créer un Trailhead Playground. Faites défiler la page jusqu’en bas, cliquez sur la flèche vers le bas en regard de Lancer, puis sélectionnez Créer une organisation Trailhead Playground. La création d’un Trailhead Playground prend généralement entre 3 et 4 minutes.

Remarque :  Oui, il faut vraiment un Trailhead Playground complètement nouveau ! Si vous utilisez une organisation ou un Playground existant, vous pourriez rencontrer des difficultés pour effectuer les défis.

Obtenir votre nom d'utilisateur et mot de passe Trailhead Playground

Accédez à votre Trailhead Playground. (S’il n’est pas déjà ouvert, descendez jusqu’au bas de cette page et cliquez sur Lancer.) Si vous voyez un onglet intitulé « Obtenir vos identifiants de connexion » dans votre organisation, c’est parfait ! Passez à l’étape 1. 

Sinon, depuis le lanceur d’application (Lanceur d’application), recherchez et ouvrez Playground Starter, puis laissez-vous guider. Si vous ne voyez pas l’application Playground Starter, consultez l’article Recherche du nom d’utilisateur et du mot de passe de votre Trailhead Playground dans l’aide Salesforce.

  1. Cliquez sur l’onglet Obtenir vos identifiants de connexion et notez votre nom d’utilisateur.
  2. Cliquez sur Réinitialiser mon mot de passe. Cela enverra un e-mail de réinitialisation du mot de passe à l’adresse e-mail associée à votre nom d’utilisateur.
  3. Cliquez sur le lien dans l’e-mail.
  4. Saisissez un nouveau mot de passe, confirmez-le, puis cliquez sur Modifier le mot de passe.

Prêt à vous lancer ? Alors allons-y !

Dans cet exercice, vous allez ajouter un composant Web Lightning à votre projet et le déployer dans votre Trailhead Playground. 

  1. Créez un projet :
    1. ouvrez Visual Studio Code.
    2. Ouvrez la palette de commandes : cliquez sur Afficher | Palette de commandes.
    3. Dans la palette de commandes, sélectionnez SFDX :. Create Project (Créer un projet).
      Si vous ne le trouvez pas dans la liste, saisissez SFDX:Create Project (SFDX : créer un projet), puis appuyez sur Entrée.
    4. Acceptez le modèle standard.
    5. Pour le nom du projet, saisissez workingWithDataInLWC, puis appuyez sur Entrée.
    6. Sélectionnez l’emplacement du nouveau projet, puis cliquez sur Créer un projet.
  1. Autorisez votre Trailhead Playground :
    1. Dans la palette de commandes, sélectionnez (ou saisissez) SFDX :. autoriser une organisation.
    2. Sélectionnez Production : login.salesforce.com et appuyez sur Entrée.
    3. Pour l’alias, saisissez lwc_and_salesforce_data, puis appuyez sur Entrée.
    4. Utilisez votre nom d’utilisateur et le mot de passe Trailhead Playground pour vous connecter.
    5. Une fois connecté à votre Trailhead Playground, laissez-le ouvert et revenez sur Visual Studio Code.
  1. Créez un composant Web Lightning :
    1. dans le volet Explorateur, cliquez avec le bouton droit de la souris sur le dossier lwc et sélectionnez SFDX : création d’un composant Web Lightning.
    2. Pour le nom du composant, saisissez accountCreator et appuyez sur Entrée.
    3. Appuyez de nouveau sur Entrée pour accepter le répertoire par défaut.
  1. Remplacez le contenu de vos fichiers accountCreator.html et accountCreator.js par le code fourni dans la section Lecture ou modification des données avec les composants de base du formulaire d’enregistrement plus haut dans cette unité.
  2. Pour rendre ce composant accessible sur les pages d’application d’une organisation, remplacez le contenu de votre fichier accountCreator.js-meta.xml par ce code :
    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>
  3. Enregistrez les trois fichiers : accountCreator.html, accountCreator.js et accountCreator.js-meta.xml.
  4. Déployez les fichiers de projet dans votre Trailhead Playground. (Cliquez avec le bouton droit de la souris sur le dossier accountCreater et sélectionnez SFDX : déployer la source dans l’organisation.)
  5. Si votre Trailhead Playground n’est pas déjà ouvert, ouvrez-le. (Dans la palette de commandes, sélectionnez (ou saisissez) SFDX : ouvrir l’organisation par défaut.)
  6. Dans votre Trailhead Playground, cliquez sur Configuration, puis sélectionnez Configuration.
  7. Dans la zone Quick Find (Recherche rapide), saisissez Lightning App Builder (Générateur d’application Lightning), puis sélectionnez Lightning App Builder (Générateur d’application  Lightning).
  8. Créez une page Lightning :
    1. Cliquez sur Nouveau.
    2. Sélectionnez Page d’application, puis cliquez sur Suivant.
    3. Pour le libellé, saisissez Working with Data (Utilisation des données), puis cliquez sur Next (Suivant).
    4. Pour la présentation, choisissez En-tête et menu latéral gauche.
    5. Cliquez sur Done (Terminé).
  1. Faites glisser le composant accountCreator vers le menu latéral de la page.
  2. Enregistrez la page.
  3. Activez la page : conservez le nom de l’application par défaut (Working with Data) et cliquez sur Enregistrer.
  4. Lorsque vous êtes invité à ajouter la page au menu de navigation, cliquez sur Terminer.
  5. Ouvrez la nouvelle page : dans la zone de recherche du lanceur d’application, saisissez work (utilisation), puis sélectionnez Working with Data (Utilisation des données).

Voilà ! Vous disposez d’un composant Web Lightning qui utilise lightning-record-form pour créer des enregistrements de compte sur la page Working with Data. L’utilisation de Lightning Data Service est une façon d’exploiter les données Salesforce dans les composants Web Lightning. Dans l’unité suivante, vous apprendrez à exploiter les données avec Apex.

Ressources

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires