El NavigationMixin debe importarse desde Lightning/Navegación en el archivo “javascript”. Navegar es el método disponible en este módulo. Toma el tipo y los atributos. El tipo especifica el tipo de página por la que estamos navegando y los atributos toman el nombre de página.
- Desde la Configuración, busque 'Lightning App Builder' y haga clic en 'Nuevo'.
- Elija la 'Página de la aplicación' y haga clic en 'Siguiente'.
- Coloque la etiqueta como 'Servicios de navegación'.
- Vaya a una región y haga clic en 'Listo'.
Tu aplicación está lista para usar. Búscalo en el 'Lanzador de aplicaciones'.
Para todos los ejemplos de servicios de navegación que se analizarán en esta guía, utilizamos el mismo archivo 'meta-xml'. Puede colocar los componentes en la página de su aplicación que creó ahora. No volveremos a especificar este archivo (meta-xml) en los fragmentos de código de ejemplo.
'1.0' ?>
Navegando a la página de inicio
Si desea navegar a la página de inicio estándar de Salesforce, mire el siguiente ejemplo:
Navegación.html
Creamos un botón. El clic de esta 'homeNavigation' se manejará en el archivo 'js'.
< div clase = 'slds-var-m-around_medium' estilo = 'alto: 20 px; ancho: 400 px' >
< b > Serás redirigido a la página de inicio. < / b >< hermano >< / div >
< / tarjeta-rayo>
< / plantilla>
Navegación.js
El tipo debe ser 'standard__namedPage' y el nombre de la página debe ser 'home'. Esto se especifica dentro del método controlador homeNavigation().
importar { Elemento relámpago } de 'suerte' ;
importar { NavegaciónMixin } de 'rayo/navegación'
exportar por defecto clase Navegación se extiende NavegaciónMixin ( Elemento relámpago ) {
// método controlador
// nombre de página debe ser inicio
// el tipo de página es estándar__namedPage para el inicio
inicioNavegación ( ) {
este [ NavegaciónMixin. Navegar ] ( {
tipo : 'estándar__página con nombre' ,
atributos : {
Nombre de la página : 'hogar'
}
} )
}
}
Producción:
Agregue este componente a la página de la aplicación y haga clic en el botón 'Ir a la página de inicio'.
Ahora estás en la página de inicio.
Navegando a Chatter
Puede compartir los archivos, mensajes de texto y detalles de registro utilizando Salesforce Chatter. Es posible navegar a Chatter directamente utilizando el Servicio de navegación.
Navegación.html
Creamos un botón. El clic de esta 'chatterNavigation' se manejará en el archivo 'js'.
< div clase = 'slds-var-m-around_medium' estilo = 'alto: 20 px; ancho: 400 px' >
< b > Serás redirigido a Chatter < / b >< hermano >< / div >
< / tarjeta-rayo>
< / plantilla>
Navegación.js
El tipo debe ser 'standard__namedPage' y el nombre de la página debe ser 'charla'. Esto se especifica dentro del método controlador chatterNavigation(). Pegue el siguiente fragmento dentro de la clase 'js'.
// método controlador// el nombre de la página debe ser charla
// el tipo de página es standard__namedPage para el chatter
charlaNavegación ( ) {
este [ NavegaciónMixin. Navegar ] ( {
tipo : 'estándar__página con nombre' ,
atributos : {
Nombre de la página : 'charla'
}
} )
}
Producción:
Recarga la página. Ahora puede publicar las actualizaciones y compartir los archivos en Chatter navegando hasta allí.
Navegando a Nuevo Registro
Sin ir a la pestaña de objeto específico para crear un nuevo registro, puede crear directamente un nuevo registro para un objeto específico utilizando el Servicio de navegación. En este escenario, necesitamos especificar objectApiName y actionName como atributos.
- objectApiName es el nombre de la API del objeto de Salesforce, como 'Cuenta', 'Contacto', 'Caso', etc.
- Creamos un nuevo registro. Entonces, el nombre de acción debería ser 'nuevo'.
Navegación.html
Creemos un registro de caso. Creamos un botón. El clic de este 'newRecordNavigation' se manejará en el archivo 'js'.
< div clase = 'slds-var-m-around_medium' estilo = 'alto: 20 px; ancho: 400 px' >
< b > Puede crear un caso desde aquí... < / b >< hermano >< / div >
< / tarjeta-rayo>
< / plantilla>
Navegación.js
El tipo debe ser 'standard__objectPage'. Esto se especifica dentro del método controlador newRecordNavigation(). Pegue el siguiente fragmento dentro de la clase 'js'.
// método controlador// El caso es el nombre de la API del objeto y el nombre de la acción es Nuevo.
// el tipo de página es standard__objectPage
nuevoRegistroNavegación ( ) {
este [ NavegaciónMixin. Navegar ] ( {
tipo : 'estándar__objetoPágina' ,
atributos : {
objetoApiName : 'Caso' ,
nombre de acción : 'nuevo'
}
} )
}
Producción:
Recarga la página. Ahora puede crear un registro relacionado con el Caso.
Si lo guarda, navegará a su página de registro.
Navegando a la página de registro
De manera similar a la navegación anterior (Ejemplo 3), podemos ir al registro específico y ver o editar los detalles. Una propiedad más que debe pasar en los atributos es 'recordId' (Id. del registro existente). El nombre de acción debe ser 'ver' en este escenario.
Navegación.html
Naveguemos hasta el registro del caso. Creamos un botón. El clic de este 'viewRecordNavigation' se manejará en el archivo 'js'.
< div clase = 'slds-var-m-around_medium' estilo = 'alto: 20 px; ancho: 400 px' >
< b > Puede ver el expediente del caso desde aquí... < / b >< hermano >< / div >
< / tarjeta-rayo>
< / plantilla>
Navegación.js
El tipo debe ser 'standard__recordPage'. Esto se especifica dentro del método controlador viewRecordNavigation(). Pegue el siguiente fragmento dentro de la clase 'js'.
// método controlador// El caso es el nombre de la API del objeto y el nombre de la acción es la vista.
// el tipo de página es standard__recordPage
verRegistroNavegación ( ) {
este [ NavegaciónMixin. Navegar ] ( {
tipo : 'estándar__recordPage' ,
atributos : {
ID de registro : '5002t00000PRrXkAAL' ,
objetoApiName : 'Caso' ,
nombre de acción : 'vista'
}
} )
}
Producción:
Puede ver los detalles del caso después de la navegación. Aquí puede ver y editar los detalles del caso.
Otras Navegaciones
Naveguemos hasta la vista de lista y archivos. Para la vista de lista, necesitará el nombre del objeto y el nombre del filtro. Lo encontrarás en la URL. Desarrollaremos esto en el ejemplo.
Los archivos se almacenan en el objeto ContentDocument. Entonces, para los archivos, objectApiName será 'ContentDocument' y actionName será 'home'.
Vista de la lista:
Archivos:
Navegación.html
< div clase = 'slds-var-m-around_medium' estilo = 'alto: 20 px; ancho: 400 px' >
< b > Puede navegar a Vista de lista < / b >< hermano >< / div >
< div clase = 'slds-var-m-around_medium' estilo = 'alto: 20 px; ancho: 400 px' >
< b > Puedes navegar a Archivos < / b >< hermano >< / div >
< / tarjeta-rayo>
< / plantilla>
Navegación.js
// controlador de vista de listaverListaNavegación ( ) {
este [ NavegaciónMixin. Navegar ] ( {
tipo : 'estándar__objetoPágina' ,
atributos : {
objetoApiName : 'Caso' ,
nombre de acción : 'lista' ,
estado : {
nombredelfiltro : '00B2t000002oWELEA2'
}
}
} )
}
// controlador de vista de archivos
verArchivoNavegación ( ) {
este [ NavegaciónMixin. Navegar ] ( {
tipo : 'estándar__objetoPágina' ,
atributos : {
objetoApiName : 'Documento de contenido' ,
nombre de acción : 'hogar'
}
} )
}
Producción:
Navegará a la vista de lista de casos. El nombre del filtro que especificamos es 'Todos los casos cerrados'.
Puede ver sus archivos desde la página de esta aplicación haciendo clic en el botón 'Ir a Archivos'.
Conclusión
Salesforce LWC proporciona navegación directa en la que puede navegar permaneciendo en una página específica. En esta guía, aprendimos las diferentes navegación utilizando el servicio de navegación del componente web Lightning. Existen muchas otras navegaciones, pero analizamos la navegación importante que todos los desarrolladores de LWC deben conocer. En todas las navegaciones, el NavigationMixin debe importarse desde el rayo/navegación.