Ejercicio: Práctica de navegación en la aplicación

  • 30 minutos

Nos acercamos al final de este módulo, así que vamos a aplicar lo que hemos aprendido en un ejercicio guiado.

En este ejemplo, continuará configurando transiciones de pantalla en la aplicación Contoso Coffee Machines. Si está utilizando otra aplicación multipantalla, puede seguir pasos similares.

Nota

Al introducir fórmulas, es mejor escribirlas directamente en la barra de fórmulas (fx). Evite copiar y pegar de otras fuentes, ya que es posible que las comillas simples y dobles no se traduzcan correctamente en Power Apps.

  1. Inicie sesión en la página principal de Power Apps y abra la aplicación Contoso Coffee Machines en modo de edición.

  2. En la pantalla de inicio, seleccione el botón Ver catálogo (Button2 en el siguiente ejemplo). En la propiedad OnSelect, sustituya

    Navigate('Catalog Screen')

    por

    Navigate('Catalog Screen',ScreenTransition.Cover)

    Captura de pantalla de la propiedad OnSelect del botón Ver catálogo

  3. Aún en la pantalla de inicio, seleccione el botón Admin Screen. En la fórmula OnSelect, cambie

    Navigate('Admin Screen')

    por

    Navigate('Admin Screen',ScreenTransition.Fade)

  4. Obtenga una vista previa de la aplicación. Seleccione los botones Catalog y Admin para observar las transiciones. Luego, utilice los botones Atrás para volver a la pantalla de inicio.

  5. Cambie de nuevo al modo de edición. En Admin Screen, seleccione el icono de flecha empleado como botón para volver. Actualice la propiedad OnSelect

    Back()

    a

    Back(ScreenTransition.UnCoverRight)

  6. Obtenga de nuevo una vista previa de la aplicación. Seleccione el botón Admin Screen y el botón Atrás. Como puede ver, hay una diferencia en la transición de retorno.

  7. En el modo de edición, introduzca una nueva pantalla: Nueva pantalla>Plantillas>Éxito. Cámbiele el nombre a Success Screen.

  8. En Catalog Screen, seleccione el control Formulario desde la Vista de árbol.

  9. Ponga la propiedad OnSuccess en

    Navigate(‘Success Screen’,ScreenTransition.Fade)

  10. Vaya a Success Screen en la Vista de Árbol e inserte un control de Temporizador.

  11. Configure las siguientes propiedades para el control de Temporizador.

    • AutoStart: true

    • Duration: 4000

    • OnTimerEnd: Navigate(‘Catalog Screen’,ScreenTransition.Fade)

    • Visible: false

    Captura de pantalla de las propiedades del control de temporizador

  12. Vuelva a Catalog Screen y obtenga una vista previa de la aplicación. Haga un cambio en el formulario y seleccione Guardar cambios.

    La aplicación debería mostrar la Success Screen durante cuatro segundos y, luego, volver a la Catalog Screen.

  13. Salga del modo de vista previa y vuelva a Home Screen. Ahora, añada un menú de navegación desplegable.

  14. Inserte un control Desplegable y colóquelo debajo de la esquina superior izquierda del rectángulo del encabezado.

  15. Añada un control Etiqueta de texto por encima del menú desplegable y ponga la propiedad Text en lo siguiente:

    Screen Navigation

    Establezca la propiedad Color en lo siguiente:

    Color.White

  16. Seleccione el control Dropdown y establezca sus propiedades:

    • Default: ""

    • Items: ["", "Catalog Screen", "Admin Screen"]

  17. Establezca la propiedad OnChange:

    Switch(
    Self.SelectedText.Value,
    "Catalog",
    Navigate(
        'Catalog Screen',
        ScreenTransition.Cover
    ),
    "Admin",
    Navigate(
        'Admin Screen',
        ScreenTransition.Cover
    )
);
Reset(Self)

    Captura de pantalla de la propiedad OnChange del control desplegable

  18. Obtenga de nuevo una vista previa de la aplicación. Pruebe el control desplegable para confirmar que hay navegación entre pantallas.

  19. Vuelva al modo de edición y seleccione la Catalog Screen. Copie el icono Volver (Ctrl+C) y péguelo (Ctrl+V). Mueva el icono de duplicado a la parte superior derecha del rectángulo del encabezado.

  20. Cambie el icono duplicado por un icono de Inicio.

  21. Ponga la propiedad OnSelect del icono de Inicio en lo siguiente:

    Navigate('Home Screen', ScreenTransition.CoverRight)

  22. Obtenga una vista previa de la aplicación. En Catalog Screen, confirme que, al seleccionar el icono de Inicio, vuelve a Home Screen.

Ha configurado correctamente las características de navegación en su aplicación:

  • Funciones Navegar y Atrás con transiciones de pantalla.
  • Aparece una Success Screen al enviar un formulario mediante OnSuccess.
  • Un Temporizador que navega después de un retraso a través de OnTimerEnd.
  • Un menú Desplegable para navegar usando OnChange.
  • Un icono Inicio para volver a la pantalla de inicio.

Ahora, vamos a hacer una prueba de conocimientos.