Más formas de usar la función Navigate
Hay muchas formas de configurar la navegación en su aplicación, además de simplemente usar la propiedad OnSelect
de un botón o control de icono. Esta unidad le presenta tres técnicas comunes: la propiedad OnSuccess
de un control Form
, la propiedad OnTimerEnd
de un control Timer
y la propiedad OnChange
de un control Dropdown
.
Navegación de OnSuccess
Para los diseñadores, algo importante en la experiencia del usuario es proporcionarles comentarios a los usuarios que envían cambios a los datos. Power Apps proporciona herramientas para ofrecer estos comentarios. Si inserta una Success screen en su aplicación, querrá que los usuarios accedan a ella solo cuando Power Apps registra datos actualizados con éxito. ¿Cómo se hace eso?
Primero, busque la Success screen en Nueva pantalla>Plantillas. Luego, agréguela a su aplicación.
A continuación, busque su formulario y vaya a la propiedad OnSuccess
. Es importante enviar a los usuarios a la Success screen solo si Power Apps escribe correctamente sus datos. En la propiedad OnSuccess
, puede agregar una función Navigate
con el nombre de su Success screen; por ejemplo:
Navigate(‘Success Screen’, ScreenTransition.Fade)
Luego, querrá que los usuarios puedan navegar de vuelta a otra pantalla. Una buena técnica para lograrlo (aparte de hacer un botón/icono seleccionable) es agregar un control Timer
.
Navegación OnTimerEnd
El uso de un control Timer
es una forma de ayudar a los usuarios a navegar a través de su aplicación. Cuando se acaba el tiempo, la función Navigate
pasa a la pantalla designada. En nuestro ejemplo, el control Timer
permitiría al usuario ver el mensaje de éxito durante unos segundos y luego volver a catalog screen.
El control Timer
es visible cuando lo agrega a la aplicación y está configurado en una duración de 60 000 milisegundos (60 segundos). La propiedad AutoStart
está desactivada, lo que significa que deberá iniciarla mediante un desencadenador. En el modo predeterminado, con algunos ajustes, podemos hacer que se comporte como queramos. Los practicaremos en nuestro ejercicio de la siguiente unidad, pero aquí hay un resumen de los pasos:
Inserte un control
Timer
.Establezca la propiedad
AutoStart
entrue
.Establezca la propiedad
Duration
en4000
(cuatro segundos).Establezca la propiedad
OnTimerEnd
enNavigate('<yourScreenName>')
.Establezca la propiedad
Visible
enfalse
.
Con AutoStart
como true
, el control Timer
comienza cuando el usuario llega a la pantalla en modo de reproducción o de vista previa. En cuatro segundos, se activa la función Navigate
y envía al usuario a otra pantalla.
Navegación de OnChange
Otra buena técnica de navegación es agregar un menú a su aplicación como un control Dropdown
. Puede agregar la funcionalidad desplegable a una sola pantalla y luego copiarla a otras pantallas de su aplicación.
Un control Dropdown
utiliza una tabla de datos (tipo de datos: Table
). En la propiedad Items
, puede colocar cualquier tabla de datos que desee. Si solo tiene dos pantallas para la navegación, puede colocar una tabla en la propiedad Items
de su control Dropdown
de esta manera:
["","Catalog", "Admin"]
Los corchetes indican una tabla de datos y el código significa exactamente lo mismo que este ejemplo:
Table({Value: ""},{Value: "Catalog"},{Value: "Admin"})
Los corchetes proporcionan una forma más sencilla de introducir los mismos datos.
Ha agregado una cadena de texto vacía (""
) como su primer valor en la tabla. Ha asignado eso como la propiedad Default
.
Con la propiedad Items
definida, podemos cambiar la propiedad OnChange
del control Dropdown
.
Sugerencia
Tenga cuidado, debe actualizar la propiedad correcta del control Dropdown
. Es fácil equivocarse y actualizar la propiedad OnSelect
. Recuerde que inicia la propiedad OnSelect
cuando selecciona el control, no cuando cambia el control. Asegúrese de actualizar la propiedad OnChange
en una instancia como esta.
La forma más eficiente de actualizar la propiedad OnChange
para un control Dropdown
es usar una función Switch
y hacer referencia al control mediante la función Self
. Pero también podría usar una función If
.
Switch
e If
son formas de evaluar una condición y luego hacer una acción.
Con nuestra aplicación Cafeteras Contoso como ejemplo, el control Dropdown
tendría el siguiente código como la propiedad OnChange
:
Switch(Self.SelectedText.Value,
"Catalog",Navigate('Catalog Screen',ScreenTransition.Cover),
"Admin",Navigate('Admin Screen',ScreenTransition.Cover)
);
Reset(Self)
La instrucción Switch
evalúa un valor particular para ver si coincide con uno de los resultados y luego hace una acción. En el ejemplo anterior, Self.SelectedText.Value
es el valor seleccionado en el control Dropdown
. Si este valor es Catalog
, la función Switch
ejecuta la navegación en la catalog screen. Si el valor es Admin
, la función Switch
ejecuta la navegación en la admin screen.
Switch
ejecuta solo una condición que depende del valor coincidente. Por eso es ideal cuando tiene muchos cursos de acción posibles basados en un único valor.
Por último, se usa la función Reset
para restablecer el control Dropdown
al valor Default
de ""
(cadena vacía).
No se preocupe si no lo ha entendido todo. Lo repasaremos nuevamente en el ejercicio de la siguiente unidad.