NawigacjęMixin należy zaimportować z Lightning/Navigation w pliku „javascript”. Nawigacja to metoda dostępna w tym module. Pobiera typ i atrybuty. Typ określa typ strony, po której się poruszamy, a atrybuty przyjmują pageName.
- W ustawieniach wyszukaj „Lightning App Builder” i kliknij „Nowy”.
- Wybierz „Strona aplikacji” i kliknij „Dalej”.
- Nadaj etykietę „Usługi nawigacyjne”.
- Wybierz jeden region i kliknij „Gotowe”.
Twoja aplikacja jest gotowa do użycia. Wyszukaj go w „Menu z aplikacjami”.
We wszystkich przykładach usług nawigacji, które zostaną omówione w tym przewodniku, używamy tego samego pliku „meta-xml”. Możesz umieścić komponenty na utworzonej teraz stronie aplikacji. Nie będziemy ponownie określać tego pliku (meta-xml) w przykładowych fragmentach kodu.
„1,0” ?>
Przechodzenie do strony głównej
Jeśli chcesz przejść do standardowej strony głównej Salesforce, spójrz na następujący przykład:
Nawigacja.html
Tworzymy przycisk. Kliknięcie tej „homeNavigation” będzie obsługiwane w pliku „js”.
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
< B > Zostaniesz przekierowany na stronę główną < / B >< br >< / div >
< / karta-błyskawica>
< / szablon>
Nawigacja.js
Typ powinien mieć wartość „standard__namedPage”, a nazwa strony powinna mieć wartość „home”. Jest to określone w metodzie obsługi homeNavigation().
import { Element Błyskawicy } z 'szczęście' ;
import { NawigacjaMixin } z „błyskawica / nawigacja”
eksport domyślny klasa Nawigacja rozciąga się NawigacjaMixin ( Element Błyskawicy ) {
// metoda obsługi
// nazwa strony powinna być domem
// typ strony to standard__namedPage dla domu
Strona głównaNawigacja ( ) {
Ten [ NawigacjaMixin. Nawigować ] ( {
typ : „standardowa_strona o nazwie” ,
atrybuty : {
Nazwa strony : 'dom'
}
} )
}
}
Wyjście:
Dodaj ten komponent do strony aplikacji i kliknij przycisk „Przejdź do strony głównej”.
Jesteś teraz na stronie głównej.
Przechodzenie do Czatu
Możesz udostępniać pliki, wiadomości tekstowe i szczegóły dziennika za pomocą Salesforce Chatter. Możliwe jest bezpośrednie przejście do Czatu za pomocą Usługi Nawigacyjnej.
Nawigacja.html
Tworzymy przycisk. Kliknięcie tej „chatterNavigation” będzie obsługiwane w pliku „js”.
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
< B > Zostaniesz przekierowany do Czatu < / B >< br >< / div >
< / karta-błyskawica>
< / szablon>
Nawigacja.js
Typ powinien mieć wartość „standard__namedPage”, a nazwa strony powinna mieć wartość „gatter”. Jest to określone w metodzie obsługi chatterNavigation(). Wklej następujący fragment kodu do klasy „js”.
// metoda obsługi// nazwa strony powinna być gadaniem
// typ strony to standard__namedPage dla rozmówców
czatNawigacja ( ) {
Ten [ NawigacjaMixin. Nawigować ] ( {
typ : „standardowa_strona o nazwie” ,
atrybuty : {
Nazwa strony : 'gadać'
}
} )
}
Wyjście:
Odśwież stronę. Teraz możesz publikować aktualizacje i udostępniać pliki w Chatter, przechodząc do niego.
Przechodzenie do nowego rekordu
Bez konieczności przechodzenia do zakładki konkretnego obiektu w celu utworzenia nowego rekordu, możesz bezpośrednio utworzyć nowy rekord dla konkretnego obiektu korzystając z Usługi Nawigacyjnej. W tym scenariuszu musimy określić objectApiName i actionName jako atrybuty.
- ObjectApiName to nazwa API obiektu Salesforce, np. „Konto”, „Kontakt”, „Sprawa” itp.
- Tworzymy nowy rekord. Zatem nazwa akcji powinna mieć wartość „nowa”.
Nawigacja.html
Utwórzmy rekord Sprawa. Tworzymy przycisk. Kliknięcie tego „newRecordNavigation” będzie obsługiwane w pliku „js”.
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
< B > Tutaj możesz utworzyć sprawę... < / B >< br >< / div >
< / karta-błyskawica>
< / szablon>
Nawigacja.js
Typ powinien mieć postać „standard__objectPage”. Jest to określone w metodzie obsługi newRecordNavigation(). Wklej następujący fragment kodu do klasy „js”.
// metoda obsługi// Case to nazwa obiektuApiName, a nazwa akcji to New.
// typ strony to standard__objectPage
nowyRekordNawigacja ( ) {
Ten [ NawigacjaMixin. Nawigować ] ( {
typ : „standardowa_strona obiektu” ,
atrybuty : {
nazwaApi obiektu : 'Sprawa' ,
Nazwa akcji : 'nowy'
}
} )
}
Wyjście:
Odśwież stronę. Teraz możesz utworzyć rekord powiązany ze Sprawą.
Jeśli go zapiszesz, przejdziesz do strony jego zapisów.
Przechodzenie do strony rekordu
Podobnie jak w poprzedniej nawigacji (Przykład 3), możemy przejść do konkretnego rekordu i wyświetlić lub edytować szczegóły. Jeszcze jedną właściwością, którą należy przekazać w atrybutach, jest „recordId” (identyfikator istniejącego rekordu). W tym scenariuszu nazwa akcji powinna mieć wartość „widok”.
Nawigacja.html
Przejdźmy do rekordu Sprawa. Tworzymy przycisk. Kliknięcie tego „viewRecordNavigation” będzie obsługiwane w pliku „js”.
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
< B > Tutaj możesz zobaczyć akta sprawy... < / B >< br >< / div >
< / karta-błyskawica>
< / szablon>
Nawigacja.js
Typ powinien mieć postać „standard__recordPage”. Jest to określone w metodzie obsługi viewRecordNavigation(). Wklej następujący fragment kodu do klasy „js”.
// metoda obsługi// Case to nazwa obiektuApiName, a nazwa akcji to widok.
// typ strony to standard__recordPage
zobaczRekordNawigacji ( ) {
Ten [ NawigacjaMixin. Nawigować ] ( {
typ : „standardowa_strona rekordu” ,
atrybuty : {
identyfikator rekordu : „5002t00000PRrXkAAL” ,
nazwaApi obiektu : 'Sprawa' ,
Nazwa akcji : 'pogląd'
}
} )
}
Wyjście:
Szczegóły sprawy możesz zobaczyć po nawigacji. Tutaj możesz przeglądać i edytować szczegóły sprawy.
Inne nawigacje
Przejdźmy do widoku listy i plików. W przypadku widoku listy wymagana będzie nazwa obiektu i nazwa_filtru. Znajdziesz to w adresie URL. Wyjaśnimy to na przykładzie.
Pliki są przechowywane w obiekcie ContentDocument. Zatem w przypadku plików obiektApiName będzie miał wartość „ContentDocument”, a nazwa akcji to „home”.
Widok listy:
Akta:
Nawigacja.html
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
< B > Możesz przejść do widoku listy < / B >< br >< / div >
< div klasa = „slds-var-m-around_medium” styl = „wysokość: 20 pikseli; szerokość: 400 pikseli” >
< B > Możesz przejść do Plików < / B >< br >< / div >
< / karta-błyskawica>
< / szablon>
Nawigacja.js
// Procedura obsługi widoku listyprzeglądanie listyNawigacja ( ) {
Ten [ NawigacjaMixin. Nawigować ] ( {
typ : „standardowa_strona obiektu” ,
atrybuty : {
nazwaApi obiektu : 'Sprawa' ,
Nazwa akcji : 'lista' ,
państwo : {
nazwa filtra : „00B2t000002oWELEA2”
}
}
} )
}
// Obsługa widoku plików
zobacz nawigację plików ( ) {
Ten [ NawigacjaMixin. Nawigować ] ( {
typ : „standardowa_strona obiektu” ,
atrybuty : {
nazwaApi obiektu : „Dokument treści” ,
Nazwa akcji : 'dom'
}
} )
}
Wyjście:
Nastąpi przejście do widoku listy spraw. Podana przez nas nazwa filtra to „Wszystkie zamknięte sprawy”.
Możesz przeglądać swoje pliki na tej stronie aplikacji, klikając przycisk „Przejdź do plików”.
Wniosek
Salesforce LWC zapewnia bezpośrednią nawigację, w ramach której możesz nawigować pozostając na określonej stronie. W tym przewodniku poznaliśmy różne sposoby nawigacji przy użyciu usługi nawigacji komponentów Lightning Web. Istnieje wiele innych nawigacji, ale omówiliśmy ważną nawigację, którą muszą znać wszyscy programiści LWC. We wszystkich nawigacjach należy zaimportować NawigacjęMixin z błyskawicy/nawigacji.