Más formas de usar la función Navigate

  • 6 minutos

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.

Captura de pantalla de las plantillas para nuevas pantallas

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:

  1. Inserte un control Timer.

  2. Establezca la propiedad AutoStart en true.

  3. Establezca la propiedad Duration en 4000 (cuatro segundos).

  4. Establezca la propiedad OnTimerEnd en Navigate('<yourScreenName>').

  5. Establezca la propiedad Visible en false.

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.