Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Création d’un composant Aura Hello World

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 pour les composants Web Lightning et le modèle pour les composants Aura d’origine. Les composants Web Lightning et les composants Aura peuvent coexister et interagir sur une page. Ce contenu concerne les composants Aura.

Pour plus d’informations sur les composants Web Lightning, consultez le parcours Élaboration de composants Web Lightning.

Objectifs d’apprentissage

Dans ce projet, vous apprendrez les compétences suivantes :

  • Développer un composant Aura simple
  • Styler un composant grâce à Salesforce Lightning Design System.
  • Ajouter une fonctionnalité à l'aide d'un contrôleur JavaScript côté client.
  • Mettre en œuvre une liaison de données bidirectionnelle d’attributs dans un composant Aura
  • Récupérer et afficher des données basées sur des critères de recherche.
  • Encapsuler une fonctionnalité dans des composants enfant.
  • Utiliser des événements pour une communication inter-composant.

Introduction

Ce projet vous apprendra à concevoir et à personnaliser des pages avec des composants Aura.

Les composants Aura sont les blocs de construction de Lightning Experience. Ils sont modulaires : un composant peut être incorporé dans de nombreuses pages Lightning – ou, comme nous étions sur le point de le faire, le même composant peut apparaître plusieurs fois sur une page, mais effectuer différentes tâches.

Pour apprendre à concevoir un composant Aura, vous devez commencer quelque part. Comme tout développeur vous le dira, ce quelque part s'appelle Hello World. Honnêtement, il s’agit du composant le plus stupide que vous ayez jamais créé, mais il vous offrira l’opportunité d’explorer les bases de la conception de composants Aura.

Création d'un Trailhead Playground, installation du package et importation de données

Commençons par l’ouverture de votre Trailhead Playground et l’installation d’un package avec l'application et le code sur lequel nous travaillerons dans ce projet. Tout d’abord, faites défiler l'écran jusqu’au bas de cette page et cliquez sur Launch (Lancer). Si vous voyez un onglet dans votre organisation intitulé Installer un package, c’est parfait ! Suivez les étapes ci-dessous. 

Sinon, depuis le lanceur d’application (App Launcher (Lanceur d’application)), cherchez et sélectionnez Playground Starter (Démarreur de Playground) et laissez-vous guider. Si vous ne voyez pas l’application Playground Starter (Démarreur de Playground), copiez ce lien d’installation de package et consultez Install a Package or App to Complete a Trailhead Challenge (Installer un package ou une application pour relever un défi Trailhead) dans l’aide de Trailhead.

  1. Cliquez sur l’onglet Install a Package (Installer un package).
  2. Copiez 04t6A000000SG0F dans le champ.
  3. Cliquez sur Install (Installer).
  4. Sélectionnez Install for All Users (Installer pour tous les utilisateurs), puis cliquez sur Install (Installer).

Une fois l’installation de l’application terminée, une page de confirmation s’affiche et vous recevez un e-mail à l’adresse associée à votre Trailhead Playground. Ensuite, initialisez les données échantillon dans votre Trailhead Playground. 

  1. Une fois l’installation terminée, cliquez sur Done (Terminé), puis ouvrez le lanceur d’application en cliquant sur App Launcher (Lanceur d’application) dans la barre de navigation.
  2. Sélectionnez l'application Dreamhouse Lightning.
  3. Cliquez sur Data Import (Importation des données), puis sur Initialize Sample Data (Initialiser les données échantillon). Selon la taille de votre écran, l'onglet Importation de données peut se trouver sous More (Plus) dans le menu des onglets.

Partie 1 : HelloWorld

Dans cet ensemble d’instructions, vous allez utiliser la Developer Console pour créer le shell d’un composant Aura nommé HelloWorld.cmp.

Lors de la création de ce composant, les cinq options suivantes vous sont proposées pour le type de composant que vous souhaitez créer.

  • Onglet Lightning : indique que le composant peut être utilisé comme un onglet dans Lightning Experience et l’application mobile Salesforce.
  • Page Lightning : Permet de placer le composant sur une page d'accueil aussi bien que sur une page d'enregistrement.
  • Page d'enregistrement Lightning : Comme son nom l'indique, permet d'utiliser le composant sur une page d'enregistrement d'objet.
  • Page Communautés Lightning : Permet d'utiliser le composant sur une page Communautés Lightning (comme vous l'aviez deviné).
  • Action rapide Lightning : Permet d'utiliser le composant comme action rapide dans Lightning Experience.

Pour cet exercice, vous allez sélectionner la page d'enregistrement Lightning.

Un composant Aura comporte un paquet de fichiers. Par exemple, le fichier de composant, ou fichier .cmp, contient le balisage HTML du composant. Les autres fichiers du paquet comprennent :

  • Controller : Il s'agit d'un fichier JavaScript qui sera utilisé pour ajouter des fonctionnalités ou composants.
  • Helper : C’est aussi un fichier JavaScript, utilisé pour les fonctions JavaScript partagées.
  • Style : Il s'agit d'un fichier CSS dans lequel vous pouvez écrire votre propre CSS pour votre composant.
  • Documentation : Ce fichier vous permet d'écrire la documentation de votre composant qui s'affichera dans les pages d'aide de votre organisation.
  • Design : Le fichier le plus important pour les développeurs, car il vous permet d'exposer des paramètres de votre composant dans le générateur d'applications.
  • SVG : Ce graphique vectoriel adaptable (Scalable Vector Graphic) est l'icône de votre composant dans la liste des composants du générateur d'applications.

Vous trouverez davantage d’informations sur les paquets et les composants Aura ici.

  1. Cliquez sur l'icône Setup (Configurer) Configuration dans le coin supérieur droit et choisissez Developer Console (Console du développeur).
  2. Dans la Developer Console, sélectionnez File (Fichier) > New (Nouveau) > Lightning Component (Composant Lightning). Vous remarquerez que la boîte de dialogue résultante indique New Lightning Bundle (Nouveau paquet Lightning) et non composant. C’est effectivement plus précis car un composant Aura est un paquet de fichiers.
  3. Nommez le composant : HelloWorld
  4. Sélectionnez Lightning Record Page (Page d'enregistrement Lightning) et cliquez sur Submit (Envoyer).

  5. Félicitations ! Vous venez de créer un composant Aura qui ne fait littéralement rien ! Cependant, il nous offre l'opportunité d'aborder quelques questions, notamment : la mention <aura:composant>, qui le distingue d’un composant Web Lightning. Aura est l’infrastructure open source sur laquelle Salesforce a développé l’infrastructure de composants Lightning.


    Notez l'attribut implements=. Il s'agit de la liste des interfaces qu'utilise le composant. Pour ce composant, vous avez coché la case Page d'enregistrement Lightning. En code, nous vous exprimons cela avec l'interface flexipage:availableForRecordHome.


    Lorsqu'un composant est utilisé sur une page d'enregistrement, il doit parfois aussi savoir quel enregistrement est affiché. Cela s'exprime par force:hasRecordId, ajouté automatiquement lorsque vous choisissez la page d'enregistrement Lightning.


  6. Saisissez Hello World à l’intérieur des balises <aura:component> … </aura:component>.
  7. Enregistrez le fichier.

Partie 2 : Ajout du composant à une page

Lors de la conception d’un composant Aura, il existe deux manières d’obtenir un aperçu du composant : (a) ajouter le composant à une application Lightning ou (b) mettre le composant sur une page. Gardez à l'esprit qu'une application Lightning est une application autonome et non une application dans Lightning Experience. Pour les étapes suivantes, vous allez mettre en œuvre l'option B en ajoutant votre composant HelloWorld à la page Propriété.

  1. Dans votre organisation, ouvrez une page d’enregistrement de propriété si vous ne l'avez pas déjà fait.
  2. Cliquez sur Configuration et sélectionnez Edit Page (Modifier la page).
  3. Dans Composants personnalisés, recherchez votre composant HelloWorld et faites-le glisser en haut de la colonne située à l'extrême droite.
  4. Cliquez sur Save (Enregistrer).
  5. Comme il s'agit de la première fois que nous modifiions la page standard Propriétés, nous devons activer la page mise à jour afin que nos utilisateurs puissent voir ce que nous avons fait. Cliquez sur Activate (Activer).
  6. Cliquez sur App Default (Paramètres par défaut de l'application) puis sur Assign as App Default (Attribuer par défaut pour l'application).
  7. Sélectionnez l’application Dreamhouse Lightning, puis cliquez sur Next (Suivant) et sur Save (Enregistrer).
  8. Cliquez sur Back (Retour) pour revenir à la page Propriétés. Et voilà ! Vous venez de créer votre premier composant Aura et l’avez ajouté à une page dans Lightning Experience. Mais il faut reconnaître que ce composant n'a pas beaucoup de sens. Faisons donc quelque chose de plus intéressant.

Partie 3 : Du style avec SLDS

À l'étape suivante, vous allez appliquer du style à votre composant. Les mécanismes de style sont fournis par Salesforce Lightning Design System (SLDS), qui facilite le développement d'applications conformes à l'apparence de Lightning Experience sans avoir à reproduire manuellement l’interface à l’aide d'une CSS personnalisée.

Découvrez en plus sur SLDS ici.

  1. Dans la Console du développeur, cliquez à nouveau sur le balisage du composant HelloWorld.
  2. Intégrez Hello World dans des balises <div>. Votre code doit se présenter comme suit :
  3. <div>Hello World</div>

  4. Passez au site SLDS et examinez la documentation suivante.
    1. Cliquez sur l'onglet Component Blueprints (Plans de composants).
    2. Accédez à Cards (Cartes) dans la colonne à l'extrême gauche.
    3. Accédez à « Base Card Structure (Structure de la carte de base) ». À quoi ça sert ?
  5. Revenez à la Developer Console, ajoutez class="slds-card" dans la balise <div>. Cliquez sur Save (Enregistrer).
  6. Rechargez la page Détail de propriété pour voir le nouveau style appliqué à votre composant.
  7. Vous pouvez consulter davantage d'options de style sur le site SLDS.
    1. Revenez au site SDLS.
    2. Cliquez sur le bouton Show Code (Afficher le code) dans la première section de code.
    3. Localisez class="slds-card__body slds-card__body_inner" appliqué à la dernière balise <div>.
    4. Ouvrez la section Utilitaires dans la navigation de gauche. Cliquez sur Padding (espacement). Examinez les exemples d'options de padding ; en particulier, nous allons utiliser : slds-p-top_medium.
  8. Ajoutez davantage d'options de style à votre composant.
    1. Dans la Developer Console, intégrez Hello World dans <div class="slds-card__body slds-card__body_inner">.
    2. Ajoutez slds-p-top_medium à la deuxième balise <div> afin que le code ressemble à ce qui suit : <div class="slds-card__body slds-card__body_inner slds-p-top_medium">.
  9. Enregistrez le fichier et actualisez la page Détails de propriété.

Lorsque vous travaillerez dans Lightning Experience, vous remarquerez peut-être que vos modifications ne sont pas actualisées. Cela est dû à la mise en cache sécurisée des données dans le navigateur. Suivez les étapes ci-après pour désactiver temporairement cette fonctionnalité dans votre Trailhead Playground lorsque vous tentez de gagner ce badge.

  1. Dans Setup (Configuration), saisissez Session dans la case de recherche rapide, puis sélectionnez Session Settings (Paramètres de session).
  2. Désélectionnez l’option Enable secure and persistent browser caching to improve performance (Activer la mise en cache du navigateur sécurisée et permanente pour améliorer les performances).
  3. Cliquez sur Save (Enregistrer).

Pour de meilleures performances, assurez-vous de réactiver cette fonctionnalité après avoir obtenu ce badge.

Partie 4 : Utilisation de la liaison de données

Ensuite, vous allez utiliser des attributs et des expressions pour mettre en place une liaison de données.

Une page Lightning Experience est rendue côté client, ce qui signifie que le composant et les données de Salesforce arrivent dans le navigateur sous forme de paquets séparés et qu'ils doivent être réunis par Lightning Framework.

Les données sont stockées dans <aura:attribute> pour que le composant puisse les utiliser. Chaque <aura:attribute> possède un nom que vous utilisez dans JavaScript pour récupérer les données. De plus, ces <aura:attributes> sont fortement typés.

Dans les composants Aura, nous utilisons {! } comme notation pour indiquer une expression. Les composants Aura utilisent également v, qui est ce qu’on appelle un value provider (fournisseur de valeur), pour indiquer que l’expression doit être évaluée dans la view (vue), un terme très chic pour parler du balisage du composant ou du fichier .cmp.

Vous trouverez davantage d'informations sur les attributs et les expressions ici.

  1. Dans la Console du développeur, remplacez le texte Hello World par Hello, {!v.greeting}!.
  2. À la ligne 2, ajoutez un attribut de type String, et affectez-lui la valeur par défaut « World ». La ligne 2 doit ressembler à : <aura:attribute name="greeting" type="String" default="World" />
  3. Enregistrez le composant et rechargez la page Détails de propriété.

Partie 5 : Ajout d'éléments de Formulaire

Au cours des étapes suivantes, vous allez ajouter et appliquer un style à un élément de formulaire <input> qui permet à un utilisateur de votre application d’envoyer son nom.

Découvrez en plus sur les éléments de formulaire ici.

  1. Ajoutez le champ d'entrée suivant sur une nouvelle ligne, en dessous de Hello {!v.greeting}.
  2. <input aura:id="myInput" type="text" />
    <button name="Mettre à jour" type="submit">Mettre à jour</button>

  3. Enregistrez le fichier et rechargez la page Détails de propriété.
  4. Passez au site SLDS et examinez la documentation suivante.
    1. Dans la section Plans des composants, recherchez Input. Notez la classe slds-input appliquée à la balise <input>.
    2. Recherchez Buttons (Boutons) dans la liste des Plans de composants Parcourez la documentation pour déterminer la fonctionnalité encodée par slds-button_brand.
    3. Recherchez Margin (marge) dans la section Utilitaires. Parcourez la documentation pour identifier la fonctionnalité encodée par slds-m-top_small.
  5. Revenez à la Developer Console, ajoutez class="slds-input" dans la balise <input>.
  6. Copiez class="slds-button slds-button_brand" à partir de l’échantillon de code et ajoutez-le à la balise <button>.
  7. Ajoutez slds-m-top_small à la liste des classes du bouton.
  8. Enregistrez le fichier et rechargez la page Détails de propriété.

Partie 6 : Utilisez un contrôleur JavaScript

Un contrôleur est une collection de codes qui définit le comportement de votre application lorsque « quelque chose survient », ce « quelque chose » pouvant être une entrée d'un utilisateur, une minuterie et autres événements, mises à jour de données, etc. Dans le jeu d'instructions suivant, vous allez utiliser un contrôleur JavaScript côté client pour que le bouton de mise à jour exécute une action lorsqu'on clique dessus.

Vous trouverez davantage d'informations sur les contrôleurs côté client ici.

  1. Ajoutez onclick="{!c.updateValue}" à la balise <button> dans la Developer Console.
  2. Enregistrez le fichier.
  3. Cliquez sur le bouton Controller (Contrôleur) à droite de la Console du développeur.
  4. Renommez la fonction de myAction en updateValue.
  5. Ajoutez ce qui suit à la fonction updateValue.
  6. var val = component.find("myInput").getElement().value;
    component.set("v.greeting", val);

  7. Enregistrez le fichier et rechargez la page Détails de propriété.
  8. Saisissez votre nom et cliquez sur le bouton Update (Mettre à jour).

Partie 7 : Compréhension de la liaison de données bidirectionnelle

Avec la liaison de données bidirectionnelle, les modifications apportées aux données au niveau du modèle de composant sont immédiatement et automatiquement répercutées dans la vue du composant et vice versa.

Dans ce cas, lorsqu'un utilisateur envoie son nom, l'application doit afficher une salutation personnalisée avec son nom. À l'origine, lorsque le composant HelloWorld est rendu, le champ de saisie, dont la valeur est déterminée par l'expression {!v.greeting}, prend sa valeur par défaut, « World ». Lorsque vous saisissez votre nom dans le champ de saisie, la valeur du champ de saisie définit l'expression {!v.greeting} et elle est répercutée dans la vue, ce qui provoque l'affichage de votre nom dans le message de salutations.

  1. Revenez à l'onglet Component (Composant).
  2. Supprimez class="slds-input" de la balise <input>.
  3. Dans la balise <input>, ajoutez lightning: au début la balise, avant input. Puis, ajoutez value="{!v.greeting}" à la fin de la balise afin d'obtenir :
  4. <lightning:input aura:id="myInput" type="text" value="{!v.greeting}" />

  5. Supprimez <button> du composant.
  6. Enregistrez le fichier et rechargez la page Détails de propriété.
  7. Saisissez votre nom dans le champ de saisie et regardez la magie à l'œuvre !

Ça ne marchez pas chez vous ? Votre composant HelloWorld terminé doit ressembler à ce qui suit.

HelloWorld.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="greeting" type="String" default="World"/>
    <div class="slds-card">
        <div class="slds-card__body slds-card__body_inner slds-p-top_medium">
            Hello, {!v.greeting}
            <lightning:input aura:id="myInput" type="text" value="{!v.greeting}"/>
        </div>
    </div>
</aura:component>

HelloWorldController.js

({
    updateValue : function(component, event, helper) {
        var val = component.find("myInput").getElement().value;
        component.set("v.greeting", val);
    }
})