Ejercicio: Crear una navegación de pantalla básica para una aplicación de lienzo
En esta unidad, continuaremos trabajando en nuestra aplicación Contoso Coffee Machines, así que asegúrese de haber abierto la aplicación que hemos estado creando en este módulo de aprendizaje.
Agregaremos algo de navegación en la pantalla de la aplicación para que su usuario pueda moverse entre las diferentes pantallas de la aplicación. Cuando crea una aplicación, la pantalla que está en la parte superior de la vista de árbol es la pantalla en la que aterrizará la aplicación, a menos que defina deliberadamente una pantalla diferente en la fórmula de su StartScreen para su aplicación. En nuestro caso, la primera pantalla que alguien verá cuando compartamos una aplicación con ellos es nuestra "Home Screen".
Siga los pasos a continuación para agregar algo de navegación a la aplicación:
Vaya a la "Home Screen" de su aplicación e Inserte dos controles de botones.
Colóquelos en el centro de la pantalla, uno encima del otro con algo de espacio entre ellos para que nuestro usuario no pueda tocar uno accidentalmente mientras intenta tocar el otro. Observe que Power Apps ofrece referencias de línea de puntos en pantalla para ayudarle a colocar los controles con respecto a otros controles en la pantalla junto a ellos. En este caso, asegúrese de que estén ligeramente desplazados para poder aprender a alinear los controles.
Mantenga pulsada la tecla Mayús para seleccionar ambos controles. Algunos controles tienen propiedades idénticas que son fáciles de alinear con ambos seleccionados. Mantenga ambos controles seleccionados para los siguientes dos pasos.
Seleccione el control desplegable Alinear desde la barra de comandos y seleccione "Alinear a la izquierda". Si no ve el control desplegable Alinear en la barra de comandos, puede hacer clic derecho (con ambos controles seleccionados) y verá una opción desplegable Alinear en una ventana emergente.
Nota
La característica Alinear es una muy buena forma de alinear rápidamente varios controles a la vez. Otra característica bastante buena a tener en cuenta es Deshacer, que también se encuentra en la barra de comandos justo a la derecha del botón Back.
Ahora busque en el panel Propiedades a la derecha y busque las propiedades Width y Height. Estos son campos de entrada numéricos. Escriba 250 para Width y 100 para Height.
Cambie la propiedad Text del botón superior para que ponga "Ver catálogo" y la propiedad Text del botón inferior para que ponga "Admin Screen".
Para editar la propiedad de texto, puede hacer doble clic en el texto de un botón en la pantalla, o puede ir al campo de fórmula, o puede ir al panel Propiedades para actualizar el texto. Pruebe todas estas técnicas para determinar qué método se adapta mejor a su caso.
A continuación, agregaremos nuestras primeras funciones que permitirán la navegación en pantalla. La función Navigate tiene un parámetro obligatorio, la pantalla a la que va a cambiar la aplicación. Al agregar una función Navigate, introduzca su nombre de pantalla entre comillas simples y recuerde que Power Apps le dará sugerencias a medida que lo escriba en la barra de fórmulas. Seleccione el botón "Ver catálogo" y agregue lo siguiente a la propiedad OnSelect:
Navigate('Catalog Screen')Del mismo modo, seleccione el botón con el nombre "Admin Screen" e introduzca lo siguiente en la propiedad OnSelect:
Navigate('Admin Screen')Ofrezca a los usuarios la capacidad de navegar desde la pantalla de inicio lo dejará atrapado en la pantalla de destino a menos que le demos una forma de volver a la pantalla de inicio. Ya ha visto la función Navigate, que puede usar para que su usuario vuelva a la pantalla de inicio. Sin embargo, Power Apps tiene una manera de volver a la pantalla anterior en la que se encontraba su usuario a través de la función Back. Vaya a la Catalog Screen y agregue un control Botón.
Arrastre su nuevo Botón a la esquina inferior derecha de la pantalla y actualice la propiedad Text para que diga "Atrás".
Ahora actualice la propiedad OnSelect del nuevo botón de la siguiente manera:
Back()Esta fórmula devolverá al usuario a la pantalla anterior.
Vaya a su Admin Screen y repita los dos pasos anteriores.
Ahora, vuelva a su Home Screen y coloque la aplicación en modo de versión preliminar. Intente seleccionar el botón "Ver catálogo" y luego use el botón "Back" para volver a la página principal. Intente lo mismo con los botones de la Admin Screen.
Sugerencia
Su aplicación solo entenderá Atrás si primero navega a esa pantalla a través de la aplicación. Si comienza a obtener una versión preliminar de su aplicación desde la Catalog Screen o la Admin Screen, Power Apps no tiene contexto sobre a qué pantalla navegar con la función Back. Por eso, cuando obtenga una versión preliminar de su aplicación, recuerde iniciarla desde la Home Screen.
Enhorabuena Ya ha agregado navegación básica a su aplicación. En el siguiente módulo de aprendizaje, exploraremos en profundidad la navegación de aplicaciones. Después de una breve prueba de conocimientos, quédese con nosotros para conocer mejor qué puede hacer para mejorar aún más su aplicación.