NavigationMixin skal importeres fra lightning/navigation i 'javascript'-filen. Navigation er den tilgængelige metode i dette modul. Det tager typen og egenskaberne. Typen angiver typen af den side, vi navigerer efter, og attributterne tager sidenavnet.
- Fra opsætningen, søg i 'Lightning App Builder' og klik på 'Ny'.
- Vælg 'App-siden', og klik på 'Næste'.
- Angiv etiketten som 'Navigationstjenester'.
- Gå med den ene region og klik på 'Udført'.
Din app er klar til brug. Søg efter det under 'App Launcher'.
Til alle de eksempler på navigationstjenesten, der vil blive diskuteret i denne vejledning, bruger vi den samme 'meta-xml'-fil. Du kan placere komponenterne på din app-side, som du har oprettet nu. Vi vil ikke specificere denne fil (meta-xml) igen under eksempelkodestykkerne.
'1.0' ?>
Navigerer til startsiden
Hvis du vil navigere til Salesforce-standardhjemmesiden, skal du se på følgende eksempel:
Navigation.html
Vi laver en knap. Et klik på denne 'homeNavigation' vil blive håndteret i 'js'-filen.
< div klasse = 'slds-var-m-around_medium' stil = 'højde:20px; bredde:400px' >
< b > Du vil blive omdirigeret til Hjemmesiden < / b >< br >< / div >
< / lyn-kort>
< / skabelon>
Navigation.js
Typen skal være 'standard__namedPage', og sidenavnet skal være 'home'. Dette er angivet i homeNavigation()-håndteringsmetoden.
importere { LightningElement } fra 'held' ;
importere { NavigationMixin } fra 'lyn/navigation'
eksport Standard klasse Navigation strækker sig NavigationMixin ( LightningElement ) {
// handler metode
// sidenavn skal være hjemme
// typen af siden er standard__namedPage for hjemmet
hjemNavigation ( ) {
det her [ NavigationMixin. Navigere ] ( {
type : 'standard__namedPage' ,
egenskaber : {
sidenavn : 'hjem'
}
} )
}
}
Produktion:
Tilføj denne komponent til app-siden, og klik på knappen 'Gå til startside'.
Nu er du på startsiden.
Navigerer til Chatter
Du kan dele filerne, tekstbeskederne og logoplysningerne ved hjælp af Salesforce Chatter. Det kan være muligt at navigere direkte til Chatteren ved hjælp af navigationstjenesten.
Navigation.html
Vi laver en knap. Klik på denne 'chatterNavigation' vil blive håndteret i 'js' filen.
< div klasse = 'slds-var-m-around_medium' stil = 'højde:20px; bredde:400px' >
< b > Du vil blive omdirigeret til Chatter < / b >< br >< / div >
< / lyn-kort>
< / skabelon>
Navigation.js
Typen skal være 'standard__namedPage', og sidenavnet skal være 'chatter'. Dette er angivet i chatterNavigation()-håndteringsmetoden. Indsæt følgende uddrag i 'js'-klassen.
// handler metode// sidenavn skal være chatter
// typen af siden er standard__namedPage for chatteren
chatterNavigation ( ) {
det her [ NavigationMixin. Navigere ] ( {
type : 'standard__namedPage' ,
egenskaber : {
sidenavn : 'snak'
}
} )
}
Produktion:
Opdater siden. Nu kan du sende opdateringerne og dele filerne i Chatter ved at navigere til det.
Navigerer til New Record
Uden at gå til den specifikke objektfane for at oprette en ny post, kan du direkte oprette en ny post for et bestemt objekt ved hjælp af Navigationstjenesten. I dette scenarie skal vi angive objektApiName og actionName som attributter.
- ObjectApiName er Salesforce-objektets API-navn som 'Konto', 'Kontakt', 'Sag' osv.
- Vi laver en ny rekord. Så handlingsnavnet skal være 'nyt'.
Navigation.html
Lad os oprette en sagsjournal. Vi laver en knap. Klik på denne 'newRecordNavigation' vil blive håndteret i 'js' filen.
< div klasse = 'slds-var-m-around_medium' stil = 'højde:20px; bredde:400px' >
< b > Du kan oprette en sag herfra... < / b >< br >< / div >
< / lyn-kort>
< / skabelon>
Navigation.js
Typen skal være 'standard__objectPage'. Dette er angivet i newRecordNavigation()-håndteringsmetoden. Indsæt følgende uddrag i 'js'-klassen.
// handler metode// Case er objektetApiName og actionName er Nyt.
// typen af siden er standard__objectPage
newRecordNavigation ( ) {
det her [ NavigationMixin. Navigere ] ( {
type : 'standard__objectPage' ,
egenskaber : {
objektApinavn : 'Sag' ,
handlingsnavn : 'ny'
}
} )
}
Produktion:
Opdater siden. Nu er du i stand til at oprette en post relateret til sagen.
Hvis du gemmer det, vil du navigere til dets registreringsside.
Navigerer til optagelsessiden
I lighed med den forrige navigation (eksempel 3), kan vi gå til den specifikke post og se eller redigere detaljerne. Endnu en egenskab, som du skal sende i attributterne, er 'recordId' (Id for den eksisterende post). ActionName skal være 'view' i dette scenarie.
Navigation.html
Lad os navigere til sagsjournalen. Vi laver en knap. Klik på denne 'viewRecordNavigation' vil blive håndteret i 'js' filen.
< div klasse = 'slds-var-m-around_medium' stil = 'højde:20px; bredde:400px' >
< b > Du kan se sagsprotokollen her... < / b >< br >< / div >
< / lyn-kort>
< / skabelon>
Navigation.js
Typen skal være 'standard__recordPage'. Dette er angivet i viewRecordNavigation()-håndteringsmetoden. Indsæt følgende uddrag i 'js'-klassen.
// handlermetode// Case er objektetApiName og actionName er view.
// typen af siden er standard__recordPage
viewRecordNavigation ( ) {
det her [ NavigationMixin. Navigere ] ( {
type : 'standard__recordPage' ,
egenskaber : {
recordId : '5002t00000PRrXkAAL' ,
objektApinavn : 'Sag' ,
handlingsnavn : 'udsigt'
}
} )
}
Produktion:
Du kan se sagsdetaljerne efter navigationen. Her kan du se og redigere sagsdetaljerne.
Andre navigationer
Lad os navigere til listevisning og filer. Til listevisningen skal du bruge objektnavnet og filternavnet. Du finder dette i URL'en. Det vil vi uddybe i eksemplet.
Filerne gemmes i ContentDocument-objektet. Så for filerne vil objectApiName være 'ContentDocument', og handlingsnavnet er 'home'.
Listevisning:
Filer:
Navigation.html
< div klasse = 'slds-var-m-around_medium' stil = 'højde:20px; bredde:400px' >
< b > Du kan navigere til listevisning < / b >< br >< / div >
< div klasse = 'slds-var-m-around_medium' stil = 'højde:20px; bredde:400px' >
< b > Du kan navigere til Filer < / b >< br >< / div >
< / lyn-kort>
< / skabelon>
Navigation.js
// Listview-handlerviewListNavigation ( ) {
det her [ NavigationMixin. Navigere ] ( {
type : 'standard__objectPage' ,
egenskaber : {
objektApinavn : 'Sag' ,
handlingsnavn : 'liste' ,
stat : {
filternavn : '00B2t000002oWELEA2'
}
}
} )
}
// Filesview-handler
viewFileNavigation ( ) {
det her [ NavigationMixin. Navigere ] ( {
type : 'standard__objectPage' ,
egenskaber : {
objektApinavn : 'Indholdsdokument' ,
handlingsnavn : 'hjem'
}
} )
}
Produktion:
Du vil navigere til din sagslistevisning. FilterName, som vi har angivet, er 'Alle lukkede sager'.
Du kan se dine filer fra denne app-side ved at klikke på knappen 'Gå til filer'.
Konklusion
Salesforce LWC giver den direkte navigation, hvor du kan navigere ved at blive på en bestemt side. I denne vejledning lærte vi de forskellige navigationer ved hjælp af Lightning Web Component Navigation Service. Der findes mange andre navigationer, men vi diskuterede den vigtige navigation, som alle LWC-udviklere skal kende. I alle navigationer skal NavigationMixin importeres fra lynet/navigationen.