Suivez votre progression
Accueil Trailhead
Accueil Trailhead

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

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

Création d’un projet Salesforce DX

  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 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éé

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 Enter (Entrée) pour accepter l’alias par défaut.
    Cette action ouvre la page de connexion Salesforce dans une fenêtre de navigateur distincte.
  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). N’utilisez pas SFDX: Create Lightning Component (SFDX : Créer un composant Lightning). (Cela crée un composant Aura.)
  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>45.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. La notification suivante devrait également s'afficher : SFDX: Deploy Source to Org ... ended with exit code 0. Cela signifie que la commande a bien été exécutée.
    Onglet Output (Sortie) affichant les résultats de la réussite avec le code de sortie 0

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 (SFDX : Ouvrir une organisation par défaut).
    Cette action ouvre votre Trailhead Playground dans une autre fenêtre de navigateur.
  4. Dans le lanceur d’application (App Launcher (Lanceur d’application)), cherchez et sélectionnez Sales (Ventes).
  5. Cliquez sur Engrenage de configuration, puis sélectionnez Edit Page (Modifier la page).
  6. Faites glisser le composant Web Lightning helloWorld de la zone personnalisée 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.
  7. Cliquez sur Save (Enregistrer).
  8. Cliquez sur Activate (Activer).
  9. Cliquez sur Assign as Org Default (Attribuer par défaut pour l’organisation).
  10. Cliquez sur Save (Enregistrer).
  11. Cliquez encore une fois sur Save (Enregistrer), puis sur Flèche retour pour revenir à la page.
  12. 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 ?

Consultez les exemples d’applications sur https://trailhead.salesforce.com/sample-gallery. 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.