Un guide complet du service de navigation dans LWC

Partie 2

Bonjour les pionniers !

Dans Salesforce Lightning Web Components (LWC), le Service de navigation joue un rôle crucial dans la création d’une expérience utilisateur transparente en permettant une navigation simple et programmatique entre différentes pages, enregistrements ou liens externes.

Dans la première partie précédente de ce blog, nous avons vu les bases des services de navigation et comment diriger un utilisateur vers la page d’enregistrement. Si vous souhaitez apprendre, veuillez suivre ceci lien.

Dans cet article de blog, nous essaierons de couvrir tous les scénarios/exemples possibles pour les services de navigation dans les composants Web Lightning.

Alors commençons…

Exemples de scénarios de navigation courants dans les composants Web Lightning

1. Accédez à la page de création d’enregistrement de nouvelle opportunité :

Veuillez trouver ci-dessous l’extrait de code qui montre comment le service de navigation peut être utilisé pour accéder à la page de création d’enregistrement de nouvelle opportunité lorsque vous cliquez sur le bouton « Créer une nouvelle opportunité ».

navigationTest.html

<template>
    <lightning-card title="Navigation Service Demo">
        <div class="slds-p-left_medium">
            <lightning-button label="Create New Opportunity" onclick={navigateToNewOppPage}></lightning-button>
        </div>
    </lightning-card>
</template>

navigationTest.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationTest extends NavigationMixin(LightningElement) {
 navigateToNewOppPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Opportunity',
                actionName: 'new'
            },
        });
    }
}

navigationTest.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

2. Accédez à la page d’accueil de l’opportunité

navigationTest.html

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

navigationTest.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationTest extends NavigationMixin(LightningElement) {
 navigateToOpportunityHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Opportunity',
                actionName: 'home'
            }
        });
    }

}

3. Navigation vers une URL externe

handleNavigateToExternalPage() {
    this[NavigationMixin.Navigate]({
        type: 'standard__webPage',
        attributes: {
            url: https://blogs.perficient.com/author/amasane/'
        }
    });
}

4. Accès à une vue de liste

Pour accéder à une vue de liste, utilisez le type standard__objectPage. Vous pouvez également spécifier un filtre dans l’attribut filterName.

handleNavigateToListView() {
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Contact',
            actionName: 'list'
        },
        state: {
            filterName: 'Recent' // Optional filter for list views
        }
    });
}

5. Accès à un onglet personnalisé

Si vous disposez d’une page d’application Lightning personnalisée ou d’un onglet Visualforce, utilisez le type standard__navItemPage.

handleNavigateToCustomTab() {
    this[NavigationMixin.Navigate]({
        type: 'standard__navItemPage',
        attributes: {
            apiName: 'MyCustomTab'
        }
    });
}

6. Accès à une liste associée

Si vous souhaitez rediriger les utilisateurs vers une liste associée pour un enregistrement particulier, utilisez le type standard__recordRelationshipPage.

handleNavigateToRelatedList() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordRelationshipPage',
        attributes: {
            recordId: this.recordId,    (you can also put recordId manually)
            objectApiName: 'Account',
            relationshipApiName: 'Contacts',
            actionName: 'view'
        }
    });
}

Conclusion

Grâce aux exemples fournis ci-dessus, nous avons démontré comment les développeurs peuvent utiliser efficacement les services de navigation dans leurs composants Web Lightning pour améliorer la navigation et l’expérience utilisateur.

Bonne lecture !!

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

Articles connexes :

1. 1. Services de navigation de base dans LWC
   2. Naviguez vers différentes pages

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