NavigationMixin måste importeras från lightning/navigering i 'javascript'-filen. Navigera är den tillgängliga metoden i denna modul. Det tar typ och attribut. Typen anger typen av sidan som vi navigerar och attributen tar pageName.
- Från inställningen, sök i 'Lightning App Builder' och klicka på 'Ny'.
- Välj 'App-sidan' och klicka på 'Nästa'.
- Ange etiketten som 'Navigationstjänster'.
- Gå till en region och klicka på 'Klar'.
Din app är redo att användas. Sök efter det under 'App Launcher'.
För alla exempel på Navigationstjänsten som kommer att diskuteras i den här guiden använder vi samma 'meta-xml'-fil. Du kan placera komponenterna på din appsida som du skapade nu. Vi kommer inte att specificera den här filen (meta-xml) igen under exempelkodavsnitten.
'1.0' ?>
Navigerar till startsidan
Om du vill navigera till Salesforces standardhemsida, titta på följande exempel:
Navigation.html
Vi skapar en knapp. Klicka på denna 'homeNavigation' kommer att hanteras i 'js'-filen.
< div klass = 'slds-var-m-around_medium' stil = 'höjd:20px; bredd:400px' >
< b > Du kommer att omdirigeras till startsidan < / b >< br >< / div >
< / blixtkort>
< / mall>
Navigation.js
Typen ska vara 'standard__namedPage' och pageName ska vara 'home'. Detta anges i homeNavigation()-hanterarmetoden.
importera { LightningElement } från 'tur' ;
importera { NavigationMixin } från 'blixt/navigering'
exportera standard klass Navigering sträcker sig NavigationMixin ( LightningElement ) {
// hanterarmetod
// pageName bör vara hemma
// sidans typ är standard__namedPage för hemmet
hemNavigering ( ) {
detta [ NavigationMixin. Navigera ] ( {
typ : 'standard__namedPage' ,
attribut : {
sidnamn : 'Hem'
}
} )
}
}
Produktion:
Lägg till den här komponenten på appsidan och klicka på knappen 'Gå till startsidan'.
Nu är du på startsidan.
Navigerar till Chatter
Du kan dela filer, textmeddelanden och loggdetaljer med Salesforce Chatter. Det kan vara möjligt att navigera till Chattern direkt med hjälp av Navigationstjänsten.
Navigation.html
Vi skapar en knapp. Klicka på denna 'chatterNavigation' kommer att hanteras i 'js'-filen.
< div klass = 'slds-var-m-around_medium' stil = 'höjd:20px; bredd:400px' >
< b > Du kommer att omdirigeras till Chatter < / b >< br >< / div >
< / blixtkort>
< / mall>
Navigation.js
Typen ska vara 'standard__namedPage' och pageName ska vara 'chatter'. Detta anges i hanterarmetoden chatterNavigation(). Klistra in följande kodavsnitt i klassen 'js'.
// hanterarmetod// pageName ska vara chatter
// sidans typ är standard__namedPage för chatten
chatterNavigering ( ) {
detta [ NavigationMixin. Navigera ] ( {
typ : 'standard__namedPage' ,
attribut : {
sidnamn : 'prat'
}
} )
}
Produktion:
Uppdatera sidan. Nu kan du lägga upp uppdateringarna och dela filerna i Chatter genom att navigera till den.
Navigerar till New Record
Utan att gå till den specifika objektfliken för att skapa en ny post, kan du direkt skapa en ny post för ett specifikt objekt med hjälp av Navigationstjänsten. I det här scenariot måste vi ange objektApiName och actionName som attribut.
- ObjectApiName är Salesforce-objektets API-namn som 'Konto', 'Kontakt', 'Case' etc.
- Vi skapar ett nytt rekord. Så handlingsnamnet bör vara 'nytt'.
Navigation.html
Låt oss skapa en ärendepost. Vi skapar en knapp. Klicka på denna 'newRecordNavigation' kommer att hanteras i 'js'-filen.
< div klass = 'slds-var-m-around_medium' stil = 'höjd:20px; bredd:400px' >
< b > Du kan skapa ett ärende härifrån... < / b >< br >< / div >
< / blixtkort>
< / mall>
Navigation.js
Typen ska vara 'standard__objectPage'. Detta anges i hanterarmetoden newRecordNavigation(). Klistra in följande kodavsnitt i klassen 'js'.
// hanterarmetod// Case är objektetApiName och actionName är nytt.
// sidans typ är standard__objectPage
newRecordNavigation ( ) {
detta [ NavigationMixin. Navigera ] ( {
typ : 'standard__objectPage' ,
attribut : {
objektApinamn : 'Fall' ,
actionName : 'ny'
}
} )
}
Produktion:
Uppdatera sidan. Nu kan du skapa en post relaterad till ärendet.
Om du sparar den, navigerar du till dess postsida.
Navigerar till postsidan
I likhet med föregående navigering (exempel 3), kan vi gå till den specifika posten och visa eller redigera detaljerna. En annan egenskap som du behöver skicka i attributen är 'recordId' (Id för den befintliga posten). ActionName ska vara 'view' i det här scenariot.
Navigation.html
Låt oss navigera till ärendeposten. Vi skapar en knapp. Klicka på denna 'viewRecordNavigation' kommer att hanteras i 'js'-filen.
< div klass = 'slds-var-m-around_medium' stil = 'höjd:20px; bredd:400px' >
< b > Du kan se ärendet härifrån... < / b >< br >< / div >
< / blixtkort>
< / mall>
Navigation.js
Typen ska vara 'standard__recordPage'. Detta anges i hanterarmetoden viewRecordNavigation(). Klistra in följande kodavsnitt i klassen 'js'.
// hanterarmetod// Case är objectApiName och actionName är vy.
// sidans typ är standard__recordPage
viewRecordNavigation ( ) {
detta [ NavigationMixin. Navigera ] ( {
typ : 'standard__recordPage' ,
attribut : {
recordId : '5002t00000PRrXkAAL' ,
objektApinamn : 'Fall' ,
actionName : 'se'
}
} )
}
Produktion:
Du kan se ärendedetaljerna efter navigeringen. Här kan du se och redigera ärendedetaljerna.
Övriga navigationer
Låt oss navigera till listvy och filer. För listvyn behöver du objektnamnet och filterName. Du hittar detta i URL:en. Vi kommer att utveckla detta i exemplet.
Filerna lagras i ContentDocument-objektet. Så för filerna kommer objectApiName att vara 'ContentDocument' och actionName är 'home'.
Listvy:
Filer:
Navigation.html
< div klass = 'slds-var-m-around_medium' stil = 'höjd:20px; bredd:400px' >
< b > Du kan navigera till listvy < / b >< br >< / div >
< div klass = 'slds-var-m-around_medium' stil = 'höjd:20px; bredd:400px' >
< b > Du kan navigera till Filer < / b >< br >< / div >
< / blixtkort>
< / mall>
Navigation.js
// Listview-hanterareviewListNavigation ( ) {
detta [ NavigationMixin. Navigera ] ( {
typ : 'standard__objectPage' ,
attribut : {
objectApiName : 'Fall' ,
actionName : 'lista' ,
stat : {
filternamn : '00B2t000002oWELEA2'
}
}
} )
}
// Filesview-hanterare
viewFileNavigation ( ) {
detta [ NavigationMixin. Navigera ] ( {
typ : 'standard__objectPage' ,
attribut : {
objektApinamn : 'ContentDocument' ,
actionName : 'Hem'
}
} )
}
Produktion:
Du navigerar till din ärendelistavy. FilterName som vi angav är 'Alla stängda ärenden'.
Du kan se dina filer från den här appsidan genom att klicka på knappen 'Gå till filer'.
Slutsats
Salesforce LWC tillhandahåller den direkta navigeringen där du kan navigera genom att stanna kvar på en specifik sida. I den här guiden lärde vi oss olika navigering med hjälp av Lightning Web Component Navigation Service. Det finns många andra navigationer som finns men vi diskuterade den viktiga navigeringen som alla LWC-utvecklare måste känna till. I alla navigationer måste NavigationMixin importeras från blixten/navigeringen.