Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Premiers pas avec les composants Aura

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Décrire le framework de composants Lightning et son utilisation.
  • Énumérer quatre différences clés entre les composants Lightning et d’autres frameworks d’application Web.
  • Énumérer au moins cinq façons d’utiliser les composants Lightning pour personnaliser Salesforce.

Premiers pas avec les composants Lightning

Oui ! Vous êtes encore là ! Bienvenue à la fête des composants Lightning - car oui, c’est une fête. Quand nous disons que les composants Lightning sont la technologie de développement d’application la plus puissante et la plus prometteuse que nous ayons conçue depuis des années, nous sommes ambitieux. Et nous savons que c’est vrai, car nous avons conçu l’application Salesforce et Lightning Experience grâce à eux. Nous sommes convaincus qu’une fois que vous aurez découvert les composants Lightning, vous serez aussi enthousiaste que nous.

Qu’est-ce que l’infrastructure de composants Lightning ?

Le framework des composants Lightning est un framework d’interface utilisateur qui permet de développer des applications Web pour appareils mobiles et ordinateurs de bureau. Un framework moderne qui permet de créer des applications monopages à interface utilisateur réactive et dynamique pour les applications Lightning Platform. Elle repose sur du JavaScript côté client et de l’Apex côté serveur.

De nombreux termes techniques. Essayons de reformuler avec des termes plus classiques.

Une fois encore, examinons l’architecture globale.

« L’infrastructure de composants Lightning est une infrastructure permettant de développer des applications Web. » Plus simple à comprendre. Un framework d’application est un ensemble de code et de services qui facilitent la création de vos propres applications personnalisées, sans écrire l’intégralité du code vous-même. Il existe de nombreux frameworks d’application Web, notamment Ruby on Rails, Grails, AngularJS, Django, CakePHP, etc. Nous avons même la nôtre, Visualforce, que nos clients connaissent bien et apprécient. Nous pensons que les composants Lightning ont quelque chose de spécial. Nous expliquerons cela au fil de notre progression, et espérons qu’à la fin de ce module, vous en conviendrez !

« Applications Web pour appareils mobiles et de bureau. » Une fois encore, cela semble facile à comprendre. Mais avez-vous remarqué l’ordre de ces termes ? Les composants Lightning sont nés et ont été utilisés pour créer la plate-forme Salesforce pour applications mobiles. Le mobile est au cœur de l’infrastructure de composants Lightning. Le développement d’applications fonctionnant à la fois sur appareils mobiles et de bureau est donc bien plus simple qu’avec de nombreuses autres infrastructures.

« C’est un framework moderne permettant de créer des applications monopages. » Bien, maintenant vous êtes un peu perdu. « Moderne » n’est qu’un terme marketing, non ? En quoi consistent ces « applications monopages » ?

Nous ne pensons pas que le terme moderne ne soit « qu’un » terme marketing. Dans le module Développement pour Lightning Experience, nous abordons en long et en large la manière dont les applications Web ont évolué, passant de simples expériences « page par page » à des applications très réactives ayant le même fonctionnement et la même interactivité que les applications natives, que ce soit sur appareils de bureau ou plus particulièrement sur les appareils mobiles. Pour offrir ces expériences utilisateur interactives, les applications Web modernes sont conçues comme un ensemble d'éléments étroitement liés, chargés à partir d’une seule URL, puis exécutés en continu pendant l’utilisation. La conception de ces applications monopages est très similaire à celle des applications natives, mais la plomberie est gérée par un framework. Une infrastructure comme l’infrastructure de composants Lightning.

« Interfaces utilisateur réactives et dynamiques pour les applications Lightning Platform » est une simple mise en œuvre de ces idées dans les applications que vous concevez en vous appuyant sur Salesforce. Enfin, la phrase « Elle repose sur JavaScript côté client et Apex côté serveur » est très claire, même s’il manque les détails précis d’implémentation. Nous aborderons bientôt ce sujet !

Exemple de composant Aura

Tout cela fait beaucoup de blabla et pas beaucoup de code. Examinons un vrai composant Lightning utilisant le modèle de programmation de composants Aura et voyons de quoi il s’agit. Pour commencer, voici ce à quoi le rendu du composant affiché à l’écran ressemblera :

Composant Lightning : pas très impressionnant, mais assez intéressant en coulisses

On ne dirait pas, mais il se passe beaucoup de choses dans ce composant. Voici son code ; il provient d’un composant que nous examinerons en détails plus tard.

<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>
    <!-- Color the item green if the expense is reimbursed -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme_success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading_medium slds-p-horizontal_small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal_small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around_small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Avant même de savoir quoi que ce soit sur les composants Aura, vous pouvez tout de même remarquer quelques points dans cet exemple. Tout d’abord, il s’agit de balisage XML alliant des balises HTML statiques à des balises de composants Aura personnalisées, telles que la balise <aura:component>, en tête de cet exemple. Si vous avez déjà travaillé avec Visualforce, le format de cette balise vous sera familier : namespace: tagName. Comme vous le verrez plus tard, les composants intégrés peuvent provenir de divers espaces de noms différents, notamment de aura: (comme ici), force:, lightning: ou ui:.

Vous avez peut-être remarqué l’existence de composants tels que <lightning:input> et <lightning:formattedNumber>. Une fois encore, les développeurs Visualforce connaissent ce système. Si ce n'est pas votre cas, retenez que vous utilisez le composant d'entrée pour collecter l'entrée de l'utilisateur, et les autres composants pour afficher des valeurs en lecture seule. Voici d'autres composants soulignés dans l'extrait.

  • <lightning:card> crée un conteneur pour un groupe d’informations.
  • <lightning:formattedDateTime> affiche la date et l’heure mises en forme.
  • <lightning:relativeDateTime> affiche la différence relative entre l’heure actuelle et l’heure fournie.
Remarque

Remarque

Qu'est-ce qu'un espace de noms ? L'espace de noms lightning fournit de nombreux composants d'interface utilisateur qui utilisent le système de conception Salesforce Lightning Design System, ou SLDS, prêt à l'emploi. Nous recommandons d'utiliser les composants dans l'espace de noms lightning dans la mesure du possible. Par exemple, utilisez <lightning:input> au lieu de <ui:inputText>, <ui:inputNumber>, et ainsi de suite. Vous avez accès à la plupart des types d'entrée, notamment texte, numéro, e-mail, et bien d'autres.

Nous aborderons le reste des composants dans les prochaines unités. La dernière chose à remarquer est l’utilisation du HTML statique avec un certain nombre de noms de classe CSS commençant par « slds ». Nous allons utiliser le SLDS pour appliquer un style à nos composants, sans explorer en détail le système de conception dans ce module. Nous souhaitons seulement présenter des exemples pratiques.

Bon, le balisage des composants Aura est du XML, c’est bien. Mais n’avions-nous pas parlé de JavaScript un peu plus tôt ? Notez l'attribut onchange="{!c.clickReimbursed}" dans le commutateur, qui correspond à une case à cocher avec un curseur vers la droite et vers la gauche pour représenter l'activation et la désactivation de valeurs. Il signifie « lorsque cette valeur est modifiée, appeler la fonction clickReimbursed du contrôleur ». Examinons le code qui y est joint.

({
    clickReimbursed: function(component, event, helper) {
        let expense = component.get("v.expense");
        let updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

C’est le contrôleur côté client du composant, développé en JavaScript. La fonction clickReimbursed du contrôleur du composant correspond à l’attribut onchange="{!c.clickReimbursed}" de la case à cocher du balisage du composant.

Dans le modèle de programmation de composant Aura, un composant est un paquet de code. Il peut inclure du balisage comme l’exemple précédent, dans la « ressource .cmp », mais aussi du code JavaScript, dans un certain nombre de ressources associées. Les ressources concernées sont « autoconnectées » l’une à l’autre, et l’ensemble constitue le paquet de composants.

Nous entrerons dans les détails dans la prochaine unité, mais pour le moment, vous avez découvert les deux types de codes de composant Aura les plus importants.

À propos de Visualforce

Nos clients nous posent souvent la question suivante : « Quel est le meilleur choix, les composants Lightning ou Visualforce ? » La réponse est courte : les deux !

Visualforce et les composants Lightning ont tous deux leurs points forts. Ils sont abordés dans le module Développement pour Lightning Experience, où vous pourrez trouver la réponse longue concernant les utilisations appropriées de l’un et l’autre. Ici, optons pour un juste milieu.

Tout d’abord, sachez ceci : Visualforce sera toujours présent. Votre code Visualforce s’exécutera sous Salesforce pendant encore bien longtemps. Inutile de convertir vos applications Visualforce existantes et d’arrêter de créer des applications avec Visualforce.

Vous pouvez toutefois le faire dans certains cas. Par exemple, Visualforce a été créé avant l’avènement des applications mobiles. Il est possible de développer des applications mobiles avec Visualforce, mais aucun des composants intégrés n’est particulièrement adapté au mobile. Cela signifie que vous devez écrire plus de code. Cependant, les composants Lightning sont optimisés pour être efficaces sur les appareils mobiles.

Une fois encore, nous abordons de nombreux points dans le module Développement pour Lightning Experience. Si vous avez encore des questions concernant Visualforce et les composants Lightning, ce module vous apportera des réponses.

Quid d’AngularJS, React et autres frameworks JavaScript ?

Une autre question est souvent posée : « Quelle est la différence entre l’infrastructure de composants Lightning et MonInfrastructurePréférée ? », cette dernière étant une autre infrastructure d’application Web JavaScript moderne telle que AngularJS, React ou Ember.

Tous ces frameworks sont très bien ! De nombreux développeurs les connaissent et il existe de multiples nombreuses ressources pour les découvrir. Vous serez peut-être surpris d’apprendre que nous pensons que ces frameworks constituent un excellent moyen de concevoir des applications Lightning Platform !

Nous vous recommandons de les utiliser avec Visualforce, grâce à ce que nous appelons une page de conteneur, et en empaquetant le framework de votre choix et le code de l’application dans des ressources statiques. En utilisant une page de conteneur vide, vous n’aurez plus à vous inquiéter de Visualforce, et vous pourrez profiter de toutes les capacités du framework de votre choix.

Bien qu’il soit possible d’utiliser des infrastructures JavaScript tierces avec les composants Lightning, le processus est un peu fastidieux. L’infrastructure de composants Lightning n’a pas la notion de page vierge et a des exigences particulières, par exemple, sur la façon dont l’accès aux données est effectué, ainsi que des exigences de sécurité plutôt spécifiques.

Et honnêtement, les fonctionnalités de l’infrastructure de composants Lightning et celles de la plupart des infrastructures modernes se recoupent un peu. Bien que le style ou les spécificités puissent varier, les fonctionnalités fournies sont conceptuellement suffisamment similaires pour que vous puissiez efficacement exécuter les deux. Mais vous ne pourrez pas travailler facilement ou efficacement en utilisant les deux en même temps.

Un autre point à prendre en compte : les frameworks généralistes comme AngularJS sont conçus pour être indépendants de la plate-forme sur laquelle ils sont exécutés, en particulier pour les services de données. À l’inverse, l’infrastructure de composants Lightning est conçue pour se connecter nativement aux services fournis par Salesforce et la plate-forme Lightning. Selon vous, quelle approche vous permettra de concevoir des applications le plus rapidement ?

Remarque

Remarque

Nous évoquons ici uniquement les frameworks d’application. Si vous avez une bibliothèque cartographique ou graphique JavaScript favorite, ou d’autres outils spéciaux répondant à certaines exigences de sécurité, les bibliothèques JavaScript modernes fonctionnent généralement bien.

Bien, assez parlé ! Faisons une visite rapide et graphique des nombreux emplacements dans lesquels vous pouvez déployer des applications de composant Lightning. Nous allons aussi explorer la partie intéressante : le code.

Où utiliser les composants Lightning ?

Vous pouvez utiliser des composants Lightning pour personnaliser votre organisation Salesforce de nombreuses façons. Ce n’est pas tout ! Vous pouvez utiliser des composants Lightning pour créer des applications autonomes hébergées sur Salesforce. Vous pouvez même créer des applications hébergées sur d’autres plateformes, notamment en les intégrant à des applications de ces plateformes.

Ajouter des applications au Lanceur d’application Lightning Experience

Vos applications de composant Lightning et vos onglets personnalisés sont disponibles via le lanceur d’application, auquel vous pouvez accéder en cliquant sur Icône Lanceur d’application dans la barre de navigation, puis en sélectionnant Afficher tout pour accéder à la vue complète.

Ajouter un composant au Lanceur d’application

Cliquez sur une application personnalisée (1) pour l’activer. Les éléments de l’écran d’application s’affichent dans la barre de navigation, notamment tous les onglets à composants Lightning que vous avez ajoutés à l’application. Vous devez ajouter vos composants aux onglets afin qu’ils soient accessibles dans le lanceur d’application. Les onglets à composants Lightning qui ne sont pas dans des applications se trouvent dans Tous les éléments (2).

Ajouter des applications à la navigation Lightning Experience et l’application Salesforce

Comme décrit dans l’exemple précédent, vous pouvez ajouter des onglets à composants Lightning à une application puis les afficher en tant qu’éléments de la barre de navigation de l’application.

Ajouter des composants intégrés à la navigation principale

Création de composants de type glisser/déposer pour le générateur d’applications Lightning et le générateur d’expérience

Créez des interfaces utilisateur personnalisées en employant vos propres composants Lightning, ou ceux que vous avez installés via AppExchange, pour appareils mobiles et de bureau.

Créer des composants Glisser/Déposer pour une application Lightning et le générateur d’expérience

Ajouter des composants Lightning à des pages Lightning

Une page Lightning est une présentation personnalisée qui permet de créer des pages spécifiques à utiliser dans l'application mobile Salesforce ou dans Lightning Experience. Vous pouvez utiliser une page Lightning pour créer une page d’accueil d’application et y ajouter votre composant Lightning favori, par exemple l’application Expenses que nous allons créer dans le cadre de ce module.

Ajouter des composants aux pages d’enregistrements Lightning Experience

Vous l’aurez deviné en lisant le titre, vous pouvez personnaliser les pages d’enregistrement Lightning Experience en ajoutant un composant Lightning.

Vous l’aurez deviné en lisant le titre, personnalisez les pages d’enregistrement Lightning Experience en ajoutant un composant Lightning

Lancer un composant Lightning en tant qu’action rapide

Créez une action utilisant un composant Lightning, puis ajoutez-la à une page d’objet pour la rendre instantanément accessible à partir d’une page d’enregistrement.

Action rapide de composant Lightning sur une page d’enregistrement

Remplacer des actions standard par des composants Lightning

Remplacez une action par un composant Lightning, ce qui est quasi similaire au remplacement d'une action par une page Visualforce.

Remplacer des actions par des composants Lightning

Créer des applications autonomes

Une application autonome comprend des composants utilisant vos données Salesforce et pouvant être employés indépendamment de l’environnement Salesforce standard.

Les applications autonomes sont des composants utilisant des données Salesforce et pouvant être employées indépendamment de l’application Salesforce

Exécuter des applications à composants Lightning sur des pages Visualforce

Ajoutez des composants Lightning à vos pages Visualforce pour combiner des fonctionnalités que vous avez conçues avec les deux. Implémentez une nouvelle fonctionnalité en utilisant des composants Lightning, puis utilisez-la sur vos pages Visualforce.

Exécuter des applications à composants Lightning sur d’autres plateformes avec Lightning Out

Lightning Out est une fonctionnalité prolongeant les applications Lightning. Il joue le rôle de pont pour faire émerger les composants Lightning dans n’importe quel conteneur Web distant. Cela signifie que vous pouvez utiliser vos composants Lightning sur un site externe (par exemple Sharepoint ou SAP), ou ailleurs sur la plate-forme, par exemple sur Heroku.

Lightning Out dans une boîte de dialogue Heroku

Personnaliser les écrans de flux

Créez un flux pour guider vos utilisateurs tout au long d’un processus métier. Par défaut, vous pouvez ajouter des champs simples comme des entrées ou des boutons radio à un écran de flux. Mais avec un composant Lightning personnalisé, vous pouvez personnaliser entièrement l’aspect et les fonctionnalités de votre écran.Écran de flux montrant un composant Lightning personnalisé