Il NavigationMixin deve essere importato da Lightning/Navigazione nel file “javascript”. Naviga è il metodo disponibile in questo modulo. Prende il tipo e gli attributi. Il type specifica il tipo di pagina che stiamo navigando e gli attributi assumono il pageName.
- Dalla configurazione, cerca 'Lightning App Builder' e fai clic su 'Nuovo'.
- Scegli la 'Pagina dell'app' e fai clic su 'Avanti'.
- Assegna l'etichetta 'Servizi di navigazione'.
- Vai con quella regione e fai clic su 'Fine'.
La tua app è pronta per l'uso. Cercalo sotto 'Avvio applicazioni'.
Per tutti gli esempi di servizi di navigazione che verranno discussi in questa guida, utilizziamo lo stesso file 'meta-xml'. Puoi posizionare i componenti nella pagina dell'app che hai creato ora. Non specificheremo nuovamente questo file (meta-xml) negli snippet di codice di esempio.
'1.0' ?>
Navigazione alla pagina iniziale
Se desideri accedere alla home page standard di Salesforce, guarda il seguente esempio:
Navigazione.html
Creiamo un pulsante. Il clic su questa 'homeNavigation' verrà gestito nel file 'js'.
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
< B > Verrai reindirizzato alla Home Page < / B >< fratello >< / div >
< / carta-fulmine>
< / modello>
Navigation.js
Il tipo dovrebbe essere 'standard__namedPage' e pageName dovrebbe essere 'home'. Questo è specificato all'interno del metodo gestore homeNavigation().
importare { Elemento Fulmine } da 'fortuna' ;
importare { NavigazioneMixin } da 'fulmine/navigazione'
esportare predefinito classe Navigazione si estende NavigazioneMixin ( Elemento Fulmine ) {
// metodo del gestore
// pageName dovrebbe essere home
// il tipo di pagina è standard__namedPage per la home
homeNavigazione ( ) {
Questo [ NavigazioneMixin. Navigare ] ( {
tipo : 'standard__namedPage' ,
attributi : {
nomepagina : 'casa'
}
} )
}
}
Produzione:
Aggiungi questo componente alla pagina dell'app e fai clic sul pulsante 'Vai alla home page'.
Ora sei nella Home page.
Navigazione verso Chatter
È possibile condividere file, messaggi di testo e dettagli del registro utilizzando Salesforce Chatter. È possibile navigare direttamente in Chatter utilizzando il servizio di navigazione.
Navigazione.html
Creiamo un pulsante. Il clic su questo 'chatterNavigation' verrà gestito nel file 'js'.
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
< B > Verrai reindirizzato a Chatter < / B >< fratello >< / div >
< / carta-fulmine>
< / modello>
Navigation.js
Il tipo dovrebbe essere 'standard__namedPage' e pageName dovrebbe essere 'chatter'. Questo è specificato all'interno del metodo del gestore chatterNavigation(). Incolla il seguente snippet all'interno della classe 'js'.
// metodo del gestore// pageName dovrebbe essere chatter
// il tipo di pagina è standard__namedPage per chatter
chatterNavigation ( ) {
Questo [ NavigazioneMixin. Navigare ] ( {
tipo : 'standard__namedPage' ,
attributi : {
nomepagina : 'chiacchiere'
}
} )
}
Produzione:
Ricarica la pagina. Ora puoi pubblicare gli aggiornamenti e condividere i file in Chatter accedendo ad esso.
Navigazione verso il nuovo record
Senza accedere alla scheda dell'oggetto specifico per creare un nuovo record, è possibile creare direttamente un nuovo record per un oggetto specifico utilizzando il servizio di navigazione. In questo scenario, dobbiamo specificare objectApiName e actionName come attributi.
- objectApiName è il nome API dell'oggetto Salesforce come 'Account', 'Contatto', 'Caso', ecc.
- Creiamo un nuovo record. Quindi, actionName dovrebbe essere 'nuovo'.
Navigazione.html
Creiamo un record del caso. Creiamo un pulsante. Il clic su questo 'newRecordNavigation' verrà gestito nel file 'js'.
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
< B > Puoi creare un caso da qui... < / B >< fratello >< / div >
< / carta-fulmine>
< / modello>
Navigation.js
Il tipo dovrebbe essere 'standard__objectPage'. Questo è specificato all'interno del metodo del gestore newRecordNavigation(). Incolla il seguente snippet all'interno della classe 'js'.
// metodo del gestore// Case è objectApiName e actionName è New.
// il tipo della pagina è standard__objectPage
newRecordNavigation ( ) {
Questo [ NavigazioneMixin. Navigare ] ( {
tipo : 'standard__oggettoPagina' ,
attributi : {
oggettoApiName : 'Caso' ,
nomeazione : 'nuovo'
}
} )
}
Produzione:
Ricarica la pagina. Ora puoi creare un record relativo al caso.
Se lo salvi, accederai alla relativa pagina di registrazione.
Navigazione alla pagina di registrazione
Analogamente alla navigazione precedente (Esempio 3), possiamo andare al record specifico e visualizzare o modificare i dettagli. Un'altra proprietà che devi passare negli attributi è il 'recordId' (ID del record esistente). actionName dovrebbe essere 'view' in questo scenario.
Navigazione.html
Passiamo al record del caso. Creiamo un pulsante. Il clic su questo 'viewRecordNavigation' verrà gestito nel file 'js'.
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
< B > È possibile visualizzare la documentazione del caso da qui... < / B >< fratello >< / div >
< / carta-fulmine>
< / modello>
Navigation.js
Il tipo dovrebbe essere 'standard__recordPage'. Questo è specificato all'interno del metodo del gestore viewRecordNavigation(). Incolla il seguente snippet all'interno della classe 'js'.
// metodo del gestore// Case è objectApiName e actionName è view.
// il tipo di pagina è standard__recordPage
viewRecordNavigation ( ) {
Questo [ NavigazioneMixin. Navigare ] ( {
tipo : 'standard__recordPagina' ,
attributi : {
recordId : '5002t00000PRrXkAAL' ,
oggettoApiName : 'Caso' ,
nomeazione : 'visualizzazione'
}
} )
}
Produzione:
Puoi vedere i dettagli del caso dopo la navigazione. Qui puoi visualizzare e modificare i dettagli del caso.
Altre navigazioni
Passiamo alla visualizzazione elenco e ai file. Per la visualizzazione Elenco, avrai bisogno del nome dell'oggetto e del filterName. Lo troverai nell'URL. Lo elaboreremo nell'esempio.
I file vengono archiviati nell'oggetto ContentDocument. Pertanto, per i file, objectApiName sarà 'ContentDocument' e actionName sarà 'home'.
Visualizzazione elenco:
File:
Navigazione.html
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
< B > Puoi accedere alla Visualizzazione elenco < / B >< fratello >< / div >
< div classe = 'slds-var-m-around_medium' stile = 'altezza:20px; larghezza:400px' >
< B > Puoi accedere a File < / B >< fratello >< / div >
< / carta-fulmine>
< / modello>
Navigation.js
// Gestore della visualizzazione elencoviewListNavigazione ( ) {
Questo [ NavigazioneMixin. Navigare ] ( {
tipo : 'standard__oggettoPagina' ,
attributi : {
oggettoApiName : 'Caso' ,
nomeazione : 'elenco' ,
stato : {
nomefiltro : '00B2t000002oWELEA2'
}
}
} )
}
// Gestore della vista file
viewFileNavigazione ( ) {
Questo [ NavigazioneMixin. Navigare ] ( {
tipo : 'standard__oggettoPagina' ,
attributi : {
oggettoApiName : 'ContenutoDocumento' ,
nomeazione : 'casa'
}
} )
}
Produzione:
Passerai alla visualizzazione dell'elenco dei casi. Il filterName che abbiamo specificato è 'All Closed Cases'.
Puoi visualizzare i tuoi file da questa pagina dell'app facendo clic sul pulsante 'Vai a file'.
Conclusione
Salesforce LWC fornisce la navigazione diretta in cui è possibile navigare rimanendo in una pagina specifica. In questa guida abbiamo appreso le diverse modalità di navigazione utilizzando il servizio di navigazione del componente Web Lightning. Esistono molte altre navigazioni, ma abbiamo discusso della navigazione importante che tutti gli sviluppatori LWC devono conoscere. In tutte le navigazioni il NavigationMixin deve essere importato da Lightning/navigazione.