Das NavigationMixin muss aus Lightning/Navigation in die „Javascript“-Datei importiert werden. Navigieren ist die in diesem Modul verfügbare Methode. Es übernimmt den Typ und die Attribute. Der Typ gibt den Typ der Seite an, durch die wir navigieren, und die Attribute nehmen den Seitennamen an.
- Suchen Sie im Setup nach „Lightning App Builder“ und klicken Sie auf „Neu“.
- Wählen Sie die „App-Seite“ und klicken Sie auf „Weiter“.
- Geben Sie als Bezeichnung „Navigationsdienste“ ein.
- Gehen Sie zu einer Region und klicken Sie auf „Fertig“.
Ihre App ist einsatzbereit. Suchen Sie im „App Launcher“ danach.
Für alle Navigationsdienst-Beispiele, die in diesem Handbuch besprochen werden, verwenden wir dieselbe „meta-xml“-Datei. Sie können die Komponenten jetzt auf Ihrer App-Seite platzieren. Wir werden diese Datei (meta-xml) unter den Beispielcode-Schnipseln nicht noch einmal angeben.
„1,0“ ?>
Navigieren zur Startseite
Wenn Sie zur Standard-Homepage von Salesforce navigieren möchten, sehen Sie sich das folgende Beispiel an:
Navigation.html
Wir erstellen einen Button. Der Klick auf diese „homeNavigation“ wird in der „js“-Datei verarbeitet.
< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >
< B > Sie werden zur Startseite weitergeleitet < / B >< br >< / div >
< / Blitzkarte>
< / Vorlage>
Navigation.js
Der Typ sollte „standard__namedPage“ sein und der Seitenname sollte „home“ sein. Dies wird in der Handler-Methode homeNavigation() angegeben.
importieren { LightningElement } aus 'Glück' ;
importieren { NavigationMixin } aus 'Blitz/Navigation'
Export Standard Klasse Navigation erweitert NavigationMixin ( LightningElement ) {
// Handler-Methode
// pageName sollte home sein
// Typ der Seite ist Standard__namedPage für die Startseite
StartseiteNavigation ( ) {
Das [ NavigationMixin. Navigieren ] ( {
Typ : 'standard__namedPage' ,
Attribute : {
Seitenname : 'heim'
}
} )
}
}
Ausgabe:
Fügen Sie diese Komponente zur App-Seite hinzu und klicken Sie auf die Schaltfläche „Zur Startseite gehen“.
Jetzt befinden Sie sich auf der Startseite.
Navigieren zu Chatter
Sie können die Dateien, Textnachrichten und Protokolldetails mit Salesforce Chatter teilen. Es kann möglich sein, direkt über den Navigationsdienst zum Chatter zu navigieren.
Navigation.html
Wir erstellen einen Button. Der Klick auf diese „chatterNavigation“ wird in der „js“-Datei verarbeitet.
< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >
< B > Sie werden zu Chatter weitergeleitet < / B >< br >< / div >
< / Blitzkarte>
< / Vorlage>
Navigation.js
Der Typ sollte „standard__namedPage“ sein und der Seitenname sollte „chatter“ sein. Dies wird innerhalb der chatterNavigation()-Handler-Methode angegeben. Fügen Sie den folgenden Ausschnitt in die Klasse „js“ ein.
// Handler-Methode// Seitenname sollte Chatter sein
// Typ der Seite ist Standard__namedPage für den Chatter
chatterNavigation ( ) {
Das [ NavigationMixin. Navigieren ] ( {
Typ : 'standard__namedPage' ,
Attribute : {
Seitenname : 'Geschwätz'
}
} )
}
Ausgabe:
Lade die Seite neu. Jetzt können Sie die Aktualisierungen veröffentlichen und die Dateien in Chatter freigeben, indem Sie dorthin navigieren.
Navigieren zum neuen Datensatz
Ohne zum Erstellen eines neuen Datensatzes zur Registerkarte „Bestimmtes Objekt“ wechseln zu müssen, können Sie mithilfe des Navigationsdienstes direkt einen neuen Datensatz für ein bestimmtes Objekt erstellen. In diesem Szenario müssen wir objectApiName und actionName als Attribute angeben.
- Der objectApiName ist der Salesforce-Objekt-API-Name wie „Konto“, „Kontakt“, „Fall“ usw.
- Wir erstellen einen neuen Datensatz. Der Aktionsname sollte also „neu“ sein.
Navigation.html
Lassen Sie uns einen Falldatensatz erstellen. Wir erstellen einen Button. Der Klick auf diese „newRecordNavigation“ wird in der „js“-Datei verarbeitet.
< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >
< B > Hier können Sie einen Fall erstellen... < / B >< br >< / div >
< / Blitzkarte>
< / Vorlage>
Navigation.js
Der Typ sollte „standard__objectPage“ sein. Dies wird in der Handler-Methode newRecordNavigation() angegeben. Fügen Sie den folgenden Ausschnitt in die Klasse „js“ ein.
// Handler-Methode// Case ist der objectApiName und actionName ist New.
// Typ der Seite ist standard__objectPage
newRecordNavigation ( ) {
Das [ NavigationMixin. Navigieren ] ( {
Typ : 'standard__objectPage' ,
Attribute : {
objectApiName : 'Fall' ,
Aktionsname : 'neu'
}
} )
}
Ausgabe:
Lade die Seite neu. Jetzt können Sie einen Datensatz zu dem Fall erstellen.
Wenn Sie es speichern, navigieren Sie zu seiner Datensatzseite.
Navigieren zur Datensatzseite
Ähnlich wie bei der vorherigen Navigation (Beispiel 3) können wir zum jeweiligen Datensatz gehen und die Details anzeigen oder bearbeiten. Eine weitere Eigenschaft, die Sie in den Attributen übergeben müssen, ist die „recordId“ (ID des vorhandenen Datensatzes). Der Aktionsname sollte in diesem Szenario „view“ lauten.
Navigation.html
Navigieren wir zum Falldatensatz. Wir erstellen einen Button. Der Klick auf diese „viewRecordNavigation“ wird in der „js“-Datei verarbeitet.
< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >
< B > Sie können die Fallakte hier einsehen... < / B >< br >< / div >
< / Blitzkarte>
< / Vorlage>
Navigation.js
Der Typ sollte „standard__recordPage“ sein. Dies wird in der ViewRecordNavigation()-Handler-Methode angegeben. Fügen Sie den folgenden Ausschnitt in die Klasse „js“ ein.
// Handler-Methode// Case ist der objectApiName und actionName ist view.
// Typ der Seite ist standard__recordPage
viewRecordNavigation ( ) {
Das [ NavigationMixin. Navigieren ] ( {
Typ : 'standard__recordPage' ,
Attribute : {
Datensatz-ID : '5002t00000PRrXkAAL' ,
objectApiName : 'Fall' ,
Aktionsname : 'Sicht'
}
} )
}
Ausgabe:
Die Falldetails können Sie nach der Navigation einsehen. Hier können Sie die Falldetails einsehen und bearbeiten.
Andere Navigationen
Navigieren wir zur Listenansicht und zu den Dateien. Für die Listenansicht benötigen Sie den Objektnamen und den Filternamen. Diese finden Sie in der URL. Wir werden dies im Beispiel näher erläutern.
Die Dateien werden im ContentDocument-Objekt gespeichert. Für die Dateien lautet der objectApiName also „ContentDocument“ und der actionName „home“.
Listenansicht:
Dateien:
Navigation.html
< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >
< B > Sie können zur Listenansicht navigieren < / B >< br >< / div >
< div Klasse = „slds-var-m-around_medium“ Stil = „Höhe:20px; Breite:400px“ >
< B > Sie können zu Dateien navigieren < / B >< br >< / div >
< / Blitzkarte>
< / Vorlage>
Navigation.js
// Listview-HandlerviewListNavigation ( ) {
Das [ NavigationMixin. Navigieren ] ( {
Typ : 'standard__objectPage' ,
Attribute : {
objectApiName : 'Fall' ,
Aktionsname : 'Liste' ,
Zustand : {
Filtername : '00B2t000002oWELEA2'
}
}
} )
}
// Filesview-Handler
viewFileNavigation ( ) {
Das [ NavigationMixin. Navigieren ] ( {
Typ : 'standard__objectPage' ,
Attribute : {
objectApiName : 'ContentDocument' ,
Aktionsname : 'heim'
}
} )
}
Ausgabe:
Sie navigieren zu Ihrer Falllistenansicht. Der von uns angegebene Filtername lautet „Alle geschlossenen Fälle“.
Sie können Ihre Dateien auf dieser App-Seite anzeigen, indem Sie auf die Schaltfläche „Gehe zu Dateien“ klicken.
Abschluss
Der Salesforce LWC bietet die direkte Navigation, mit der Sie navigieren können, während Sie auf einer bestimmten Seite bleiben. In diesem Leitfaden haben wir die verschiedenen Navigationsmöglichkeiten mit dem Lightning Web Component Navigation Service kennengelernt. Es gibt viele andere Navigationen, aber wir haben die wichtige Navigation besprochen, die alle LWC-Entwickler kennen müssen. Bei allen Navigationen muss das NavigationMixin aus der Lightning/Navigation importiert werden.