En este tutorial, analizaremos el contexto de la navegación de PowerApps. Usaremos las funciones Atrás y Navegar para cambiar qué pantalla se muestra en nuestras aplicaciones.
La mayoría de las aplicaciones contienen varias pantallas. Proporcionar una navegación PowerApps fácil de usar permite a los usuarios navegar de manera eficiente a través de esas pantallas de aplicaciones.
En la página de referencia, hagamos clic en Navegar y veamos qué hace.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-2585-0612134702035.jpg)
La función Navegar cambia la pantalla que se muestra. Tendremos un ejemplo para comprender mejor cómo funciona esta función.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-6288-0612134707259.jpg)
Tabla de contenido
Navegación de PowerApps con la función de navegación
Primero, hagamos clic en la primera tarjeta de datos ( Beau Spratling ).
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-5609-0612134712234.jpg)
Vaya al activador OnSelect y veremos que la función Navigate se usa para llevar al usuario a la pantalla especificada ( DetailScreen1 ). Esto significa que al hacer clic en esta tarjeta, nos llevará a DetailScreen1 .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-4757-0612134716732.jpg)
Por otro lado, el segundo argumento es para el tipo de transición que queremos establecer. Actualmente está configurado en Ninguno .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9874-0612134721798.jpg)
En la página de referencia podemos ver las diferentes transiciones entre las que podemos elegir y una demostración de cada una de ellas.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9162-0612134727075.jpg)
Podemos cambiar fácilmente la transición de navegación haciendo clic en la tarjeta de datos nuevamente. Luego, haga clic en el segundo argumento.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-7274-0612134731167.jpg)
Después de eso, aparecerá ScreenTransition.None .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9596-0612134736264.jpg)
Elimina la palabra Ninguno al final y las diferentes opciones de transición aparecerán debajo. Para este ejemplo, usemos la transición Fade . Prueba a reproducir tu aplicación y verás cómo funciona la transición Fade .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9639-0612134740380.jpg)
Ahora hagamos clic en la flecha dentro de nuestra tarjeta de datos.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-1025-0612134743865.jpg)
Podemos ver que su disparador también es OnSelect y está seleccionando el elemento Parent .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-6553-0612134748047.jpg)
El elemento principal de esa flecha se refiere a la propia tarjeta de datos. Está utilizando la función Navigate que redirige a los usuarios a DetailScreen1 . Una vez que haga clic, hará lo mismo que cuando hacemos clic en la tarjeta de datos.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-7148-0612134752057.jpg)
Adición de una funcionalidad de edición para la navegación de PowerApps
Ahora, intentemos agregar un símbolo de edición que nos redirigirá a la página de edición directamente desde nuestra tarjeta de datos. Haga clic en el elemento Separator5 debajo de BrowseGallery1 .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-4050-0612134755285.jpg)
Luego haga clic en los Iconos y seleccione el icono Editar .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9027-0612134759554.jpg)
Dado que lo agregamos dentro de BrowseGallery1 , se replica para cada tarjeta de datos dentro de la galería.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-7829-0612134803126.jpg)
Luego, muevamos el ícono al lado del ícono de la flecha y redimensionémoslo hasta que sea un poco más pequeño.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-8423-0612134807131.jpg)
De forma predeterminada, este ícono de edición también usó el activador OnSelect y la función Seleccionar de su elemento principal. Entonces, al hacer clic aquí, también nos redirigirá a la pantalla de detalles.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-1018-0612134811501.jpg)
Cambiemos eso cambiando la función a Navigate . Cambie Select (Principal) a Navigate (EditScreen1) en su lugar.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9062-0612134815279.jpg)
Estableceremos el segundo argumento en ScreenTransition.UnCover . Asegúrese de separar los dos argumentos con una coma ( , ).
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-7141-0612134819677.jpg)
Ahora juguemos nuestra aplicación.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-3147-0612134823274.jpg)
Después de eso, haga clic en el botón Editar .
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-4054-0612134827340.jpg)
Luego, seremos redirigidos a la pantalla de edición.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-4821-0612134830625.jpg)
Comprensión de la función Atrás en la navegación de PowerApps
En nuestra EditScreen1 , hagamos clic en el botón X al lado del título.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-5966-0612134834535.jpg)
En este ejemplo, usamos la función ResetForm () junto con la función Atrás ().
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-3667-0612134839514.jpg)
Cuando navegamos hacia algún lugar, Microsoft PowerApps recuerda la última pantalla que abrimos. Podemos navegar a esa última pantalla usando la función Atrás() .
Por ejemplo, al usar esta función en el botón X , podemos volver fácilmente a la pantalla principal si accedemos a la pantalla de edición desde la pantalla principal. Si accedemos a la pantalla de edición desde la pantalla detallada, el botón X nos devolverá a la pantalla detallada.
También podemos leer una explicación más detallada de la función Atrás() en la página de referencia de fórmulas.
![Descripción general del contexto de navegación de PowerApps Descripción general del contexto de navegación de PowerApps](/resources8/uc1/image-9335-0612134844471.jpg)
Conceptos básicos de Power Apps: Entorno de desarrollo y ejecución de su aplicación
Power Apps: Primeros pasos con esta herramienta revolucionaria
Conclusión
En resumen, podemos aprender la importancia y el contexto de la navegación de PowerApps. También podemos entender cómo funcionan las funciones Atrás y Navegar en nuestra aplicación. Podemos especificar una transición visual en la fórmula para controlar cómo cambia una pantalla a otra.
Solo tenga en cuenta que siempre es importante proporcionar a los usuarios una forma eficiente de navegar por las pantallas de su aplicación.
Mis mejores deseos,
Enrique