NavigationMixin trebuie să fie importat din lightning/navigation în fișierul „javascript”. Navigarea este metoda disponibilă în acest modul. Ia tipul și atributele. Tipul specifică tipul paginii pe care navigăm, iar atributele iau pageName.
- Din Configurare, căutați „Lightning App Builder” și faceți clic pe „Nou”.
- Alegeți „Pagina aplicației” și faceți clic pe „Următorul”.
- Dați eticheta „Servicii de navigație”.
- Mergeți cu o singură regiune și faceți clic pe „Terminat”.
Aplicația dvs. este gata de utilizare. Căutați-l în „Lansatorul de aplicații”.
Pentru toate exemplele Serviciului de navigare care vor fi discutate în acest ghid, folosim același fișier „meta-xml”. Puteți plasa componentele în pagina de aplicație pe care ați creat-o acum. Nu vom specifica acest fișier (meta-xml) din nou sub exemplele de fragmente de cod.
„1.0” ?>
<ținte>
Navigarea la Pagina de pornire
Dacă doriți să navigați la pagina de pornire standard Salesforce, priviți următorul exemplu:
Navigation.html
Creăm un buton. Făcând clic pe acest „homeNavigation” va fi gestionat în fișierul „js”.
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
< b > Veți fi redirecționat către Pagina de pornire < / b >< br >< / div >
< / carte-fulger>
< / șablon>
Navigation.js
Tipul ar trebui să fie „standard__namedPage” și pageName ar trebui să fie „acasă”. Acest lucru este specificat în cadrul metodei de gestionare homeNavigation().
import { LightningElement } din 'noroc' ;
import { Navigation Mixin } din „fulger/navigație”
export Mod implicit clasă Navigare se extinde Navigation Mixin ( LightningElement ) {
// metoda handlerului
// pageName ar trebui să fie acasă
// tipul paginii este standard__namedPage pentru home
acasăNavigație ( ) {
acest [ Navigation Mixin. Navigați ] ( {
tip : „standard__namedPage” ,
atribute : {
pageName : 'Acasă'
}
} )
}
}
Ieșire:
Adăugați această componentă la pagina de aplicație și faceți clic pe butonul „Mergeți la pagina de pornire”.
Acum, sunteți pe pagina de pornire.
Navigarea către Chatter
Puteți partaja fișierele, mesajele text și detaliile jurnalului folosind Salesforce Chatter. Este posibil să navigați direct la Chatter folosind Serviciul de navigare.
Navigation.html
Creăm un buton. Clic pe acest „chatterNavigation” va fi tratat în fișierul „js”.
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
< b > Veți fi redirecționat către Chatter < / b >< br >< / div >
< / carte-fulger>
< / șablon>
Navigation.js
Tipul ar trebui să fie „standard__namedPage” iar pageName ar trebui să fie „chatter”. Acest lucru este specificat în cadrul metodei de gestionare chatterNavigation(). Lipiți următorul fragment în clasa „js”.
// metoda handlerului// pageName ar trebui să fie chatter
// tipul paginii este standard__namedPage pentru chatter
chatterNavigation ( ) {
acest [ Navigation Mixin. Navigați ] ( {
tip : „standard__namedPage” ,
atribute : {
pageName : 'vorbire'
}
} )
}
Ieșire:
Reincarca Pagina. Acum, puteți publica actualizările și partaja fișierele în Chatter navigând la el.
Navigarea la Înregistrare nouă
Fără a accesa fila obiect specific pentru a crea o înregistrare nouă, puteți crea direct o înregistrare nouă pentru un anumit obiect utilizând Serviciul de navigare. În acest scenariu, trebuie să specificăm objectApiName și actionName ca atribute.
- ObjectApiName este numele API al obiectului Salesforce, cum ar fi „Cont”, „Contact”, „Caz”, etc.
- Creăm o nouă înregistrare. Deci, actionName ar trebui să fie „nou”.
Navigation.html
Să creăm o înregistrare de caz. Creăm un buton. Clic pe acest „newRecordNavigation” va fi tratat în fișierul „js”.
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
< b > Puteți crea un caz de aici... < / b >< br >< / div >
< / carte-fulger>
< / șablon>
Navigation.js
Tipul ar trebui să fie „standard__objectPage”. Acest lucru este specificat în cadrul metodei de gestionare newRecordNavigation(). Lipiți următorul fragment în clasa „js”.
// metoda handlerului// Case este objectApiName și actionName este New.
// tipul paginii este standard__objectPage
newRecordNavigation ( ) {
acest [ Navigation Mixin. Navigați ] ( {
tip : „standard__objectPage” ,
atribute : {
objectApiName : 'Caz' ,
actionName : 'nou'
}
} )
}
Ieșire:
Reincarca Pagina. Acum, puteți crea o înregistrare legată de caz.
Dacă îl salvați, veți naviga la pagina sa de înregistrare.
Navigarea la pagina de înregistrare
Similar cu navigarea anterioară (Exemplul 3), putem merge la înregistrarea specifică și putem vizualiza sau edita detaliile. O altă proprietate pe care trebuie să o transmiteți în atribute este „recordId” (Id-ul înregistrării existente). ActionName ar trebui să fie „view” în acest scenariu.
Navigation.html
Să navigăm la înregistrarea cazului. Creăm un buton. Făcând clic pe acest „viewRecordNavigation” va fi tratat în fișierul „js”.
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
< b > Puteți vizualiza înregistrarea cazului de aici... < / b >< br >< / div >
< / carte-fulger>
< / șablon>
Navigation.js
Tipul ar trebui să fie „standard__recordPage”. Acest lucru este specificat în cadrul metodei handler viewRecordNavigation(). Lipiți următorul fragment în clasa „js”.
// metoda handlerului// Case este objectApiName și actionName este vizualizare.
// tipul paginii este standard__recordPage
vizualizareRecordNavigation ( ) {
acest [ Navigation Mixin. Navigați ] ( {
tip : „standard__recordPage” ,
atribute : {
recordId : „5002t00000PRrXkAAL” ,
objectApiName : 'Caz' ,
actionName : 'vedere'
}
} )
}
Ieșire:
Puteți vedea detaliile cazului după navigare. Aici puteți vizualiza și edita detaliile cazului.
Alte navigații
Să navigăm la vizualizarea Listă și fișiere. Pentru vizualizarea Listă, veți avea nevoie de numele obiectului și filterName. Veți găsi acest lucru în adresa URL. Vom detalia acest lucru în exemplu.
Fișierele sunt stocate în obiectul ContentDocument. Deci, pentru fișiere, objectApiName va fi „ContentDocument” și actionName este „acasă”.
Vizualizare listă:
Fișiere:
Navigation.html
<șablon>< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
< b > Puteți naviga la Vizualizare listă < / b >< br >< / div >
< div clasă = „slds-var-m-around_medium” stil = 'înălțime: 20 px; lățime: 400 px' >
< b > Puteți naviga la Fișiere < / b >< br >< / div >
< / carte-fulger>
< / șablon>
Navigation.js
// Manager de vizualizare listăviewListNavigation ( ) {
acest [ Navigation Mixin. Navigați ] ( {
tip : „standard__objectPage” ,
atribute : {
objectApiName : 'Caz' ,
actionName : 'listă' ,
stat : {
filterName : „00B2t000002oWELEA2”
}
}
} )
}
// Manager de vizualizare a fișierelor
vizualizațiFileNavigation ( ) {
acest [ Navigation Mixin. Navigați ] ( {
tip : „standard__objectPage” ,
atribute : {
objectApiName : „ContentDocument” ,
actionName : 'Acasă'
}
} )
}
Ieșire:
Veți naviga la vizualizarea Listă de cazuri. FilterName pe care l-am specificat este „Toate cazurile închise”.
Puteți vizualiza fișierele din această pagină de aplicație făcând clic pe butonul „Accesați fișierele”.
Concluzie
Salesforce LWC oferă navigarea directă în care puteți naviga și rămâne într-o anumită pagină. În acest ghid, am învățat diferitele navigații folosind Serviciul de navigare a componentelor web Lightning. Există multe alte navigații care există, dar am discutat despre navigarea importantă pe care toți dezvoltatorii LWC trebuie să o cunoască. În toate navigațiile, NavigationMixin trebuie să fie importat din fulger/navigație.