Alors oui, notre premier composant est très moche mais c’est justement ce qu’on va changer dans cette nouvelle partie du tutoriel Lightning Web Components de GetMarcel
On va le rendre plus beau et surtout on va lui ajouter des fonctionnalités progressivement pour permettre à tout le monde de suivre facilement !
Si vous ne savez absolument pas de quoi je parle, c’est que vous n’avez pas suivi les étapes 1 et 2 :
Etape 1 — Installation des outils pour développer 👉 http://bit.ly/LWC-tuto-partie-1
Etape 2 — Création du premier composant 👉http://bit.ly/LWC-tuto-partie-2
Lightning ? Un framework vraiment complet
Les développeurs ont toujours rencontré une difficulté majeure dans leurs développements pour le web.
Pour la plupart ils ne sont pas graphistes et jusqu’à l’apparition de standards graphiques (Bootstrap par exemple), on a eu droit à des essais créatifs plus ou moins réussis.
Pour simplifier, tout le monde pourra facilement faire la différence entre les deux images ci-dessous :
A gauche un formulaire HTML, à droite le même formulaire mis en forme avec du CSS
☝️ Et pourtant il s’agit exactement du même formulaire ! Hallucinant non ?
En plus d’une syntaxe basée sur les derniers standards ECMAScript, d’un fonctionnement par composant (et surtout proche du framework Vue.js que j’adore 😍)…
Lightning se distingue par le fait qu’il embarque sa propre librairie de composants graphiques (checkbox, picklist, boutons, tableaux de données, etc…) qui s’appelle SLDS pour Salesforce Lightning Design System
Inutile donc de rajouter des bordures, des effets, etc… à tous vos éléments graphiques; ceux-ci sont déjà disponibles, s’intègreront parfaitement dans vos applications Salesforce et vous n’avez qu’à piocher dans l’impressionnante bibliothèque existante
Transformons notre composant en “Card”
Pour rendre notre composant un peu plus présentable, j’ai choisi un composant de la librairie SLDS sous forme de Carte avec lequel nombre d’entre vous sont déjà très familiers (si vous avez déjà utilisé Salesforce en tous cas)
On va utiliser l’exemple ci-dessus tel quel dans notre composant à la différence près qu’on va lui faire afficher notre message contenu dans la variable { texte } au lieu de l’actuel card body.
C’est très facile, on copie-colle le code qui se trouve juste sous le composant dans la page SLDS et on va l’insérer dans notre fichier template premierComposant.html, juste entre les balises <template> et </template> comme sur la capture d’écran ci-dessous
On a inséré le code de la carte SLDS entre nos balises “template” et on a modifié le texte contenu dans la carte par notre variable { texte }
Comme notre composant est déjà affiché sur notre page d’accueil, on n’a rien à faire d’autre que de sauvegarder nos modifications sur premierComposant.html et déployer nos modifications sur l’organisation (environnement Salesforce) pour voir les modifications, c’est toujours très simple.
Sauvegardez le fichier premierComposant.html en faisant Ctrl ou ⌘+s selon que vous êtes sous Windows ou MacOS
Dans l’arborescence de gauche dans Visual Studio, faites un clic-droit sur le dossier premierComposant sous lwc et sélectionnez l’option SFDX: Deploy Source to Org
Ouvrez maintenant votre org qui doit normalement être celle par défaut avec l’invite de commande de SFDX (Ctrl ou ⌘+⇧+P ou via le menu View > Command Palette) on tape “default” et on choisit “SFDX: Open Default Org”
Et la magie opère de nouveau lorsqu’on va sur notre page d’accueil
Notre composant de base sans aucune mise en forme
👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
Le même composant à la différence d’un peu de mise en forme grâce à la librairie SLDS
👏👏👏 Bravo, Vous avez encore réussi !!!👏👏👏 Vous pouvez désormais jouer avec SLDS et les différents composants prêts à l’emploi pour vous familiariser avec les concepts.