Le NavigationMixin doit être importé depuis Lightning/Navigation dans le fichier « javascript ». Naviguer est la méthode disponible dans ce module. Il prend le type et les attributs. Le type spécifie le type de page dans laquelle nous naviguons et les attributs prennent le pageName.
- Dans la configuration, recherchez « Lightning App Builder » et cliquez sur « Nouveau ».
- Choisissez la « Page de l'application » et cliquez sur « Suivant ».
- Donnez l'étiquette « Services de navigation ».
- Choisissez une région et cliquez sur « Terminé ».
Votre application est prête à être utilisée. Recherchez-le sous le « Lanceur d’applications ».
Pour tous les exemples de services de navigation qui vont être abordés dans ce guide, nous utilisons le même fichier « méta-xml ». Vous pouvez placer les composants dans la page de votre application que vous avez créée maintenant. Nous ne spécifierons plus ce fichier (méta-xml) dans les exemples d'extraits de code.
'1,0' ?>
Accéder à la page d'accueil
Si vous souhaitez accéder à la page d'accueil standard de Salesforce, regardez l'exemple suivant :
Navigation.html
Nous créons un bouton. Le clic de cette « homeNavigation » sera géré dans le fichier « js ».
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
< b > Vous serez redirigé vers la page d'accueil < / b >< br >< / div >
< / carte-éclair>
< / modèle>
Navigation.js
Le type doit être « standard__namedPage » et le pageName doit être « home ». Ceci est spécifié dans la méthode du gestionnaire homeNavigation().
importer { Élément Lightning } depuis 'chance' ;
importer { NavigationMixin } depuis 'éclair/navigation'
exporter défaut classe La navigation s'étend NavigationMixin ( Élément Lightning ) {
// méthode du gestionnaire
// pageName devrait être home
// le type de la page est standard__namedPage pour l'accueil
accueilNavigation ( ) {
ce [ NavigationMixin. Naviguer ] ( {
taper : 'standard__namedPage' ,
les attributs : {
Nom de la page : 'maison'
}
} )
}
}
Sortir:
Ajoutez ce composant à la page de l'application et cliquez sur le bouton « Aller à la page d'accueil ».
Maintenant, vous êtes sur la page d'accueil.
Accès à Chatter
Vous pouvez partager les fichiers, les messages texte et les détails des journaux à l'aide de Salesforce Chatter. Il peut être possible d'accéder directement à Chatter à l'aide du service de navigation.
Navigation.html
Nous créons un bouton. Le clic de ce « chatterNavigation » sera géré dans le fichier « js ».
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
< b > Vous serez redirigé vers Chatter < / b >< br >< / div >
< / carte-éclair>
< / modèle>
Navigation.js
Le type doit être « standard__namedPage » et le pageName doit être « chatter ». Ceci est spécifié dans la méthode de gestion chatterNavigation(). Collez l'extrait suivant dans la classe « js ».
// méthode du gestionnaire// pageName devrait être du bavardage
// le type de la page est standard__namedPage pour le bavardage
bavardageNavigation ( ) {
ce [ NavigationMixin. Naviguer ] ( {
taper : 'standard__namedPage' ,
les attributs : {
Nom de la page : 'bavarder'
}
} )
}
Sortir:
Actualiser la page. Vous pouvez désormais publier les mises à jour et partager les fichiers dans Chatter en y accédant.
Navigation vers un nouvel enregistrement
Sans accéder à l'onglet objet spécifique pour créer un nouvel enregistrement, vous pouvez directement créer un nouvel enregistrement pour un objet spécifique à l'aide du service de navigation. Dans ce scénario, nous devons spécifier objectApiName et actionName comme attributs.
- objectApiName est le nom de l'API de l'objet Salesforce, tel que « Compte », « Contact », « Case », etc.
- Nous créons un nouvel enregistrement. Ainsi, le actionName doit être « nouveau ».
Navigation.html
Créons un enregistrement de cas. Nous créons un bouton. Le clic sur ce « newRecordNavigation » sera géré dans le fichier « js ».
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
< b > Vous pouvez créer un dossier à partir d'ici... < / b >< br >< / div >
< / carte-éclair>
< / modèle>
Navigation.js
Le type doit être « standard__objectPage ». Ceci est spécifié dans la méthode de gestionnaire newRecordNavigation(). Collez l'extrait suivant dans la classe « js ».
// méthode du gestionnaire// Case est le objectApiName et actionName est New.
// le type de la page est standard__objectPage
nouveauRecordNavigation ( ) {
ce [ NavigationMixin. Naviguer ] ( {
taper : 'standard__objectPage' ,
les attributs : {
objectApiName : 'Cas' ,
nomaction : 'nouveau'
}
} )
}
Sortir:
Actualiser la page. Vous pouvez désormais créer un enregistrement lié au dossier.
Si vous l'enregistrez, vous accéderez à sa page d'enregistrement.
Accès à la page d'enregistrement
Semblable à la navigation précédente (exemple 3), nous pouvons accéder à l'enregistrement spécifique et afficher ou modifier les détails. Une autre propriété que vous devez transmettre dans les attributs est le « recordId » (ID de l’enregistrement existant). Le actionName doit être « view » dans ce scénario.
Navigation.html
Passons au dossier de cas. Nous créons un bouton. Le clic de ce « viewRecordNavigation » sera géré dans le fichier « js ».
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
< b > Vous pouvez consulter le dossier du cas à partir d'ici... < / b >< br >< / div >
< / carte-éclair>
< / modèle>
Navigation.js
Le type doit être « standard__recordPage ». Ceci est spécifié dans la méthode de gestionnaire viewRecordNavigation(). Collez l'extrait suivant dans la classe « js ».
// méthode du gestionnaire// Case est le objectApiName et actionName est la vue.
// le type de la page est standard__recordPage
viewRecordNavigation ( ) {
ce [ NavigationMixin. Naviguer ] ( {
taper : 'standard__recordPage' ,
les attributs : {
ID d'enregistrement : '5002t00000PRrXkAAL' ,
objectApiName : 'Cas' ,
nomaction : 'voir'
}
} )
}
Sortir:
Vous pouvez voir les détails du cas après la navigation. Ici, vous pouvez afficher et modifier les détails du dossier.
Autres navigations
Passons à la vue Liste et aux fichiers. Pour la vue Liste, vous aurez besoin du nom de l’objet et du nom du filtre. Vous le trouverez dans l'URL. Nous développerons cela dans l’exemple.
Les fichiers sont stockés dans l'objet ContentDocument. Ainsi, pour les fichiers, le objectApiName sera « ContentDocument » et le actionName sera « home ».
Vue en liste :
Des dossiers:
Navigation.html
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
< b > Vous pouvez accéder à la vue Liste < / b >< br >< / div >
< div classe = 'slds-var-m-around_medium' style = 'hauteur : 20 px ; largeur : 400 px ' >
< b > Vous pouvez accéder aux fichiers < / b >< br >< / div >
< / carte-éclair>
< / modèle>
Navigation.js
// Gestionnaire de listeviewListNavigation ( ) {
ce [ NavigationMixin. Naviguer ] ( {
taper : 'standard__objectPage' ,
les attributs : {
objectApiName : 'Cas' ,
nomaction : 'liste' ,
État : {
Nom du filtre : '00B2t000002oWELEA2'
}
}
} )
}
// Gestionnaire de vue de fichiers
viewFileNavigation ( ) {
ce [ NavigationMixin. Naviguer ] ( {
taper : 'standard__objectPage' ,
les attributs : {
objectApiName : 'ContenuDocument' ,
nomaction : 'maison'
}
} )
}
Sortir:
Vous accéderez à votre vue Liste de cas. Le nom du filtre que nous avons spécifié est « Tous les cas fermés ».
Vous pouvez afficher vos fichiers à partir de cette page de l'application en cliquant sur le bouton « Aller aux fichiers ».
Conclusion
Le Salesforce LWC fournit la navigation directe dans laquelle vous pouvez naviguer en restant dans une page spécifique. Dans ce guide, nous avons appris les différentes navigations à l'aide du service de navigation des composants Web Lightning. Il existe de nombreuses autres navigations, mais nous avons discuté de la navigation importante que tous les développeurs LWC doivent connaître. Dans toutes les navigations, le NavigationMixin doit être importé depuis Lightning/Navigation.