Skip to main content

Découverte des actions de composants Web Lightning.

Objectifs de formation

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

  • Créer un composant Web Lightning et une action pour remplir les champs selon les entrées de l’utilisateur et fournir des messages de commentaire.
  • Commencer la migration de vos fonctionnalités de bouton JavaScript personnalisées vers des alternatives compatibles Lightning.
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.

Actions des composants Web Lightning : intelligentes, rapides et flexibles

Nous vous avons présenté plusieurs solutions qui fonctionnent à la fois dans Lightning Experience et Salesforce Classic et remplacent à merveille les boutons JavaScript. Mais nous reconnaissons que ces solutions déclaratives et de programmation ne traitent pas tous les scénarios d’utilisation. La bonne nouvelle, c’est qu’il y a une chose qui en traite de nombreux autres. Introduction d’actions de composants Web Lightning : actions rapides invoquant des composants Web Lightning.

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 et les composants Aura peuvent coexister et interagir sur une page. Ce contenu aborde les composants Web Lightning.

Les actions de composants Web Lightning reposent sur l’infrastructure de composants Web Lightning existante. Vous pouvez aisément convertir vos composants Web Lightning existants en actions afin de les utiliser dans Lightning Experience.

Pour qu’un composant Web Lightning soit invocable en tant qu’action, ajoutez lightning__RecordAction comme cible dans le fichier XML de configuration des métadonnées du composant et spécifiez le type d’action (actionType) pour les configurations cible (targetConfigs). Pour que l’action apparaisse dans la fenêtre modale définie par Salesforce, définissez actionType sur ScreenAction. Pour exécuter l’action sans fenêtre modale ou pour définir une fenêtre modale personnalisée, définissez actionType sur Action.

Une autre propriété utile pour les actions de composants Web Lightning est recordId, qui fournit le contexte d’enregistrement au composant lorsqu’il est invoqué à partir d’une page d’enregistrement Lightning. Pour accéder aux données ou métadonnées d’un enregistrement, utilisez le décorateur @api dans la classe JavaScript du composant pour créer une propriété recordId publique.

Remarque

Si vous n’avez jamais conçu de composants Web Lightning auparavant, rendez-vous dans le Centre de développement composants Web Lightning (LWC), menez à bien le projet Premiers pas avec les composants Web Lightning, puis suivez le module Bases des composants Web Lightning.

Plongeons-nous dans les actions de composants Web Lightning. Nous abordons ensuite certaines fonctionnalités des boutons JavaScript qui peuvent être traitées avec des actions de composants Web Lightning, comme le remplissage de champs en fonction des entrées utilisateur et la fourniture de messages de commentaires lors de la saisie des données.

Remplir les champs en fonction des entrées utilisateur et afficher des messages de commentaire à l’attention de ces utilisateurs

Supposons que vous utilisez des boutons JavaScript pour valider ou manipuler des données et afficher des commentaires ou instructions à l’attention de vos utilisateurs lorsqu’ils travaillent avec les enregistrements. Voici un exemple montrant comment vous pouvez facilement valider ou manipuler des données dans un composant Web Lightning avant que vos utilisateurs ne créent ou mettent à jour un enregistrement.

Dans notre exemple d’organisation, nous avons créé un objet nommé Case Study (Étude de cas), que nous utilisons pour suivre différents projets de recherche. Nous disposons également d’un objet personnalisé Test User (Utilisateur test) afin de pouvoir ajouter de nouveaux utilisateurs test aux études de cas et enregistrer leur nom et leur adresse e-mail. L’adresse e-mail étant notre principale méthode de contact, nous voulons nous assurer qu’elle est correctement saisie. Nous voulons aussi créer un pseudonyme spécifique à chacun de ces utilisateurs test de l’étude de cas afin qu’ils puissent rester anonymes.

Nous allons créer une action de composant Web Lightning qui affiche les champs de nom et d’adresse e-mail, valide l’adresse e-mail et utilise le prénom et un nombre aléatoire pour créer automatiquement le pseudonyme.

Voici le code du composant invoqué par cette action de composant Web Lightning.

  • createUser.html : il s’agit de la structure du composant Web Lightning que vous voyez lorsque vous ouvrez l’action. Il contient l’implémentation de l’interface utilisateur qui, quant à elle, inclut les champs texte, les boutons, le nom de l’action, etc.
  • createUser.js : il s’agit du contrôleur qui surveille le composant et tout événement d’interface utilisateur qui a lieu, comme le cycle de vie de rendu, la saisie de texte et les clics sur des boutons. Les méthodes JavaScript définissent ce qu’il faut faire des entrées, données, événements, changements d’état, etc. pour faire fonctionner votre composant.
  • createUser.js-meta.xml : il s’agit du code qui définit les métadonnées du composant, notamment la configuration de conception des composants destinés à être utilisés dans Lightning Experience.

createUser.html

<template>
 <lightning-quick-action-panel header="Add Test User to Case Study">
     <lightning-input
             type="text"
             data-field="firstName"
             label="User's First Name"
             onblur={updateNickName}
             required
     ></lightning-input>
     <lightning-input
             type="text"
             data-field="lastName"
             label="User's Last Name"
             required
     ></lightning-input>
     <lightning-input
             type="text"
             data-field="nickName"
             label="Nickname"
             required
     ></lightning-input>
     <lightning-input
             type="email"
             data-field="email"
             label="User's Email"
             onblur={handleEmailBlur}
             required
     ></lightning-input>
     <lightning-input
             type="password"
             data-field="password"
             label="User's Password"
             onblur={handlePasswordBlur}
             required
     ></lightning-input>
     <div slot="footer">
         <lightning-button
                 variant="neutral"
                 label="Cancel"
                 onclick={handleCancel}
         ></lightning-button>
         <lightning-button
                 variant="brand"
                 label="Save User"
                 onclick={handleSave}
         ></lightning-button>
     </div>
 </lightning-quick-action-panel>
</template>

createUser.js

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
import { createRecord } from 'lightning/uiRecordApi';
import TEST_USER_OBJECT from '@salesforce/schema/Test_User__c';
import NAME_FIELD from '@salesforce/schema/Test_User__c.Name';
import PASSWORD_FIELD from '@salesforce/schema/Test_User__c.Password__c';
import EMAIL_FIELD from '@salesforce/schema/Test_User__c.Email__c';
import NICKNAME_FIELD from '@salesforce/schema/Test_User__c.Nickname__c';
import CASE_STUDY_FIELD from '@salesforce/schema/Test_User__c.Case_Study__c';
export default class CreateUser extends LightningElement {
   @api recordId;
   async handleSave() {
       // query form elements
       const firstNameEl = this.template.querySelector('[data-field="firstName"]');
       const lastNameEl = this.template.querySelector('[data-field="lastName"]');
       const nickNameEl = this.template.querySelector('[data-field="nickName"]');
       const emailEl = this.template.querySelector('[data-field="email"]');
       const passwordEl = this.template.querySelector('[data-field="password"]');
       // check for errors on form elements (custom or otherwise)
       const isFirstNameValid = firstNameEl.reportValidity();
       const isLastNameValid = lastNameEl.reportValidity();
       const isNickNameValid = nickNameEl.reportValidity();
       const isPasswordValid = passwordEl.reportValidity();
       const isEmailValid = emailEl.reportValidity();
       if(!isFirstNameValid || !isLastNameValid || !isNickNameValid || !isPasswordValid || !isEmailValid) {
           return;
       }
       const recordInput = {
           apiName: TEST_USER_OBJECT.objectApiName,
           fields: {
               [NAME_FIELD.fieldApiName]: `${firstNameEl.value} ${lastNameEl.value}`,
               [PASSWORD_FIELD.fieldApiName]: passwordEl.value,
               [EMAIL_FIELD.fieldApiName]: emailEl.value,
               [NICKNAME_FIELD.fieldApiName]: nickNameEl.value,
               [CASE_STUDY_FIELD.fieldApiName]: this.recordId,
           }
       };
       try {
           await createRecord(recordInput);
           this.dispatchEvent(
               new ShowToastEvent({
                   title: 'Success!',
                   message: 'The test user has been created.',
                   variant: 'success'
               })
           );
           this.dispatchEvent(new CloseActionScreenEvent());
       } catch (error) {
           new ShowToastEvent({
               title: 'Error creating the test user, try again...',
               message: error.body.message,
               variant: 'error'
           });
       }
   }
   updateNickName() {
       const firstName = this.template.querySelector('[data-field="firstName"]').value;
       const nickNameEl = this.template.querySelector('[data-field="nickName"]');
       if(firstName && !nickNameEl.value) {
           const today = new Date();
           nickNameEl.value = firstName + today.valueOf(today)
       }
   }
   handleCancel() {
       this.dispatchEvent(new CloseActionScreenEvent());
   }
   handlePasswordBlur() {
       const passwordEl = this.template.querySelector('[data-field="password"]');
       // clear custom errors
       passwordEl.setCustomValidity('');
       this.validatePassword(passwordEl);
   }
   validatePassword(input) {
       // check lightning-input validity
       if(input.reportValidity()) {
           // perform custom validation
           const value = input.value;
           if (value === undefined) {
               input.setCustomValidity('You must enter a password.');
           } else if (value.length < 7) {
               input.setCustomValidity('The password is the wrong length (must be >= 7): ' + value.length);
           } else if (value.length > 15) {
               input.setCustomValidity('The password is the wrong length (must be <= 15): ' + value.length);
           } else if (value.search(/[0-9]+/) === -1) {
               input.setCustomValidity('The password must contain at least one number.');
           } else if (value.search(/[a-zA-Z]+/) === -1) {
               input.setCustomValidity('The password must contain at least one letter.');
           }
           // display custom validation errors (if any)
           input.reportValidity();
       }
   }
   handleEmailBlur() {
       const emailEl = this.template.querySelector('[data-field="email"]');
       // clear Custom Errors
       emailEl.setCustomValidity('');
       this.validateEmail(emailEl);
   }
   validateEmail(input) {
       // check lightning-input validity
       if (input.reportValidity()) {
           const value = input.value;
           if (!/@gmail\.com$/.test(value)) {
               input.setCustomValidity('Email must be a Gmail account.');
           }
           // display custom validation errors (if any)
           input.reportValidity();
       }
   }
}

createUser.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>57.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__RecordAction</target>
   </targets>
   <targetConfigs>
       <targetConfig targets="lightning__RecordAction">
           <actionType>ScreenAction</actionType>
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

Création de l’action de composant Web Lightning

Une fois le composant Web Lightning créé, nous l’affectons à une action. Dans les paramètres de gestion de l’objet Étude de cas, nous nous rendons dans Boutons, liens et actions, nous cliquons sur Nouvelle Action, puis nous configurons l’action avec les paramètres suivants :

Champ Valeur

Type d’action

Lightning Web Component (Composant Web Lightning)

Composant Web Lightning

c:createUser

Étiquette

Create Test User (Créer un utilisateur test)

Nom

Create_Test_User (Créer_un_utilisateur_test)

Ensuite, nous ajoutons notre nouvelle action de composant Web Lightning à la présentation de la page Case Study (Étude de cas). Lorsque les utilisateurs invoquent cette action de composant Web Lightning depuis une page d’enregistrement d’étude de cas, elle apparaît.

Ajouter une action User LWC dans Lightning Experience.

Remarque

Les actions de composants Web Lightning ne sont pas disponibles sur l’application mobile Salesforce. Pour créer une action disponible sur l’application mobile Salesforce, utilisez l’outil Modèle de programmation Aura pour créer une action de composant Lightning.

Les actions de composant Web Lightning sont l’avenir des actions de programmation dans Lightning Experience. Nous espérons que vous commencez à envisager cet ensemble de solutions comme la meilleure alternative aux boutons JavaScript.

Et si vous dépendez d’applications partenaires utilisant des boutons JavaScript, vous serez ravi d’apprendre qu’un grand nombre de nos partenaires ont déjà commencé la migration et la mise à niveau de leurs applications vers Lightning. Vous trouverez davantage d’applications mises à jour pour Lightning Experience via AppExchange.

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