NavigationMixin må importeres fra lightning/navigasjon i 'javascript'-filen. Navigering er den tilgjengelige metoden i denne modulen. Det tar typen og attributtene. Typen spesifiserer typen av siden vi navigerer på, og attributtene tar sidenavnet.
- Fra oppsettet, søk i 'Lightning App Builder' og klikk på 'Ny'.
- Velg 'App-siden' og klikk på 'Neste'.
- Gi etiketten 'Navigasjonstjenester'.
- Gå med den ene regionen og klikk på 'Ferdig'.
Appen din er klar til bruk. Søk etter det under 'App Launcher'.
For alle eksemplene på Navigasjonstjenesten som skal diskuteres i denne veiledningen, bruker vi den samme 'meta-xml'-filen. Du kan plassere komponentene på appsiden din som du opprettet nå. Vi vil ikke spesifisere denne filen (meta-xml) igjen under eksempelkodebitene.
'1.0' ?>
Navigerer til hjemmesiden
Hvis du vil navigere til Salesforce-standardhjemmesiden, se på følgende eksempel:
Navigation.html
Vi lager en knapp. Et klikk på denne 'homeNavigation' vil bli håndtert i 'js'-filen.
< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >
< b > Du vil bli omdirigert til hjemmesiden < / b >< br >< / div >
< / lyn-kort>
< / mal>
Navigation.js
Typen skal være 'standard__namedPage' og sidenavnet skal være 'home'. Dette er spesifisert i homeNavigation()-behandlingsmetoden.
import { LightningElement } fra 'flaks' ;
import { NavigationMixin } fra 'lyn/navigasjon'
eksport misligholde klasse Navigasjon strekker NavigationMixin ( LightningElement ) {
// behandlermetode
// sidenavn skal være hjemme
// typen av siden er standard__namedPage for hjemmet
hjemNavigasjon ( ) {
dette [ NavigationMixin. Navigere ] ( {
type : 'standard__namedPage' ,
attributter : {
sidenavn : 'hjem'
}
} )
}
}
Produksjon:
Legg til denne komponenten på app-siden og klikk på 'Gå til startside'-knappen.
Nå er du på startsiden.
Navigerer til Chatter
Du kan dele filene, tekstmeldingene og loggdetaljene ved å bruke Salesforce Chatter. Det kan være mulig å navigere til Chatter direkte ved å bruke navigasjonstjenesten.
Navigation.html
Vi lager en knapp. Klikket på denne 'chatterNavigation' vil bli håndtert i 'js'-filen.
< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >
< b > Du vil bli omdirigert til Chatter < / b >< br >< / div >
< / lyn-kort>
< / mal>
Navigation.js
Typen skal være 'standard__namedPage' og sidenavnet skal være 'chatter'. Dette er spesifisert i chatterNavigation()-behandlingsmetoden. Lim inn følgende kodebit i 'js'-klassen.
// behandlermetode// sidenavn skal være chatter
// typen av siden er standard__namedPage for chatten
chatterNavigasjon ( ) {
dette [ NavigationMixin. Navigere ] ( {
type : 'standard__namedPage' ,
attributter : {
sidenavn : 'skravling'
}
} )
}
Produksjon:
Oppdater siden. Nå kan du legge ut oppdateringene og dele filene i Chatter ved å navigere til den.
Navigerer til New Record
Uten å gå til den spesifikke objektfanen for å opprette en ny post, kan du direkte opprette en ny post for et bestemt objekt ved å bruke navigasjonstjenesten. I dette scenariet må vi spesifisere objektApiName og actionName som attributter.
- ObjectApiName er Salesforce-objektets API-navn som 'Konto', 'Kontakt', 'Sak' osv.
- Vi lager ny rekord. Så handlingsnavnet skal være 'nytt'.
Navigation.html
La oss opprette en sakspost. Vi lager en knapp. Klikket på denne 'newRecordNavigation' vil bli håndtert i 'js'-filen.
< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >
< b > Du kan opprette en sak herfra... < / b >< br >< / div >
< / lyn-kort>
< / mal>
Navigation.js
Typen skal være 'standard__objectPage'. Dette er spesifisert i behandlermetoden newRecordNavigation(). Lim inn følgende kodebit i 'js'-klassen.
// behandlermetode// Sak er objektetApiName og handlingsnavn er nytt.
// typen av siden er standard__objectPage
newRecordNavigation ( ) {
dette [ NavigationMixin. Navigere ] ( {
type : 'standard__objectPage' ,
attributter : {
objektApinavn : 'Sak' ,
handlingsnavn : 'ny'
}
} )
}
Produksjon:
Oppdater siden. Nå kan du opprette en post relatert til saken.
Hvis du lagrer den, vil du navigere til registreringssiden.
Navigerer til postsiden
I likhet med forrige navigasjon (eksempel 3), kan vi gå til den spesifikke posten og se eller redigere detaljene. En annen egenskap du må sende inn i attributtene er 'recordId' (Id for den eksisterende posten). ActionName skal være 'view' i dette scenariet.
Navigation.html
La oss navigere til saksposten. Vi lager en knapp. Klikket på denne 'viewRecordNavigation' vil bli håndtert i 'js'-filen.
< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >
< b > Du kan se saksprotokollen her... < / b >< br >< / div >
< / lyn-kort>
< / mal>
Navigation.js
Typen skal være 'standard__recordPage'. Dette er spesifisert i behandlermetoden viewRecordNavigation(). Lim inn følgende kodebit i 'js'-klassen.
// behandlermetode// Case er objektetApiName og actionName er view.
// typen av siden er standard__recordPage
viewRecordNavigation ( ) {
dette [ NavigationMixin. Navigere ] ( {
type : 'standard__recordPage' ,
attributter : {
recordId : '5002t00000PRrXkAAL' ,
objektApiName : 'Sak' ,
handlingsnavn : 'utsikt'
}
} )
}
Produksjon:
Du kan se saksdetaljene etter navigasjonen. Her kan du se og redigere saksdetaljene.
Andre navigasjoner
La oss navigere til listevisning og filer. For listevisningen trenger du objektnavnet og filternavnet. Du finner dette i URL-en. Vi vil utdype dette i eksempelet.
Filene lagres i ContentDocument-objektet. Så for filene vil objectApiName være 'ContentDocument' og handlingsnavnet er 'home'.
Listevisning:
Filer:
Navigation.html
< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >
< b > Du kan navigere til listevisning < / b >< br >< / div >
< div klasse = 'slds-var-m-around_medium' stil = 'høyde:20px; bredde:400px' >
< b > Du kan navigere til Filer < / b >< br >< / div >
< / lyn-kort>
< / mal>
Navigation.js
// ListevisningsbehandlerviewListNavigation ( ) {
dette [ NavigationMixin. Navigere ] ( {
type : 'standard__objectPage' ,
attributter : {
objektApiName : 'Sak' ,
handlingsnavn : 'liste' ,
stat : {
filternavn : '00B2t000002oWELEA2'
}
}
} )
}
// Filesview-behandler
viewFileNavigation ( ) {
dette [ NavigationMixin. Navigere ] ( {
type : 'standard__objectPage' ,
attributter : {
objektApiName : 'ContentDocument' ,
handlingsnavn : 'hjem'
}
} )
}
Produksjon:
Du vil navigere til sakslistevisningen. FilterName som vi spesifiserte er 'Alle lukkede saker'.
Du kan se filene dine fra denne appsiden ved å klikke på 'Gå til filer'-knappen.
Konklusjon
Salesforce LWC gir direkte navigasjon der du kan navigere ved å bo på en bestemt side. I denne veiledningen lærte vi den forskjellige navigasjonen ved å bruke Lightning Web Component Navigation Service. Det finnes mange andre navigasjoner, men vi diskuterte den viktige navigasjonen som alle LWC-utviklere må kjenne til. I alle navigasjonene må NavigationMixin importeres fra lynet/navigasjonen.