Comment j’ai créé un explorateur de fichiers sur Salesforce à partir des composants lightning LWC & Aura ?
J’ai reçu il y a quelques temps, une demande d’un client qui se plaignait de l’absence de visibilité globale sur les dossiers dans Salesforce et il n’avait pas complètement tort. En effet, lorsqu’il y a plusieurs dossiers imbriqué l’un en dessous de l’autre avec des documents dans chaque dossiers, la visibilité qu’offre la solution standard de salesforce est considérablement réduite. De plus, l’utilisateur n’a pas la possibilité de visualiser les documents en miniature afin de les prévisualiser sans avoir a naviguer vers d’autres pages pour les ouvrir, ce qui est beaucoup plus pratique.
Alors, j’ai pensé à l’élaboration d’une solution qui permettrait d’avoir une navigation fluide entre les dossiers et d’avoir une certaine vue sur leur hiérarchie avec la possibilité d’afficher en miniature le contenu des fichiers instantanément.
Pour élaborer ma solution, je me suis inspiré du (finder) du mac os :
LWC & AURA
Après le lancement de l’expérience Salesforce Lightning en 2015 (winter’ 2015), salesforce a recommandé aux développeurs de migrer vers ses nouvelles technologies notamment vers le composant lightning (Aura) dans un premier temps puis vers les LWC après leur publication en 2019 (spring 2019).
Voici un article qui décrit les avantages des LWC : https://trailhead.salesforce.com/en/content/learn/modules/lightning-web-components-basics/discover-lightning-web-components
LWC vs Aura
Les composants Web Lightning (LWC) s’alignent étroitement sur les normes Web modernes, ce qui les rend plus performants pour le rendu des navigateurs. Le bundle LWC a une structure plus simple que celle des composants Aura, et le développement de LWC ressemble beaucoup plus à d’autres frameworks JavaScript modernes. Cela peut augmenter la productivité des développeurs. Et non seulement il est plus facile pour les développeurs de créer avec LWC, mais ils peuvent également augmenter les performances des applications par rapport aux composants Aura.
Pourquoi aura ?
Bien que les LWC sont plus performants que les composants aura, les composants Aura restent nécessaires dans certains cas.
Pour afficher les fichiers en miniature, nous avons besoin d’un composant lightning appelé lightning:fileCard. Malheureusement, ce composant n’est pas disponible dans LWC, c’est pourquoi j’ai utilisé Aura pour afficher les fichiers en miniature.
Voici les considérations à prendre en compte lors des interactions entre LWC et Aura https://developer.salesforce.com/blogs/2019/02/working-with-aura-and-lightning-web-components-interoperability-and-migration.html
Découper l’application en composant :
La composition permet de créer des composants complexes à partir de composants de blocs de construction plus simples. La composition d’applications et de composants à partir d’un ensemble de composants plus petits rend le code plus réutilisable et maintenable, donc dans un premier temps j’ai décomposé mon application en 3 parties ou chaque partie est décomposée à son tour en composants.
- File header (LWC):
- File current path (LWC).
- File uploader (LWC).
- File switch displayer (LWC).
- File search (LWC).
- Folder actions(LWC).
2. File tree (LWC).
- Workspace form (LWC).
- Folder tree (LWC).
- Library actions(LWC).
3. File displayer (Aura).
- File cards (Aura).
- File table (LWC).
Communication entre les composants :
Afin de créer une communication à travers le modèle d’objet de document (DOM), j’ai créé un canal Lightning Message Service.
Démo :
Parcourir les dossiers, afficher leur contenu et charger de nouveaux documents :
Création, Suppression et déplacement des dossiers :
Recherche rapide de documents dans un fichier :
Création d’une librairie :
Code source : https://github.com/Altius-mena/Library
lien d’installation du package : https://login.salesforce.com/packaging/installPackage.apexp?p0=04t4K000001on7g
