Ejercicio: Rellenar y filtrar la galería

25 minutos

Ahora que ha agregado el origen de datos a Power Apps, ha agregado una galería y ha completado la tabla, debería estar listo para presentar los datos. Vuelva a la aplicación de lienzo y vaya a la pantalla Scr_AllExpenses. Si tenía abierta esta pantalla en otra pestaña, observe que la galería aún no se ha llenado. Power Apps almacena en caché el origen de datos y no siempre tiene la versión más actualizada si está realizando cambios.

Para corregir este problema, siga estos pasos:

Seleccione el botón Datos en el menú de la izquierda y luego busque Expense Reports.
Seleccione los puntos suspensivos para Más acciones (...), a la derecha de la tabla de Dataverse Expense Reports, y seleccione Actualizar. Los datos de Expense Report deben aparecer en la galería.
Vuelva a la Vista de árbol, donde podrá seleccionar varios controles y ver un menú de las pantallas de las aplicaciones (el icono Vista de árbol está en la esquina superior derecha del menú lateral, y tiene la imagen de un montón de papeles apilados).
Arrastre la galería para que solo ocupe la parte inferior de la pantalla, dejando algo de espacio en la parte superior. En la pestaña Propiedades del panel del lado derecho de la pantalla, en el área Position, establezca la propiedad Y en 236 y, en el área Size, establezca la propiedad Height en 900. La galería debe comenzar en la coordenada Y 236 y extenderse hasta la parte inferior de la pantalla.

A continuación, debe mostrar más información útil. La ubicación es útil, pero solo indica una fecha en la galería y no está claro si esta fecha es de salida o de llegada.
Seleccione Subtitle2 y luego revise la propiedad Text en la pestaña Propiedades. Es posible que la galería haya asignado otro campo, pero este muestra ThisItem.'Created On'. Toda la información de la tabla en la galería empieza con ThisItem, que especifica la fila. Por esta razón, solo puede manipular la primera línea y debe usar la lógica para que las líneas funcionen de manera diferente. Este tema se explica más adelante; de momento, cambie este campo a la fecha de salida.
En la propiedad Text, introduzca ThisItem.'Arrival Date'.

Vamos a trabajar en dos elementos relacionados con esta fecha. El primero es que se muestra la hora, que no es necesaria para este ejercicio. El segundo es que los usuarios aún no podrán discernir qué fecha se muestra (de llegada o salida). Vamos a manipular un poco el texto para solucionar esto. A menudo, la función Text es lo que necesita cuando se intenta dar formato.
Vamos a actualizar la propiedad Text para eliminar la hora de nuestra fecha de llegada. Para ello, creamos la fórmula de la siguiente manera:
```
Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate)
```
Ahora, debería tener la misma información que antes pero en el formato que quería (sin la hora). Para agregar cadenas de texto juntas, use una Y comercial (&) y, para definir texto en la barra de fórmulas, use comillas (como habrá observado cuando creó la primera pantalla). Combinamos estos principios para crear las fechas de llegada y salida con el fin de que se presenten como intervalo de fechas.
Actualice la fórmula según el siguiente código.
```
Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate) & " - " & Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate)
```
La parte DateTimeFormat de la fórmula desaparece cuando se hace clic fuera de la barra de fórmulas. Esto ocurre con algunas funciones y no afectará negativamente a su código. Cuando vuelva a hacer clic en la barra de fórmulas, aparecerá la fórmula completa.
Demos un paso más y actualicemos nuestra fórmula una vez más para mostrarle cómo puede agregar texto adicional para ajustar la experiencia del usuario. Agregamos "Arrival" y "Departure" para que no haya confusión sobre lo que representa cada fecha. Puede actualizar la fórmula Text con lo siguiente:
```
"Arrival: " & Text(ThisItem.'Arrival Date', DateTimeFormat.ShortDate) & " - Departure: " & Text(ThisItem.'Departure Date', DateTimeFormat.ShortDate)
```
Ahora que tiene la galería con el aspecto que desea, trabajemos en un filtro para que los viajeros solo puedan ver sus propios registros. Actualmente, los usuarios pueden ver los datos de todos en nuestra galería. Para filtrar los datos, vamos a modificar la propiedad Items de la galería. Primero, debe capturar la información del usuario que inició sesión.
El control Aplicación aparece sobre la primera pantalla en la Vista de árbol. Seleccione Aplicación y, en el menú desplegable de propiedades, seleccione OnStart.

La propiedad OnStart le permite especificar una o más funciones que se ejecutarán cuando se inicie la aplicación. En este caso, recopila la información del usuario que inició sesión. Puede llamar a este origen de datos desde cualquier instancia de la aplicación, pero lo mejor es llamarlo solo una vez y luego almacenarlo para uso futuro en la aplicación. Cada vez que llame a un origen de datos (en este caso, desde Microsoft Entra ID), se crea una carga de rendimiento en la aplicación y utiliza recursos. Por esta razón, es mejor llamar la menor cantidad de veces posible, especialmente para algo que no va a cambiar en toda la instancia de aplicación, como son los datos del usuario actual.

Para almacenar información para su uso posterior en la aplicación, podemos establecer una variable. Básicamente, una variable es información en diferentes formatos, como texto, fecha, número o incluso un registro (o una fila de datos). En la codificación tradicional, muchas veces deberá definir el tipo de variable que está utilizando. Sin embargo, Power Apps calcula ese tipo de variable por usted. Cuando defina una variable, asegúrese de usar siempre el mismo tipo (o definición) para esa variable en el futuro.
Defina la variable especificando la siguiente fórmula en la propiedad OnStart: Set(VarUser, User()).

VarUser es el nombre de esta variable y User() es la definición que, en este caso, es una función que recopila información de Microsoft Entra ID. Puede usar cualquier nombre para las variables; sin embargo, al igual que con los controles, es mejor comenzar las variables con var o alguna otra nomenclatura que ayude a recordarlos más adelante.

Los usuarios no tendrán que solicitar que se desencadene la propiedad OnStart, pero cuando cambie la propiedad durante la creación, deberá desencadenarla.
Para desencadenar la variable, seleccione los puntos suspensivos (...) junto a Aplicación y, luego, seleccione Ejecutar OnStart desde las opciones. Ahora que se ha rellenado la variable, puede usarla para filtrar la galería.
Seleccione Gal_ExpenseReports_AllExpenses en la Vista de árbol y, luego, asegúrese de que la propiedad Items está visible en el menú desplegable.
Cambie Expense Reports por Filter('Expense Reports', Traveler.'Primary Email'=VarUser.Email)

Sus datos ahora se filtran para los elementos en los que aparece como el viajero.

Según va escribiendo las fórmulas, Power Apps le indicará el idioma correcto y le ofrecerá sugerencias a medida que avance. Esta característica le ayuda a aprender fórmulas y a cómo escribir expresiones. Además, tenga en cuenta que necesitaba explorar en profundidad la información de viajero para encontrar el correo electrónico. Como es una columna de búsqueda, contiene toda la información de la tabla Usuarios. Piense en el punto como si fuera una pala que le ayuda a profundizar en aquello a lo que esté haciendo referencia. Tuvo que hacer lo mismo para VarUser porque contiene toda la información de la función User() que tiene nombre completo, correo electrónico y foto.

Ahora, la galería está exactamente como desea. Sin embargo, debe agregar aún algunos elementos a la página para que sea más útil y para mejorar la experiencia del usuario (UX). Su próxima tarea es agregar un título para que los usuarios sepan que están en la pantalla correcta.
Haga clic en el espacio vacío encima de la galería y, luego, seleccione Insertar.
Seleccione Text label para agregar una nueva etiqueta a la pantalla.
Cambie las siguientes propiedades del control Etiqueta de texto a través del panel Propiedades o el panel Avanzado. Algunas propiedades también están disponibles en la barra de comandos.
- Text: All Expense Reports
- Size: 24
- FontWeight: seminegrita
- Text Alignment: centrado
- X: 0
- Y: 0
- Width: 640
- Height: 92
- Fill: RGBA(85, 106, 129, 1)
Cuando haya terminado de configurar esas propiedades de etiqueta, cambie el nombre de la etiqueta para que siga la nomenclatura que ha aprendido: Lbl_Header_AllExpenses

A continuación, vamos a encontrar una forma para volver a la pantalla de inicio. Puede realizar acciones con un botón, pero también puede usar muchos controles para las acciones. Uno de estos controles es un icono.
Seleccione Insertar y luego el menú desplegable Iconos. Puede desplazarse para agregar el icono que necesita o seleccionar uno y luego cambiar el icono en las propiedades. Algunos desarrolladores prefieren este método porque les permite buscar en los iconos en lugar de desplazarse para encontrar el que desean.
Para este ejercicio, utilice el icono Flecha atrás con el fin de indicar que cuando se pulse este icono, volverá a la página de inicio. Para encontrarlo rápidamente, introduzca "atrás" en el campo de búsqueda Insertar (asegúrese de elegir el icono en lugar de la forma).
Cambie las siguientes propiedades del icono Flecha hacia atrás:
- X: 9
- Y: 21
- Width: 64
- Height: 50
- Color: RGBA(255, 255, 255, 1)
- OnSelect: Back()
Si bien podría haber usado la función Navigate(), está utilizando la función Back(), que lleva al usuario a la pantalla en la que estaba inmediatamente antes de la pantalla actual. Puede usar cualquier función, pero en este ejercicio usamos Back() para que pueda familiarizarse con otra función muy práctica.
Cambie el nombre de su icono a Icn_Back_AllExpense

Otro componente que puede agregar para mejorar la experiencia del usuario es un filtro de destino para que los usuarios puedan encontrar rápidamente el informe de gastos que están buscando.
Agregue otra Etiqueta de texto a la pantalla y, después, establezca las siguientes propiedades:
- Text: Trip Destination
- Size: 18
- X: 0
- Y: 92
- Width: 640
- Height: 144
- Fill: ColorFade(Lbl_Header_AllExpenses.Fill, 30%)
- PaddingTop: 20
- PaddingLeft: 40
- VerticalAlign: VerticalAlign.Top
Cambie el nombre de la etiqueta a Lbl_TripDestination_AllExpenses

Hemos usado la función ColorFade para la propiedad Fill, y hemos hecho referencia a la propiedad Fill de la primera etiqueta que ha creado. En las aplicaciones de lienzo, es habitual hacer referencia a otros controles, motivo por el cual los nombres de los controles son tan importantes. La función ColorFade() hace que un color sea más claro o más oscuro en un determinado porcentaje. Los porcentajes positivos mostrarán un color más claro y los negativos un color más oscuro. Esta función puede ser útil cuando diseñe aplicaciones.

Consejo

Al definir colores personalizados, puede crear una variable global en lugar de hacer referencia a otro control. Esto es particularmente útil si desea crear un color para usarlo en toda su aplicación. Puede usar la propiedad OnStart de la aplicación, como hicimos con VarUser, para definir las variables que desea usar en toda la aplicación.

Es posible que advierta que esta etiqueta tiene una aspecto extraño. La razón es que está solapando un menú desplegable. Puede incluir un rectángulo detrás de la etiqueta y el menú desplegable, pero cuantos más controles tenga, más tiempo tardará en cargar la pantalla. Por esta razón, trate de usar la menor cantidad de controles posible y combínelos siempre que pueda.
Ahora, agreguemos un control para seleccionar un destino. Seleccione Insertar, Entrada y luego el control Desplegable, o puede introducir "drop" en el cuadro de búsqueda Insertar y seleccionar Desplegable.
Cambie las siguientes propiedades del control Desplegable a través del panel Propiedades o el panel Avanzado.
- X: 35
- Y: 162
- Width: 560
- Height: 50
- Fill: Lbl_Header_AllExpenses.Fill
- ChevronBackground: Lbl_Header_AllExpenses.Fill
- Size: 16
- AllowEmptySelection: true
- Items: Distinct(Filter('Expense Reports', Traveler.'Primary Email' = VarUser.Email), 'Trip Destination')
Los controles Desplegable tienen propiedades diferentes a otros controles. Se dará cuenta de esta diferencia a medida que se familiarice con más controles. Además, nuestra fórmula usa la función Distinct, que devuelve campos de una tabla y elimina los duplicados. Por consiguiente, si visita la misma ubicación varias veces, esta solo aparecerá una vez en el menú desplegable.
Cambie el nombre de su control Desplegable a Ddn_Destination_AllExpenses

La tarea final que va a realizar en esta pantalla es asegurarse de que la galería realice el filtrado según la selección del control desplegable.
Seleccione la galería y cambie la propiedad Items a lo siguiente:
```
If(
    IsBlank(Ddn_Destination_AllExpenses.Selected.Value),
    Filter(
        'Expense Reports',
        Traveler.'Primary Email' = VarUser.Email
    ),
    Filter(
        'Expense Reports',
        Traveler.'Primary Email' = VarUser.Email,
        'Trip Destination' = Ddn_Destination_AllExpenses.Selected.Value
    ) 
)
```
Puede expandir la barra de fórmulas para tener más espacio para escribir. Seleccione Aplicar formato al texto cuando haya terminado la fórmula para que sea más clara y fácil de leer.

Esta fórmula se ha vuelto compleja, así que vamos a explicar lo que está pasando. Ha incluido la propiedad items inicial dentro de una instrucción If(), que le permite especificar diferentes resultados en función de una o varias condiciones. En este caso, la prueba (o condición) lógica es si el control dropdown está en blanco o no. Si el control dropdown está en blanco (valor True), los elementos de la galería solo los filtrará el usuario. Como alternativa, si el control dropdown no está en blanco (valor False), los elementos de la galería se filtrarán por el usuario y el destino.

Nota

Ocasionalmente, cuando reinicie la propiedad Items de una galería, algunas etiquetas cambian para centrarse en diferentes campos. Si da la impresión de que algunos de los datos han desaparecido, asegúrese de que la propiedad Text de la etiquetas sea la correcta.

Para probar el filtro de la galería, ponga la aplicación en modo Versión preliminar. Para ello, seleccione el icono Reproducir en la esquina superior derecha o seleccione la tecla F5.

Ha completado la configuración de la pantalla para ver y filtrar los datos de viaje por el usuario que ha iniciado sesión. La pantalla debería tener un aspecto similar al siguiente.

Continuar

Ejercicio: Rellenar y filtrar la galería

Comentarios