NavigationMixin on tuotava Lightningista/navigaatiosta 'javascript'-tiedostoon. Navigoi on tässä moduulissa käytettävissä oleva menetelmä. Se vaatii tyypin ja attribuutit. Tyyppi määrittää sen sivun tyypin, jolla navigoimme, ja attribuutit ottavat sivun nimen.
- Etsi asennuksesta 'Lightning App Builder' ja napsauta 'New'.
- Valitse 'Sovellussivu' ja napsauta 'Seuraava'.
- Anna merkintä 'Navigointipalvelut'.
- Siirry yhden alueen kanssa ja napsauta 'Valmis'.
Sovelluksesi on valmis käytettäväksi. Etsi se 'App Launcher' -kohdasta.
Käytämme samaa 'meta-xml' -tiedostoa kaikissa tässä oppaassa käsiteltävissä Navigation Service -esimerkeissä. Voit sijoittaa komponentit sovellussivullesi, jonka loit nyt. Emme määritä tätä tiedostoa (meta-xml) uudelleen esimerkkikoodinpätkien alle.
'1.0' ?>
Navigoi kotisivulle
Jos haluat siirtyä Salesforce-standardin kotisivulle, katso seuraava esimerkki:
Navigation.html
Luomme painikkeen. Tämän 'homeNavigation' -painikkeen napsauttaminen käsitellään 'js'-tiedostossa.
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
< b > Sinut ohjataan kotisivulle < / b >< br >< / div >
< / salamakortti>
< / malli>
Navigation.js
Tyypin tulee olla 'standard__namedPage' ja sivun nimen tulee olla 'koti'. Tämä on määritetty homeNavigation()-käsittelijän menetelmässä.
tuonti { Salamaelementti } alkaen 'onnea' ;
tuonti { NavigationMixin } alkaen 'salama/navigointi'
viedä oletuksena luokkaa Navigointi ulottuu NavigationMixin ( Salamaelementti ) {
// Käsittelijämenetelmä
// SivunNimen pitäisi olla koti
// sivun tyyppi on standard__namedPage kodille
kotinavigointi ( ) {
Tämä [ NavigationMixin. Navigoida ] ( {
tyyppi : 'standard__namedPage' ,
attribuutteja : {
sivun nimi : 'Koti'
}
} )
}
}
Lähtö:
Lisää tämä komponentti sovellussivulle ja napsauta 'Siirry kotisivulle' -painiketta.
Nyt olet etusivulla.
Navigoidaan Chatteriin
Voit jakaa tiedostoja, tekstiviestejä ja lokitietoja Salesforce Chatterin avulla. Chatteriin voi navigoida suoraan Navigointipalvelun avulla.
Navigation.html
Luomme painikkeen. Tämän 'chatterNavigation' -toiminnon napsauttaminen käsitellään 'js'-tiedostossa.
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
< b > Sinut ohjataan Chatteriin < / b >< br >< / div >
< / salamakortti>
< / malli>
Navigation.js
Tyypin tulee olla 'standard__namedPage' ja sivun nimen tulee olla 'chatter'. Tämä on määritetty chatterNavigation()-käsittelijämenetelmässä. Liitä seuraava katkelma 'js'-luokkaan.
// Käsittelijämenetelmä// Sivun nimen tulee olla chatteriä
// sivun tyyppi on vakio__namedPage chatterille
chatterNavigointi ( ) {
Tämä [ NavigationMixin. Navigoida ] ( {
tyyppi : 'standard__namedPage' ,
attribuutteja : {
sivun nimi : 'pulista'
}
} )
}
Lähtö:
Päivitä sivu. Nyt voit lähettää päivitykset ja jakaa tiedostoja Chatterissa navigoimalla siihen.
Siirrytään kohtaan Uusi tietue
Menemättä tiettyyn objektivälilehteen luomaan uutta tietuetta, voit luoda uuden tietueen suoraan tietylle objektille Navigointipalvelun avulla. Tässä skenaariossa meidän on määritettävä objektiApiName ja actionName attribuutteiksi.
- ObjectApiName on Salesforce-objektin API-nimi, kuten 'Account', 'Contact', 'Case' jne.
- Luomme uuden tietueen. ToiminnonNimen pitäisi siis olla 'uusi'.
Navigation.html
Luodaan tapaustietue. Luomme painikkeen. Tämän 'newRecordNavigation'-painikkeen napsauttaminen käsitellään 'js'-tiedostossa.
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
< b > Voit luoda tapauksen täältä... < / b >< br >< / div >
< / salamakortti>
< / malli>
Navigation.js
Tyypin tulee olla 'standard__objectPage'. Tämä määritetään newRecordNavigation()-käsittelijän menetelmässä. Liitä seuraava katkelma 'js'-luokkaan.
// Käsittelijämenetelmä// Case on objectApiName ja actionName on Uusi.
// sivun tyyppi on standard__objectPage
uusiRecordNavigation ( ) {
Tämä [ NavigationMixin. Navigoida ] ( {
tyyppi : 'standard__objectPage' ,
attribuutteja : {
objectApiName : 'tapaus' ,
actionName : 'Uusi'
}
} )
}
Lähtö:
Päivitä sivu. Nyt voit luoda tapaukseen liittyvän tietueen.
Jos tallennat sen, siirryt sen tietuesivulle.
Navigoiminen Record-sivulle
Kuten edellisessä navigoinnissa (esimerkki 3), voimme siirtyä tiettyyn tietueeseen ja tarkastella tai muokata tietoja. Toinen ominaisuus, joka sinun on välitettävä määritteissä, on 'recordId' (olemassa olevan tietueen tunnus). ActionName:n tulee olla 'view' tässä skenaariossa.
Navigation.html
Siirrytään tapaustietueeseen. Luomme painikkeen. Tämän 'viewRecordNavigation' -painikkeen napsauttaminen käsitellään 'js'-tiedostossa.
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
< b > Voit katsoa tapauspöytäkirjan tästä... < / b >< br >< / div >
< / salamakortti>
< / malli>
Navigation.js
Tyypin tulee olla 'standard__recordPage'. Tämä määritetään viewRecordNavigation()-käsittelijämenetelmässä. Liitä seuraava katkelma 'js'-luokkaan.
// Käsittelijämenetelmä// Case on objectApiName ja actionName on näkymä.
// sivun tyyppi on standard__recordPage
viewRecordNavigation ( ) {
Tämä [ NavigationMixin. Navigoida ] ( {
tyyppi : 'standard__recordPage' ,
attribuutteja : {
RecordId : '5002t00000PRrXkAAL' ,
objectApiName : 'tapaus' ,
actionName : 'näkymä'
}
} )
}
Lähtö:
Näet tapauksen tiedot navigoinnin jälkeen. Täällä voit tarkastella ja muokata tapauksen tietoja.
Muut navigaatiot
Siirrytään luettelonäkymään ja tiedostoihin. Luettelonäkymää varten tarvitset objektin nimen ja suodattimen nimen. Löydät tämän URL-osoitteesta. Selvitämme tätä esimerkissä.
Tiedostot tallennetaan ContentDocument-objektiin. Joten tiedostojen objectApiName on 'ContentDocument' ja actionName on 'home'.
Listanäkymä:
Tiedostot:
Navigation.html
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
< b > Voit siirtyä luettelonäkymään < / b >< br >< / div >
< div luokkaa = 'slds-var-m-around_medium' tyyli = 'korkeus:20px; leveys:400px' >
< b > Voit siirtyä kohtaan Tiedostot < / b >< br >< / div >
< / salamakortti>
< / malli>
Navigation.js
// Listanäkymän käsittelijäviewListNavigation ( ) {
Tämä [ NavigationMixin. Navigoida ] ( {
tyyppi : 'standard__objectPage' ,
attribuutteja : {
objectApiName : 'tapaus' ,
actionName : 'lista' ,
osavaltio : {
suodattimenNimi : '00B2t000002oWELEA2'
}
}
} )
}
// Filesview-käsittelijä
viewFileNavigation ( ) {
Tämä [ NavigationMixin. Navigoida ] ( {
tyyppi : 'standard__objectPage' ,
attribuutteja : {
objectApiName : 'ContentDocument' ,
actionName : 'Koti'
}
} )
}
Lähtö:
Siirryt tapausluettelonäkymään. Määrittämämme suodattimenNimi on 'Kaikki suljetut tapaukset'.
Voit tarkastella tiedostojasi tältä sovellussivulta napsauttamalla 'Siirry tiedostoihin' -painiketta.
Johtopäätös
Salesforce LWC tarjoaa suoran navigoinnin, jossa voit navigoida pysymällä tietyllä sivulla. Tässä oppaassa opimme eri navigoinnin Lightning Web Component Navigation Service -palvelun avulla. On olemassa monia muitakin navigaatioita, mutta keskustelimme tärkeästä navigaatiosta, joka kaikkien LWC-kehittäjien on tiedettävä. Kaikissa navigoinneissa NavigationMixin on tuotava salamasta/navigaatiosta.