Créer un raccourci clavier sur Salesforce : un cas d’usage pratique sur LWC

Introduction

En tant que développeur Salesforce, vous avez peut-être été confronté à une demande de création d’un raccourci clavier comme fonctionnalité spécifique sur votre composant LWC, mais vous ne savez pas par où commencer.

Les ressources pour créer un tel raccourci clavier peuvent être difficiles à trouver et vous ne voulez pas perdre du temps à chercher des solutions complexes. Heureusement, cet article est là pour vous aider !

Tout d’abord nous allons vous montrer comment créer un raccourci clavier personnalisé from scratch sur votre composant LWC en suivant un exemple concret étape par étape.

Même si vous êtes novice en développement Salesforce, cet article très facile à suivre vous permettra d’ajouter facilement cette fonctionnalité très utile à vos utilisateurs. Ainsi vous gagnez du temps et optimisez votre productivité.

Quels types de raccourcis ?

Voici pour nous deux méthodes qui peuvent vous faciliter l’implémentation de raccourcis au niveau d’une page HTML.

Accesskey

Premièrement, Accesskey est un attribut HTML qui met en évidence un élément de la page et qui simule un clic sur l’élément en question.

Keyup ou keydown

Sans conteste la partie qui nous intéresse le plus ! Grâce aux événements Keyup et Keydown, vous pouvez rendre votre page plus rapide en implémentant des raccourcis qui feront gagner du temps aux utilisateurs.

Ce bout de code, ci-dessus, vous permet d’afficher sur la console du navigateur la touche que vous tapez sur votre clavier.

Pour aller plus loin, n’hésitez pas à consulter les liens ci-dessous :

JavaScript Keyboard Events

Element: keydown event

Implémentation

Dans cet exemple, nous allons implémenter un raccourci clavier pour les flows. Le but est simple, dès que l’utilisateur clique « CTRL + S » au niveau d’un écran de flow, il passe à l’écran suivant ou termine le flow si c’est le dernier écran du flow.

saveLwc.html

saveLwc.js

En premier lieu, au démarrage du composant LWC, avec la méthode connectedCallback, il faut ajouter un événement keydown à l’élément body de la page qui exécute la méthode save lorsque l’utilisateur appuie sur une touche.

Ensuite, la méthode save vérifie si l’utilisateur a appuyé sur la touche « ctrl + s » (ou « cmd + s » sur Mac) en utilisant les propriétés ctrlKeypour windows, metaKey pour Mac et key de l’événement clavier.

• D’abord il est important d’empêcher l’action par défaut du navigateur (généralement celle d’enregistrer la page) avec e.preventDefault(), mais aussi de vérifier si une des deux actions « NEXT » ou « FINISH » sont disponibles dans le tableau availableActions.
• Puis il faut créer un événement de navigation en utilisant FlowNavigationNextEvent ou FlowNavigationFinishEvent et déclencher l’événement du flow en utilisant dispatchEvent.

Enfin, la méthode disconnectedCallback est exécutée lorsque le composant est supprimé de la page, ainsi, elle enlève l’écouteur d’événements ajouté dans la méthode connectedCallback.

saveLwc.js-meta.xml

Maintenant, il ne vous reste plus qu’à utiliser ce composant LWC sur chaque écran de flux où vous souhaitez utiliser ce raccourci clavier pour que cela fonctionne. 🥳

Conclusion

En somme, les raccourcis clavier permettent de gagner du temps et de l’efficacité !  Ils permettent aux utilisateurs d’accéder rapidement à des fonctionnalités spécifiques via des combinaisons de touches.

Également une autre idée intéressante est d’ajouter une fonctionnalité qui permet à l’utilisateur de télécharger les données du composant lightning-datatable. Pour ce faire il utilise le raccourci clavier « CTRL + S » et ainsi facilite la récupération des données sous forme de fichier CSV.

Vous pouvez consulter mes articles ici ou les autres articles du blog. ici