Skip to main content

Création d’un composant Web Lightning « Hello World »

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.

Vidéo de démonstration Trail Together

Vous souhaitez être guidé pas à pas par un expert pendant que vous travaillez sur cette étape ? Regardez cette vidéo qui fait partie de la série Trail Together sur Trailhead Live.

(Ce clip commence à 11 min 49 s, au cas où vous voudriez revenir en arrière et regarder à nouveau le début de l’étape.)

Création d’un projet Salesforce DX

Maintenant que vous avez configuré votre environnement de développement, vous pouvez créer un composant Web Lightning simple.

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez SFDX.
  3. Sélectionnez SFDX: Create Project.
  4. Appuyez sur Enter (Entrée) pour accepter l’option standard.
  5. Saisissez HelloWorldLightningWebComponent (Composant Web Lightning Bonjour) comme nom de projet.
  6. Appuyez sur Entrée.
  7. Sélectionnez le dossier de destination du projet.
  8. Cliquez sur Create Project (Créer un projet). Vous devriez voir quelque chose qui ressemble à ceci comme configuration de base.
    Visual Studio Code avec le dossier HelloWorldLightningWebComponent créé
Remarque

Si vous recevez une invite d’autorisation « Do you trust the authors of the files in this folder? » (« Faites-vous confiance aux auteurs des fichiers de ce dossier ? »), sélectionnez Yes (Oui).

Autorisation de votre Trailhead Playground

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez SFDX.
  3. Sélectionnez SFDX: Authorize an Org.
  4. Appuyez sur Entrée pour accepter l’option URL de connexion par défaut du projet.
  5. Appuyez sur Entrée pour accepter l’alias par défaut.
    Cette action ouvre la connexion Salesforce dans une autre fenêtre de navigateur.
  6. Connectez-vous à l’aide de vos identifiants Trailhead Playground.
  7. Si vous êtes invité à autoriser l’accès, cliquez sur Allow (Autoriser).
    Boîte de dialogue d’autorisation de l’accès
  8. Une fois que vous vous êtes authentifié dans le navigateur, la CLI enregistre vos identifiants. Le message de réussite doit ressembler à ce qui suit :
    Message de réussite de l’autorisation d’une organisation

Création d’un composant Web Lightning

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez SFDX.
  3. Sélectionnez SFDX: Create Lightning Web Component (SFDX : Créer un composant Web Lightning).
  4. Saisissez helloWorld comme nom de nouveau composant.
  5. Appuyez sur Enter (Entrée) pour accepter le chemin par défaut force-app/main/default/lwc.
  6. Appuyez sur Entrée.
  7. Affichez les fichiers créés dans Visual Studio Code.
    Hiérarchie des fichiers de composants Web Lightning dans Visual Studio Code
  8. Copiez et collez le code suivant dans le fichier HTML helloWorld.html.
    <template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
    </div>
  </lightning-card>
</template>
  9. Enregistrez le fichier.
  10. Copiez et collez le code suivant dans le fichier JavaScript helloWorld.js.
    import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
        greeting = 'World';
        changeHandler(event) {
        this.greeting = event.target.value;
        }
}
  11. Enregistrez le fichier.
  12. Copiez et collez le code suivant dans le fichier XML helloWorld.js-meta.xml.
    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
  13. Enregistrez le fichier.

Déploiement sur votre Trailhead Playground

  1. Cliquez avec le bouton droit de la souris sur le dossier default sous force-app/main.
    Lorsque vous cliquez avec le bouton droit sur le dossier default, l’option SFDX: Deploy Source to Org est sélectionnée dans la liste.
  2. Cliquez sur SFDX: Deploy Source to Org.
  3. Sous l'onglet Output du terminal intégré, examinez les résultats de votre déploiement. Si la commande s’est exécutée avec succès, un message source déployé répertorie les trois fichiers qui ont été chargés dans l’organisation.

Ajout d’un composant à une application dans Lightning Experience

  1. Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
  2. Saisissez SFDX.
  3. Sélectionnez SFDX: Open Default Org (Ouvrir l’organisation par défaut).
    Cette action ouvre votre Trailhead Playground dans une autre fenêtre de navigateur.
  4. Cliquez sur Configuration, puis sélectionnez Setup (Configuration).
  5. Dans Quick Find (Recherche rapide), saisissez Home, puis sélectionnez Home (Accueil) dans la section Feature Settings (Paramètres de fonctionnalité).
  6. Pour Advanced Seller Home (Accueil des vendeurs avancé), basculez le paramètre sur Inactive (Inactif).
  7. Dans le lanceur d’application (), cherchez et sélectionnez Sales (Ventes).
  8. Cliquez sur Configuration, puis sélectionnez Edit Page (Modifier la page).
  9. Faites glisser le composant Web Lightning helloWorld de la zone Custom (Personnalisé) de la liste des composants Lightning vers le haut de la zone de dessin de la page. 
    Générateur d’applications Lightning avec un composant Web Lightning HelloWorld dans la colonne de droite.
  10. Cliquez sur Save (Enregistrer).
  11. Cliquez sur Activate (Activer).
  12. Cliquez sur Assign as Org Default (Attribuer par défaut pour l’organisation).
  13. Cliquez sur Save (Enregistrer).
  14. Cliquez encore une fois sur Save (Enregistrer), puis sur Retour pour revenir à la page.
  15. Actualisez la page pour afficher votre nouveau composant.

Page d’accueil avec un composant Web Lightning HelloWorld.

C’est officiel : vous venez de créer votre premier composant Web Lightning !

Et maintenant ?

Découvrez les exemples de code et les SDK sur https://developer.salesforce.com/code-samples-and-sdks. Complétez votre composant helloWorld, consultez les exemples existants et créez vos propres composants ! Lors de vos tests, utilisez la référence des composants pour en savoir plus sur le codage des composants Web Lightning.

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