Ang NavigationMixin ay kailangang ma-import mula sa kidlat/nabigasyon sa 'javascript' na file. Ang pag-navigate ay ang magagamit na paraan sa modyul na ito. Kinakailangan ang uri at katangian. Tinutukoy ng uri ang uri ng page na aming dina-navigate at kinukuha ng mga katangian ang pageName.
- Mula sa Setup, hanapin ang “Lightning App Builder” at mag-click sa “Bago”.
- Piliin ang “App Page” at i-click ang “Next”.
- Ibigay ang label bilang 'Mga Serbisyo sa Pag-navigate'.
- Pumunta sa isang rehiyon at mag-click sa 'Tapos na'.
Handa nang gamitin ang iyong app. Hanapin ito sa ilalim ng 'App Launcher'.
Para sa lahat ng mga halimbawa ng Navigation Service na tatalakayin sa gabay na ito, ginagamit namin ang parehong 'meta-xml' na file. Maaari mong ilagay ang mga bahagi sa iyong page ng App na ginawa mo ngayon. Hindi namin muling tutukuyin ang file na ito (meta-xml) sa ilalim ng mga halimbawang snippet ng code.
'1.0' ?>
Pag-navigate sa Home Page
Kung gusto mong mag-navigate sa Salesforce standard na Home page, tingnan ang sumusunod na halimbawa:
Navigation.html
Lumilikha kami ng isang pindutan. Ang pag-click sa 'homeNavigation' na ito ay hahawakan sa 'js' file.
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
< b > Ire-redirect ka sa Home Page < / b >< br >< / div >
< / lightning-card>
< / template>
Navigation.js
Ang uri ay dapat na 'standard__namedPage' at ang pageName ay dapat na 'home'. Ito ay tinukoy sa loob ng homeNavigation() handler method.
angkat { LightningElement } mula sa 'swerte' ;
angkat { NavigationMixin } mula sa 'kidlat/nabigasyon'
i-export default klase Pag-navigate umaabot NavigationMixin ( LightningElement ) {
// paraan ng handler
// pageName dapat na home
// uri ng page ay standard__namedPage para sa home
homeNavigation ( ) {
ito [ NavigationMixin. Mag-navigate ] ( {
uri : 'standard__namedPage' ,
mga katangian : {
pageName : 'bahay'
}
} )
}
}
Output:
Idagdag ang bahaging ito sa page ng App at mag-click sa button na 'Pumunta sa Home page'.
Ngayon, ikaw ay nasa Home page.
Pag-navigate sa Chatter
Maaari mong ibahagi ang mga file, text message, at mga detalye ng log gamit ang Salesforce Chatter. Posibleng mag-navigate sa Chatter nang direkta gamit ang Navigation Service.
Navigation.html
Lumilikha kami ng isang pindutan. Ang pag-click sa 'chatterNavigation' na ito ay hahawakan sa 'js' file.
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
< b > Ire-redirect ka sa Chatter < / b >< br >< / div >
< / lightning-card>
< / template>
Navigation.js
Ang uri ay dapat na “standard__namedPage” at ang pageName ay dapat na “chatter”. Ito ay tinukoy sa loob ng paraan ng tagapangasiwa ng chatterNavigation(). I-paste ang sumusunod na snippet sa loob ng 'js' na klase.
// paraan ng handler// pageName ay dapat satsat
// uri ng page ay standard__namedPage para sa chatter
chatterNavigation ( ) {
ito [ NavigationMixin. Mag-navigate ] ( {
uri : 'standard__namedPage' ,
mga katangian : {
pageName : 'daldalan'
}
} )
}
Output:
I-refresh ang pahina. Ngayon, maaari kang mag-post ng mga update at ibahagi ang mga file sa Chatter sa pamamagitan ng pag-navigate dito.
Pag-navigate sa Bagong Record
Nang hindi pumupunta sa tab na partikular na object para gumawa ng bagong record, maaari kang direktang gumawa ng bagong record para sa isang partikular na object gamit ang Navigation Service. Sa sitwasyong ito, kailangan nating tukuyin ang objectApiName at actionName bilang mga katangian.
- Ang objectApiName ay ang Salesforce object API name tulad ng 'Account', 'Contact', 'Case', atbp.
- Gumawa kami ng bagong record. Kaya, ang actionName ay dapat na 'bago'.
Navigation.html
Gumawa tayo ng tala ng Kaso. Lumilikha kami ng isang pindutan. Ang pag-click sa 'newRecordNavigation' na ito ay hahawakan sa 'js' na file.
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
< b > Maaari kang gumawa ng Case mula dito... < / b >< br >< / div >
< / lightning-card>
< / template>
Navigation.js
Ang uri ay dapat na 'standard__objectPage'. Ito ay tinukoy sa loob ng newRecordNavigation() handler method. I-paste ang sumusunod na snippet sa loob ng 'js' na klase.
// paraan ng handler// Ang case ay ang objectApiName at ang actionName ay Bago.
// ang uri ng page ay standard__objectPage
bagongRecordNavigation ( ) {
ito [ NavigationMixin. Mag-navigate ] ( {
uri : 'standard__objectPage' ,
mga katangian : {
objectApiName : 'Kaso' ,
actionName : 'bago'
}
} )
}
Output:
I-refresh ang pahina. Ngayon, nakakagawa ka na ng record na nauugnay sa Case.
Kung ise-save mo ito, magna-navigate ka sa record page nito.
Pag-navigate sa Record Page
Katulad ng nakaraang nabigasyon (Halimbawa 3), maaari tayong pumunta sa partikular na tala at tingnan o i-edit ang mga detalye. Ang isa pang property na kailangan mong ipasa sa mga attribute ay ang “recordId” (Id ng kasalukuyang record). Dapat ay 'view' ang actionName sa sitwasyong ito.
Navigation.html
Mag-navigate tayo sa Case record. Lumilikha kami ng isang pindutan. Ang pag-click sa 'viewRecordNavigation' na ito ay hahawakan sa 'js' na file.
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
< b > Maaari mong tingnan ang talaan ng Kaso mula dito... < / b >< br >< / div >
< / lightning-card>
< / template>
Navigation.js
Ang uri ay dapat na 'standard__recordPage'. Ito ay tinukoy sa loob ng viewRecordNavigation() handler method. I-paste ang sumusunod na snippet sa loob ng 'js' na klase.
// paraan ng handler// Ang case ay ang objectApiName at ang actionName ay view.
// ang uri ng page ay standard__recordPage
viewRecordNavigation ( ) {
ito [ NavigationMixin. Mag-navigate ] ( {
uri : 'standard__recordPage' ,
mga katangian : {
recordId : '5002t00000PRrXkAAL' ,
objectApiName : 'Kaso' ,
actionName : 'view'
}
} )
}
Output:
Maaari mong makita ang mga detalye ng kaso pagkatapos ng pag-navigate. Dito, maaari mong tingnan at i-edit ang mga detalye ng kaso.
Iba pang Navigation
Mag-navigate tayo sa List view at mga file. Para sa List view, kakailanganin mo ang object name at filterName. Makikita mo ito sa URL. Idetalye natin ito sa halimbawa.
Ang mga file ay naka-imbak sa ContentDocument object. Kaya, para sa mga file, ang objectApiName ay magiging 'ContentDocument' at ang actionName ay 'home'.
Listview:
Mga file:
Navigation.html
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
< b > Maaari kang mag-navigate sa View ng Listahan < / b >< br >< / div >
< div klase = 'slds-var-m-around_medium' istilo = 'taas:20px; lapad:400px' >
< b > Maaari kang mag-navigate sa Files < / b >< br >< / div >
< / lightning-card>
< / template>
Navigation.js
// Handler ng ListviewviewListNavigation ( ) {
ito [ NavigationMixin. Mag-navigate ] ( {
uri : 'standard__objectPage' ,
mga katangian : {
objectApiName : 'Kaso' ,
actionName : 'listahan' ,
estado : {
filterName : '00B2t000002oWELEA2'
}
}
} )
}
// Tagapangasiwa ng Filesview
viewFileNavigation ( ) {
ito [ NavigationMixin. Mag-navigate ] ( {
uri : 'standard__objectPage' ,
mga katangian : {
objectApiName : 'ContentDocument' ,
actionName : 'bahay'
}
} )
}
Output:
Ikaw ay magna-navigate sa iyong Case list view. Ang filterName na aming tinukoy ay 'Lahat ng Closed Cases'.
Maaari mong tingnan ang iyong mga file mula sa page ng App na ito sa pamamagitan ng pag-click sa button na 'Pumunta sa Mga File'.
Konklusyon
Ang Salesforce LWC ay nagbibigay ng direktang nabigasyon kung saan maaari kang mag-navigate sa pananatili sa isang partikular na page. Sa gabay na ito, natutunan namin ang iba't ibang nabigasyon gamit ang Lightning Web Component Navigation Service. Marami pang ibang nabigasyon ang umiiral ngunit tinalakay namin ang mahalagang nabigasyon na dapat malaman ng lahat ng LWC Developers. Sa lahat ng mga nabigasyon, ang NavigationMixin ay kailangang ma-import mula sa kidlat/nabigasyon.