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

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

Autorisation de votre Trailhead Playground

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
Saisissez SFDX.
Sélectionnez SFDX: Authorize an Org.
Appuyez sur Entrée pour accepter l’option URL de connexion par défaut du projet.
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.
Connectez-vous à l’aide de vos identifiants Trailhead Playground.
Si vous êtes invité à autoriser l’accès, cliquez sur Allow (Autoriser).
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 :

Création d’un composant Web Lightning

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
Saisissez SFDX.
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.)
Saisissez helloWorld comme nom de nouveau composant.
Appuyez sur Enter (Entrée) pour accepter le chemin par défaut force-app/main/default/lwc.
Appuyez sur Entrée.
Affichez les fichiers créés dans Visual Studio Code.

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>

Enregistrez le fichier.

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;
  }
}

Enregistrez le fichier.

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>

Enregistrez le fichier.

Déploiement sur votre Trailhead Playground

Cliquez avec le bouton droit de la souris sur le dossier default sous force-app/main.
Cliquez sur SFDX: Deploy Source to Org.
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.

Ajout d’un composant à une application dans Lightning Experience

Dans Visual Studio Code, ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P (Windows) ou sur Cmd+Maj+P (macOS).
Saisissez SFDX.
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.
Dans le lanceur d’application (), cherchez et sélectionnez Sales (Ventes).
Cliquez sur , puis sélectionnez Edit Page (Modifier la page).
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.
Cliquez sur Save (Enregistrer).
Cliquez sur Activate (Activer).
Cliquez sur Assign as Org Default (Attribuer par défaut pour l’organisation).
Cliquez sur Save (Enregistrer).
Cliquez encore une fois sur Save (Enregistrer), puis sur pour revenir à la page.
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.

Thèmes