Un guide complet du service de navigation dans LWC

septembre 29, 2024

Un guide complet du service de navigation dans LWC

Partie 1

Bonjour les pionniers !

Lightning Web Components (LWC) a transformé la façon dont les développeurs créent des applications modernes et efficaces au sein de la plateforme Salesforce. L’une des fonctionnalités clés qui améliorent l’expérience utilisateur dans LWC est la Service de navigation. Ce service permet aux développeurs de naviguer facilement entre différents composants, pages ou URL externes.

Dans ce blog, nous explorerons le service de navigation en détail, couvrant ses fonctionnalités clés, ses cas d’utilisation et des exemples pour vous aider à l’utiliser efficacement dans vos composants Web Lightning.

Dans les parties 1 et 2 de cette série de navigation, nous avons essayé de couvrir tous les scénarios possibles par le service de navigation dans LWC.

Alors commençons…

Qu’est-ce que le service de navigation dans LWC ?

Le Service de navigation dans Lightning Web Components fournit un moyen de naviguer par programmation entre les pages de l’application Salesforce. Il permet aux développeurs de diriger les utilisateurs vers des pages d’enregistrement Salesforce standard, des objets, des onglets personnalisés, des listes associées, des composants personnalisés ou des sites Web externes avec un minimum d’effort.

Cas d’utilisation clés du service de navigation

Certains des cas d’utilisation les plus courants des services de navigation incluent :

Accès à une page d’enregistrement: redirigez les utilisateurs vers un enregistrement spécifique dans l’application, tel qu’un compte, un contact ou un objet personnalisé.
Accès à une vue de liste: guidez les utilisateurs vers une vue de liste, affichant les enregistrements filtrés en fonction de critères personnalisés.
Accès à un onglet personnalisé ou à un composant Lightning: dirigez les utilisateurs vers des pages ou des composants personnalisés de votre application, y compris les onglets utilitaires.
Navigation vers une URL externe: ouvre un site Web ou une ressource externe lorsque les utilisateurs cliquent sur un lien ou un bouton.
Naviguer dans les communautés: redirigez les utilisateurs d’une communauté Salesforce vers différentes pages ou onglets de communauté.

Comment implémenter le service de navigation dans LWC

Maintenant que nous avons couvert les bases, voyons comment implémenter le service de navigation dans vos composants LWC.

Étape 1 : Importer les modules requis

Tout d’abord, vous devez importer le NavigationMixin de la éclair/navigation service. Ce mixin fournit les méthodes nécessaires à la navigation.

import { NavigationMixin } from 'lightning/navigation';

Étape 2 : étendre le NavigationMixin

Ensuite, étendez NavigationMixin dans la classe de votre composant. Cela permet à votre composant d’hériter de la fonctionnalité de navigation.

export default class MyComponent extends NavigationMixin(LightningElement) {
    // Component logic here
}

Étape 3 : Définir une méthode de navigation

Pour naviguer entre les pages, vous définirez une méthode dans votre composant qui utilise le naviguer() fonction du NavigationMixin.

Exemple : navigation vers une page d’enregistrement

handleNavigateToRecord() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.recId,   (you can also paste particular record id here in some cases)
            objectApiName: 'Account',
            actionName: 'view'
        }
    });
}

Dans cet exemple, le type est défini sur standard__recordPage, ce qui spécifie que vous accédez à une page d’enregistrement. La section des attributs définit le recordId, l’objet (Compte) et l’action (afficher ou modifier).

Étape 4 : utilisez la méthode de navigation dans le modèle

Ajoutez un bouton ou un autre élément interactif dans le côté modèle/html du composant pour déclencher la méthode de navigation lorsque vous cliquez dessus.

<template>
    <lightning-card title="Navigation Service Demo">
        <div class="slds-p-left_medium">
            <lightning-button label="Go to Account" onclick={handleNavigateToRecord}></lightning-button>
        </div>
    </lightning-card>
</template>

Désormais, lorsque l’utilisateur clique sur le bouton, il sera redirigé vers l’enregistrement de compte spécifié.

Dans la deuxième partie de cet article de blog, nous verrons d’autres scénarios dans lesquels le service de navigation peut être utilisé.

Conclusion

Le Service de navigation dans Lightning Web Components est un outil polyvalent qui permet une navigation programmatique efficace au sein de la plateforme Salesforce. En comprenant comment naviguer entre les pages standard, les composants personnalisés et les URL externes, vous pouvez améliorer considérablement l’expérience utilisateur dans vos applications LWC.

Bonne lecture !!

Le voyage d’apprentissage ne se termine jamais ; chaque instant est une chance de grandir.

Vous pouvez également lire :

1.Un guide complet sur le type de rapport personnalisé dans Salesforce
2.Maîtriser les files d’attente Salesforce : un guide étape par étape – Partie 2
3.Comment attribuer des enregistrements à la file d’attente Salesforce : un guide complet
4. Une introduction à Salesforce CPQ
5. Révolutionner l’engagement client : le chatbot Salesforce Einstein

Source link