De NavigationMixin moet geïmporteerd worden vanuit bliksem/navigatie in het “javascript” bestand. Navigeren is de beschikbare methode in deze module. Het vergt het type en de attributen. Het type specificeert het type pagina waarop we navigeren en de attributen hebben de naam pageName.
- Zoek vanuit de Installatie naar “Lightning App Builder” en klik op “Nieuw”.
- Kies de “App-pagina” en klik op “Volgende”.
- Geef het label 'Navigatieservices'.
- Ga met de ene regio en klik op 'Gereed'.
Uw app is klaar voor gebruik. Zoek ernaar onder de 'App Launcher'.
Voor alle voorbeelden van navigatiediensten die in deze handleiding worden besproken, gebruiken we hetzelfde “meta-xml”-bestand. U kunt de componenten op uw App-pagina plaatsen die u nu heeft gemaakt. We zullen dit bestand (meta-xml) niet opnieuw specificeren onder de voorbeeldcodefragmenten.
'1,0' ?>
Navigeren naar de startpagina
Als u naar de standaardstartpagina van Salesforce wilt navigeren, bekijk dan het volgende voorbeeld:
Navigatie.html
Wij maken een knop. De aanklik van deze “homeNavigation” wordt afgehandeld in het “js” bestand.
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
< B > U wordt doorgestuurd naar de startpagina < / B >< br >< / div >
< / bliksem-kaart>
< / sjabloon>
Navigatie.js
Het type moet “standard__namedPage” zijn en de pageName moet “home” zijn. Dit wordt gespecificeerd in de handlermethode homeNavigation().
importeren { BliksemElement } van 'geluk' ;
importeren { NavigatieMixin } van 'bliksem/navigatie'
exporteren standaard klas Navigatie strekt zich uit NavigatieMixin ( BliksemElement ) {
// handlermethode
// paginanaam zou home moeten zijn
// het type pagina is standard__namedPage voor de startpagina
homeNavigatie ( ) {
dit [ NavigatieMixin. Navigeren ] ( {
type : 'standaard__namedPagina' ,
attributen : {
paginanaam : 'thuis'
}
} )
}
}
Uitgang:
Voeg dit onderdeel toe aan de App-pagina en klik op de knop “Ga naar Homepagina”.
U bevindt zich nu op de startpagina.
Navigeren naar Chatter
U kunt de bestanden, sms-berichten en loggegevens delen met behulp van Salesforce Chatter. Het kan mogelijk zijn om rechtstreeks naar de Chatter te navigeren via de Navigatieservice.
Navigatie.html
Wij maken een knop. De aanklik van deze “chatterNavigation” wordt afgehandeld in het “js”-bestand.
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
< B > U wordt doorgestuurd naar Chatter < / B >< br >< / div >
< / bliksem-kaart>
< / sjabloon>
Navigatie.js
Het type moet “standard__namedPage” zijn en de paginanaam moet “chatter” zijn. Dit wordt gespecificeerd in de handlermethode chatterNavigation(). Plak het volgende fragment in de klasse 'js'.
// handlermethode// paginanaam moet chatter zijn
// het type pagina is standard__namedPage voor de chatter
chatterNavigatie ( ) {
dit [ NavigatieMixin. Navigeren ] ( {
type : 'standaard__namedPagina' ,
attributen : {
paginanaam : 'gebabbel'
}
} )
}
Uitgang:
Ververs de pagina. Nu kunt u de updates posten en de bestanden delen in Chatter door ernaar te navigeren.
Navigeren naar nieuwe record
Zonder naar het specifieke objecttabblad te gaan om een nieuw record aan te maken, kunt u met behulp van de Navigatieservice direct een nieuw record voor een specifiek object aanmaken. In dit scenario moeten we de objectApiName en actionName opgeven als attributen.
- De objectApiName is de API-naam van het Salesforce-object, zoals 'Account', 'Contact', 'Case', enzovoort.
- We maken een nieuw record aan. De actionName moet dus “nieuw” zijn.
Navigatie.html
Laten we een Caserecord maken. Wij maken een knop. De klik op deze “newRecordNavigation” wordt afgehandeld in het “js” -bestand.
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
< B > U kunt hier een casus aanmaken... < / B >< br >< / div >
< / bliksem-kaart>
< / sjabloon>
Navigatie.js
Het type moet “standaard__objectPage” zijn. Dit wordt gespecificeerd in de handlermethode newRecordNavigation(). Plak het volgende fragment in de klasse 'js'.
// handlermethode// Case is de objectApiName en actionName is New.
// het type pagina is standard__objectPage
nieuweRecordNavigatie ( ) {
dit [ NavigatieMixin. Navigeren ] ( {
type : 'standaard__objectPagina' ,
attributen : {
objectApiNaam : 'Geval' ,
actieNaam : 'nieuw'
}
} )
}
Uitgang:
Ververs de pagina. Nu kunt u een record maken dat verband houdt met de Case.
Als u het opslaat, navigeert u naar de recordpagina ervan.
Navigeren naar de recordpagina
Net als bij de vorige navigatie (Voorbeeld 3) kunnen we naar het specifieke record gaan en de details bekijken of bewerken. Nog een eigenschap die u in de attributen moet doorgeven is de “recordId” (Id van het bestaande record). De actionName moet in dit scenario 'view' zijn.
Navigatie.html
Laten we naar de Caserecord navigeren. Wij maken een knop. De klik op deze “viewRecordNavigation” wordt afgehandeld in het “js” -bestand.
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
< B > U kunt het casusdossier hier bekijken... < / B >< br >< / div >
< / bliksem-kaart>
< / sjabloon>
Navigatie.js
Het type moet “standaard__recordPage” zijn. Dit wordt gespecificeerd in de handlermethode viewRecordNavigation(). Plak het volgende fragment in de klasse 'js'.
// handlermethode// Case is de objectApiName en actionName is de weergave.
// het type pagina is standard__recordPage
bekijkRecordNavigatie ( ) {
dit [ NavigatieMixin. Navigeren ] ( {
type : 'standaard__recordPagina' ,
attributen : {
recordId : '5002t00000PRrXkAAL' ,
objectApiNaam : 'Geval' ,
actieNaam : 'weergave'
}
} )
}
Uitgang:
U kunt de casusdetails bekijken na de navigatie. Hier kunt u de casusdetails bekijken en bewerken.
Andere navigatie
Laten we naar Lijstweergave en bestanden navigeren. Voor de lijstweergave heeft u de objectnaam en filterName nodig. Deze vindt u in de URL. In het voorbeeld werken we dit verder uit.
De bestanden worden opgeslagen in het ContentDocument-object. Voor de bestanden is de objectApiName dus “ContentDocument” en de actionName “home”.
Lijstweergave:
Bestanden:
Navigatie.html
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
< B > U kunt naar Lijstweergave navigeren < / B >< br >< / div >
< div klas = 'slds-var-m-rond_medium' stijl = 'hoogte:20px; breedte:400px' >
< B > U kunt naar Bestanden navigeren < / B >< br >< / div >
< / bliksem-kaart>
< / sjabloon>
Navigatie.js
// Lijstweergave-handlerbekijkLijstNavigatie ( ) {
dit [ NavigatieMixin. Navigeren ] ( {
type : 'standaard__objectPagina' ,
attributen : {
objectApiNaam : 'Geval' ,
actieNaam : 'lijst' ,
staat : {
filterNaam : '00B2t000002oWELEA2'
}
}
} )
}
// Filesview-handler
bekijkBestandNavigatie ( ) {
dit [ NavigatieMixin. Navigeren ] ( {
type : 'standaard__objectPagina' ,
attributen : {
objectApiNaam : 'Inhoudsdocument' ,
actieNaam : 'thuis'
}
} )
}
Uitgang:
U navigeert naar uw caselijstweergave. De filternaam die we hebben opgegeven is 'Alle gesloten cases'.
U kunt uw bestanden bekijken vanaf deze app-pagina door op de knop 'Ga naar bestanden' te klikken.
Conclusie
De Salesforce LWC biedt de directe navigatie waarin u kunt navigeren terwijl u op een specifieke pagina blijft. In deze handleiding leerden we de verschillende navigatiemogelijkheden met behulp van de Lightning Web Component Navigation Service. Er bestaan nog veel meer navigatiesystemen, maar we hebben de belangrijke navigatie besproken die alle LWC-ontwikkelaars moeten kennen. In alle navigatie moet de NavigationMixin geïmporteerd worden uit de Lightning/navigatie.