Si vous avez correctement suivi la Partie 1 de notre tutoriel, on est prêts à relever un nouveau défi ensemble avec Marcel ! Sinon 👉 http://bit.ly/LWC-tuto-partie-1
Créez votre premier Lightning Web Component avec GetMarcelIntroduction
Si vous lisez ceci c’est que vous avez correctement suivi la Partie 1 du tutoriel sans trop d’encombres.
Désormais on a donc :
Installé Visual Studio Code avec quelques extensions
Installé SFDX CLI
Créé une Organisation Developer Salesforce
Configuré notre package.xml
Récupéré les sources depuis notre Developer Org
Aujourd’hui, on passe à la création de notre premier Composant Web Lightning (LWC) … Et on est comme des dingues 🤩🤩🤩
Etape 1 — Vérification
On va tout d’abord ouvrir l’invite de commande de SFDX (Ctrl ou ⌘+⇧+P ou via le menu View > Command Palette) puis tapez “default” et sélectionnez “SFDX: Open Default Org”
Suite à ça, il se passe les 2 choses suivantes :
Votre Org s’ouvre dans votre navigateur par défaut (idéalement vous avez déjà configuré Chrome ou Firefox comme votre navigateur par défaut)
Votre Org par défaut s’ouvre dans votre navigateur2. Vous constatez que le nom que vous avez donné à votre Org apparait en bas à gauche de la fenêtre de Visual Studio Code
Dans la partie 1 du tutoriel, j’avais appelé mon Org GetMarcel au moment où je l’ai déclarée dans Visual Studio CodeEtape 2 — Activation du domaine personnalisé
Avant de pouvoir déployer un composant customisé, il est une étape indispensable qui est l’activation du domaine personnalisé sur notre Org Salesforce.
Un domaine personnalisé c’est tout simple, c’est un genre de raccourci qui nous permet d’accéder à notre Org en tapant quelque chose du genre getmarcel.my.salesforce.com au lieu d’arriver sur la page générique login.salesforce.com
C’est aussi ce qui nous permettra dans un futur tutoriel de personnaliser notre propre page d’accueil de login, de mettre en place de l’authentification unique (SSO), etc…
Aujourd’hui on ne va rien faire de tout ça, on va juste activer le domaine personnalisé pour déployer notre composant
Rendez-vous dans la Configuration (⚙️ en haut à droite de la page)
2. On navigue ensuite dans le menu latéral de gauche vers Paramètres de la société > Mon domaine
⚠️⚠️⚠️ Attention ⚠️⚠️⚠️
Si la frise est déjà sur le dernier carré bleu Domain Deployed to Users, vous pouvez zapper la suite et passer directement à Etape 3 — Création du Lightning Web Component un peu plus loin dans ce tutoriel
3. On rentre le nom de domaine choisi (pour moi ce sera getmarcel) et on clique sur le bouton permettant de Vérifier la disponibilité.
4. Si votre domaine est disponible, vous pouvez cliquer sur Enregistrer le domaine
Vérifiez la disponibilité de votre domaine personnalisé
5. La création de votre domaine est maintenant en cours comme vous pouvez le voir sur la capture ci-dessous, pour information ça prend entre 2 et 10 minutes en général.
Inutile d’attendre l’email, il vous suffit de rafraichir régulièrement la page et vous verrez la frise passer à l’étape suivante
Votre domaine est en cours de création
Si vous avez été suffisamment patients, l’écran suivant va s’afficher et vous informer que votre domaine peut désormais être testé. 6. Il faut vous connecter à ce domaine pour pouvoir l’activer, cliquez sur le bouton Se
connecter
Il est maintenant temps de vous connecter au domaine pour pouvoir l’activer7. Salesforce va alors ouvrir une nouvelle page pour vous demander si vous voulez ajouter votre numéro de téléphone, libre à vous. Vous pouvez aussi cliquer sur le lien bleu en bas du bloc Je ne souhaite pas enregistrer mon téléphone
Ecran interstitiel d’enregistrement du numéro de téléphone, cette étape est facultative8. Vous êtes maintenant connecté sur votre domaine personnalisé comme visible dans l’URL de votre navigateur. Vous pouvez alors cliquer sur le bouton Déployer vers des utilisateurs
Votre domaine est prêt à être déployé9. Une petite confirmation pour vous indiquer que cette action est immédiate et que seul Salesforce pourra par la suite désactiver ou modifier votre nom de domaine Vous pouvez cliquer sur Ok
Popup de confirmation d’activation du domaine personnalisé👏👏👏👏Voila c’est terminé pour la création de votre Domaine personnalisé 👏👏👏👏 On passe à la suite !
C’est terminé, votre domaine est activéEtape 3— Création du Lightning Web Component Une fois que les pré-requis sont en place, la création d’un composant web Lightning est ultra simple. Rouvrez l’invite de commande de SFDX (Ctrl ou ⌘+⇧+P ou via le menu View > Command Palette) puis tapez “lightning” et sélectionnez “SFDX: Create Lightning Web Component”
On sélectionne SFDX: Create Lightning Web Component⚠️⚠️⚠️ Attention ⚠️⚠️⚠️ Il existe 2 propositions assez similaires (les 2 premières propositions dans la capture ci-dessus) qui sont SFDX: Create Lightning Web Component 👍 et SFDX: Create Lightning Component 👎 On cherche bien à créer un Web component donc on choisit SFDX: Create Lightning Web Component !!!
Ensuite on donne un nom à notre composant en lowerCamelCase (première lettre du premier mot en minuscule et premières lettres des autres mots en majuscules). NB Culture Geek : Il existe un débat assez inutile entre développeurs sur le CamelCase vs camelCase, en fait c’est du camel case dans les deux cas, le premier est UpperCamelCase et le second LowerCamelCase. Les plus pointus parleront de camelCase (pour LowerCamelCase) et de PascalCase (pour UpperCamelCase, et accessoirement pour les dinosaures comme moi qui ont déjà développé en TurboPascal 😂)
Pour l’originalité, j’appelle mon premier composant…. premierComposantEt on termine en faisant simplement Entrée ⏎ sur la proposition suivante car on va choisir la valeur par défaut (on crée notre LWC dans le répertoire force-app/main/default/lwc de notre projet)
Laisser la valeur par défautSuite à ces actions, un répertoire est créé dans le dossier force-app/main/default/lwc de notre projet et qui porte le nom de notre composant. Ce nouveau répertoire du dossier lwc contient 3 fichiers (un html, un js et un xml que nous détaillerons dans la partie 3 de ce tutoriel).
le répertoire premierComposant est crééNotre composant est maintenant créé mais c’est une coquille vide, on va juste faire en sorte que notre composant affiche quelque chose et l’ajouter sur la Homepage de notre application pour l’instant. Si vous n’êtes familier ni avec HTML ni avec Javascript, retenez simplement que HTML est un langage permettant d’afficher du texte ou des informations sur une page Web et que Javascript est un langage qui permet d’animer les pages Web (c’est la partie intelligente de la page) Etape 4— Personnalisation du composant (JavaScript) On voit ici notre fichier JavaScript (JS) créé par défaut et son code; une petite explication de la syntaxe s’impose. Si vous êtes familiers des frameworks Javascript récents type VueJS, React, … alors cette syntaxe va vous sembler étonnamment familière, c’est normal, l’équipe Salesforce l’a expliqué à de nombreuses reprises et notamment sur le lien ci-dessous : 👉👉 👉http://bit.ly/open-source-framework
Code du composant généré automatiquement lors de la créationQuelques mots-clés importants dans ce code :
import — Sert à importer un composant (ici un composant de base) dans notre propre composant. Pensez à cet import comme les librairies importées en C/C++ par exemple
export default — S’il y a un import c’est qu’un élément est prêt à être exporté. Ici on voit que notre classe Javascript importe “LightningElement” depuis ‘lwc’ mais qu’elle exporte aussi la classe PremierComposant (qui hérite de LightningElement).
Par conséquent, notre classe PremierComposant pourrait tout aussi bien être importée dans un autre composant. Si vous souhaitez en savoir plus sur ces éléments de syntaxe, ils se basent sur la norme ECMA Script 2015 (plus souvent appelée ES6) 👉 http://bit.ly/ECMAScript2015-ES6 Si vous avez déjà fait de la programmation (amateur, confirmé ou professionnel), tout ça devrait vous parler; sinon ça c’est pas bien grave, retenez juste que si on veut utiliser d’autres fonctionnalités de base de la bibliothèque lwc, il nous faudra importer d’autres modules que LightningElement. Ces éléments constituent le squelette de base de notre composant. Tout le code et toute l’intelligence de notre futur composant se trouvera entre les deux accolades { } qu’on voit sur la dernière ligne (curly braces en anglais) On va déclarer une propriété dans notre code et l’initialiser avec une valeur, rien de bien compliqué, on va rajouter dans notre composant le code suivant (entre les accolades qui décrivent le code de notre classe) :
texte = 'On apprend avec GetMarcel';
Ce qui donnera le résultat suivant dans notre composant (on n’oublie pas de sauvegarder notre fichier après avoir fait nos modifications avec le raccourci Ctrl + S ou ⌘+S
Notre composant complété avec nos modificationsEtape 5 — Personnalisation du composant (HTML) Maintenant que notre composant JS contient la variable qu’on souhaite faire afficher dans Salesforce, on va effectivement dire à notre fichier HTML d’afficher cette variable (tout simplement). Ouvrez votre fichier premierComposant.html (ou votre propre fichier HTML si vous avez nommé votre composant différemment) et complétez-le en ajoutant le code suivant à l’intérieur des balises template:
{texte}
Ce qui devrait vous donner un template HTML qui ressemble à ça :
Template HTML complété pour afficher le contenu de notre variable “texte”Etape 6— Configuration de notre composant (meta XML) Tout ça c’est bien beau mais si vous essayez de déployer votre composant sur votre Org Salesforce, il n’apparaitra nulle part (et surtout pas dans l’App Builder) Pour vous permettre d’ajouter votre composant à une page, il faut nous intéresser au dernier fichier (ici premierComposant.js-meta.xml) Tout d’abord, ouvrez ce fichier XML et changez la valeur de la propriété isExposed de false à true afin d’exposer notre composant dans Lightning comme ceci :
<isExposed>true</isExposed>
Ensuite, ajoutez le bloc suivant en dessous de la ligne que vous venez de modifier (celle qui contient isExposed) :
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
</targets>
La définition des cibles permet de déclarer les types de page Lightning dans lesquelles notre composant doit pouvoir être ajouté (ici notre composant pourra être ajouté dans les 3 types de pages, Page d’application, Page d’accueil et Page de détail d’enregistrement)
Au final votre fichier devrait ressembler à ça :
Notre fichier XML complétéEtape 7 — Déploiement du composant Notre composant est maintenant prêt à être déployé Pour ce faire, on va d’abord s’assurer que nos fichiers sont bien sauvegardés en faisant Ctrl + S ou ⌘+S sur chacun des 3 fichiers. Ensuite on fait un clic droit sur le dossier premierComposant et on sélectionne SFDX: Deploy Source to Org
Déploiement du composant sur notre OrgDans la fenêtre OUTPUT, vous devriez voir vos 3 fichiers ajoutés et déployés sur votre Org comme dans l’écran ci-dessous :
Composant synchronisé avec succèsEtape 8 — Ajout du composant sur la Page d’Accueil
Au final c’est aussi simple que ça, vous vous souvenez à la fin de l’étape 6, on a défini notre composant comme affichable sur les pages de type :
“Page d’application”,
“Page d’accueil”,
“Page de détail d’enregistrement”
Si elle n’est pas déjà ouverte, on peut faire comme à l’étape 1 pour ouvrir notre Org : Ouverture de l’invite de commande de SFDX (Ctrl ou ⌘+⇧+P ou via le menu View > Command Palette) puis tapez “default” et sélectionnez “SFDX: Open Default Org”
On modifie la page d’accueil de notre OrgOn va donc éditer la Page d’Accueil de notre Org en cliquant sur l’icône ⚙️en haut à droite de l’écran et en sélectionnant le menu Modifier la page (Edit Page pour ceux qui ont mis leur instance en Anglais).
La page qui s’ouvre vous permet de configurer la Page d’Accueil et surtout de rajouter notre nouveau composant (ici premierComposant)
Tout en bas du bandeau de gauche de l’écran, vous trouverez votre composant dans la rubrique Composants Lightning > Personnalisés
A partir de là c’est très simple, un glissé-déposé est suffisant pour ajouter le composant à la page !
Notre composant est maintenant ajouté à la page et on voit le texte qui apparait directement dans le configurateur
Etape 9 — Activation de la page pour les utilisateurs On va maintenant activer (attribuer) notre page à certains utilisateurs ciblés uniquement. J’ai choisi de rendre cette page visible pour les utilisateurs de l’application GetMarcel qui ont un profil Administrateur On clique en haut à droite de la page sur le bouton Activation et on se laisse guider.
Je clique ici sur la partie Application et Profil car je ne souhaite activer ma page que pour les Administrateurs sur l’application GetMarcelUne fois que j’ai sélectionné APPLICATION ET PROFIL, je clique sur le bouton Attribuer à des application et à des profils qui se situe juste en dessous sur la gauche de l’écran
Sélection de l’application GetMarcelJe coche l’application GetMarcel et je clique ensuite sur Suivant
Sélection du ou des profilsJ’ai décidé précédemment que je n’allais activer que pour le profil Administrateur système donc je coche ce choix et je fais Suivant
Salesforce m’affiche maintenant un récapitulatif de mon activation et m’indique que je vais attribuer la page pour l’application GetMarcel et le profil Administrateur système, ce qui correspond bien à ce que je souhaitais. Vous pouvez maintenant cliquer sur le bouton Enregistrer pour fermer la fenêtre de Révision des attributions puis à nouveau sur Enregistrer sur la page Générateur d’application Lightning et enfin sur Revenir tout en haut à droite de la page 🤩🤩🤩🤩🤩Prenez quelques secondes et admirez votre tout premier Lightning Web Component sur la Page d’Accueil 🤩🤩🤩🤩🤩 Alors oui, il est pas super joli et il présente une seule phrase sans aucune mise en forme mais on va l’améliorer ensemble dans le prochain chapitre de notre série sur les Lightning Web Components A suivre…