Trabajando con galerías anidadas en Power Apps: una guía completa

En el desarrollo de aplicaciones empresariales con Power Apps, una necesidad común es mostrar datos relacionados de manera jerárquica. Las galerías anidadas son una herramienta poderosa para lograr esto, permitiendo visualizar registros principales y sus correspondientes detalles de forma estructurada y clara.

En este artículo, exploraremos cómo trabajar con galerías anidadas, cómo conectar datos relacionados y cómo mostrar esos datos en Power Apps.

🤔 ¿Qué son las Galerías Anidadas?

Las galerías anidadas consisten en una galería principal que contiene una o más galerías secundarias dentro de sus ítems. Estas se utilizan para representar relaciones de datos, como:

• Padre-Hijo: Órdenes y sus líneas de productos.

• Categorías y Detalles: Categorías principales y los elementos que pertenecen a cada una.

Por ejemplo, puedes tener una galería principal que muestra las órdenes de compra y, dentro de cada ítem, una galería secundaria que detalla los productos incluidos en cada orden.

---

✅ Paso 1: Preparar los Datos

Antes de trabajar con galerías anidadas, necesitas asegurarte de que los datos estén estructurados correctamente. Normalmente, los datos relacionados se encuentran en diferentes tablas o listas.

Relación Clave

Para establecer la relación entre los datos, debe haber un campo común entre ambas tablas, como:

• En una lista de órdenes: OrderID.

• En una lista de detalles de productos: OrderID también.

Colecciones de Ejemplo

Supongamos que tienes dos listas de SharePoint:

1. Ordenes

   • OrderID

   • OrderDate

   • VendorName

2. DetallesOrden

   • OrderID

   • ProductName

   • Amount

---

🖼️ Paso 2: Crear las Galerías Anidadas

Galería Principal (Padre)

1. Inserta una galería en tu pantalla y conéctala a la lista principal (Ordenes).

2. Configura la propiedad Items de la galería: Ordenes

3. Diseña los campos visibles, como OrderDate y VendorName.

Galería Secundaria (Hijo)

1. Dentro del contenedor de un ítem en la galería principal, inserta otra galería.

2. Configura la propiedad Items de la galería secundaria para filtrar los datos relacionados:
   Filter(DetallesOrden, OrderID = ThisItem.OrderID)

3. Diseña los campos visibles, como ProductName y Amount.

4. Tip personal: establece alturas condicionales en la propiedad Height (te daras cuenta que si estiras o contraes la galeria usando el mouse esta formula se borrara) asi que sugiero que la guardes comentada en alguna parte de la app, te salvara cuando si el instinto de usuario te supera.
   La mia fue asi:
   //DONT TOUCH
Self.AllItemsCount*108

---

👩🏻‍🔧 Paso 3: Mejorar la Experiencia del Usuario

Seleccionar Registros

Permite que los usuarios seleccionen un registro en la galería principal y vean los detalles en la secundaria:

1. Configura la propiedad OnSelect de la galería principal:
   Set(varSelectedOrder, ThisItem.OrderID)

2. Modifica la propiedad Items de la galería secundaria para depender de la selección:
   Filter(DetallesOrden, OrderID = varSelectedOrder)

Mostrar Datos Condicionados

Por ejemplo, usa un toggle para mostrar u ocultar ciertos detalles:

1. Inserta un toggle y configura su propiedad
   OnCheck:
UpdateContext({showGrouped: true})

2. Configura su propiedad
   OnUncheck:
UpdateContext({showGrouped: false})

3. Cambia la galería secundaria para que agrupe los datos si el toggle está activo:
   If(
showGrouped,
GroupBy(Filter(DetallesOrden, OrderID = varSelectedOrder), "ProductName", "GroupedData"),
Filter(DetallesOrden, OrderID = varSelectedOrder)

---

🕵🏻‍♀️ Avistamiento de Errores

1. Problemas de Delegación: si estas usando SharePoint como base de datos los tendras, usar colecciones te facilitara la vida:
   ClearCollect(ColDetallesOrden, Filter(DetallesOrden, OrderID = varSelectedOrder))

2. Datos No Actualizados: Si los datos no se actualizan en tiempo real, utiliza Refresh(DataSource) en eventos clave (al entrar a una nueva pantalla o al pulsar un botón)

3. Diseño Desordenado: Mantén consistencia en los estilos y el espaciado para mejorar la experiencia del usuario.

---

😉 Conclusión

Las galerías anidadas en Power Apps son una forma efectiva de visualizar relaciones complejas entre datos, ademas de ser lo que nos pide el cliente ;) , ofrecer a los usuarios una experiencia intuitiva y funcional. Experimenta con as propiedades y opciones avanzadas para adaptarlas a tus necesidades específicas y trata de optimizar tu tiempo invertido en el diseño.

¡Suerte con las galerias anidadas! 😉