Power Apps – Sesión 02 – Resumen
🎯 Objetivo de la clase
La sesión tuvo como objetivo construir una primera aplicación Canvas desde una pantalla en blanco, entendiendo la estructura visual de Power Apps, el uso de contenedores, controles básicos, multimedia, navegación entre pantallas y diseño responsive.
El enfoque principal fue dejar la base de una aplicación empresarial con estas pantallas:
- Pantalla de inicio
- Pantalla de login
- Pantalla de módulos
- Pantalla principal con estructura tipo sistema: header, menú lateral, contenido central y footer
1) 🧭 Repaso inicial y enfoque de la sesión
Al inicio se recordó que en la clase anterior se había usado Copilot / IA para generar una aplicación rápidamente. Sin embargo, el docente reforzó que es importante aprender a construir la aplicación manualmente para entender:
- cómo se crean las pantallas,
- cómo se insertan controles,
- cómo se organizan los elementos,
- cómo se administra la aplicación,
- y cómo se adapta a distintos dispositivos.
✅ Idea clave: Copilot ayuda a acelerar, pero el alumno debe comprender cómo construir, modificar y mantener una app desde cero.
2) 🔐 Configuración inicial de acceso
Antes de iniciar el desarrollo, se revisó el acceso a la cuenta de Microsoft 365 / Power Apps.
Temas vistos
- Ingreso al portal de Power Apps.
- Configuración de doble autenticación.
- Uso de Microsoft Authenticator.
- Escaneo de código QR.
- Validación de acceso con código temporal.
📌 Recomendación del docente: configurar correctamente la autenticación en esta sesión para evitar retrasos en las próximas clases.
3) 🧱 Estructura de una aplicación Canvas
Se explicó la estructura básica de una aplicación en Power Apps:
| Elemento | Descripción |
|---|---|
| Pantalla | Contenedor principal visual de la aplicación |
| Controles | Elementos que se insertan dentro de la pantalla |
| Contenedores | Agrupan controles y ayudan al diseño responsive |
| Propiedades | Configuran comportamiento, tamaño, color, posición y visibilidad |
| Fórmulas | Definen lógica y comportamiento de los controles |
✅ En una app Canvas, las fórmulas se aplican a controles y propiedades, no a celdas como en Excel. Microsoft explica que Power Apps usa Power Fx para controlar propiedades como Text, OnSelect, Visible, Width y Height. [bing.com]
4) 📦 Contenedores en Power Apps
Uno de los temas centrales fue el uso de contenedores para organizar la interfaz.
Tipos de contenedores revisados
| Tipo de contenedor | Uso principal |
|---|---|
| Contenedor libre | Permite ubicar controles manualmente en cualquier posición |
| Contenedor horizontal | Ordena los controles de izquierda a derecha |
| Contenedor vertical | Ordena los controles de arriba hacia abajo |
Microsoft define el control Container como un control que agrupa controles relacionados, permite crear jerarquías y tiene propiedades propias como Width, Height, Visible, Fill, BorderColor, entre otras. [learn.microsoft.com]
Propiedades importantes de contenedores
Durante la práctica se revisaron propiedades como:
- Dirección: horizontal o vertical
- Justificación: inicio, centro, fin
- Alineación
- Espaciado
- Borde
- Color de fondo
- Desbordamiento horizontal / vertical
- Ancho flexible
- Alto flexible
✅ Idea clave: los contenedores son fundamentales para organizar mejor la app y lograr interfaces adaptables a distintos tamaños de pantalla. Microsoft recomienda usar fórmulas y estructuras jerárquicas para crear layouts responsive en Canvas Apps. [learn.microsoft.com]
5) 📱 Diseño responsive y tamaños de pantalla
El docente explicó que una aplicación debe verse correctamente en distintos dispositivos:
- celular,
- tablet,
- laptop,
- monitor grande.
Se mencionaron referencias aproximadas de ancho:
| Dispositivo | Ancho aproximado |
|---|---|
| Celular | 600 px |
| Tablet | 900 px |
| Laptop / escritorio | mayor a 1000 px |
Fórmulas usadas conceptualmente
Se aplicaron fórmulas para que imágenes y contenedores ocupen el tamaño de la pantalla:
JSON
powerfx no es totalmente compatible. El resaltado de sintaxis se basa en JSON.
1
Parent.WidthMostrar más líneas
JSON
powerfx no es totalmente compatible. El resaltado de sintaxis se basa en JSON.
1
Parent.HeightMostrar más líneas
También se revisó cómo cambiar el comportamiento de los elementos cuando se visualiza la app en orientación vertical u horizontal.
✅ Microsoft indica que para lograr diseño responsive se deben usar propiedades como App.Width, App.Height, Parent.Width y Parent.Height, y desactivar comportamientos que solo escalan la app sin reorganizar controles. [learn.microsoft.com]
6) 🖼️ Pantalla de inicio con imagen y banner
Se construyó una pantalla inicial con estilo visual tipo banner.
Elementos utilizados
- Imagen de fondo
- Contenedor principal
- Contenedores internos
- Botón Ingresar
- Textos descriptivos
- Íconos laterales
- Colores temporales para identificar contenedores
Uso de multimedia
Se mostró cómo:
- cargar una imagen desde la computadora,
- agregarla al panel de multimedia,
- asignarla a un control de imagen,
- ajustar su posición: rellenar, estirar o mosaico.
📌 Buena práctica: al inicio se usaron bordes y colores fuertes para identificar qué contenedor correspondía a cada parte de la pantalla. Luego se retiraron los bordes para una apariencia más profesional.
7) 🧭 Navegación entre pantallas
Se configuró la navegación entre:
- Pantalla de inicio
- Pantalla de login
- Pantalla de bienvenida / módulos
La navegación se realizó desde la propiedad OnSelect de botones.
Ejemplo conceptual
JSON
powerfx no es totalmente compatible. El resaltado de sintaxis se basa en JSON.
1
Navigate(ScreenLogin)Mostrar más líneas
JSON
powerfx no es totalmente compatible. El resaltado de sintaxis se basa en JSON.
1
Navigate(ScreenBienvenido)Mostrar más líneas
✅ Concepto clave: Navigate() cambia la pantalla visible dentro de una app Canvas y normalmente se usa en propiedades de comportamiento como OnSelect.
8) 🔑 Construcción de pantalla de login
La segunda pantalla importante fue una pantalla de login.
Estructura visual
Se organizó con un contenedor principal horizontal dividido en dos zonas:
| Zona | Contenido |
|---|---|
| Izquierda | Logo / imagen / texto institucional |
| Derecha | Formulario de login |
Controles usados
- Imagen / logo
- Etiquetas de texto
- Entrada de texto para usuario
- Entrada de texto para contraseña
- Íconos
- Botón Acceder
- Contenedores de espaciado
La pantalla se organizó con contenedores verticales y horizontales para simular una interfaz más profesional.
9) 🧩 Controles básicos usados
Durante la sesión se utilizaron varios controles fundamentales:
| Control | Uso |
|---|---|
| Label / Etiqueta | Mostrar texto fijo |
| Text input / Entrada de texto | Capturar usuario y contraseña |
| Button / Botón | Ejecutar navegación o acciones |
| Image / Imagen | Mostrar fondo o logotipo |
| Icon / Ícono | Elementos visuales de apoyo |
| Container / Contenedor | Ordenar y agrupar controles |
✅ Microsoft documenta que las aplicaciones Canvas combinan controles como galerías, formularios, etiquetas, entradas, botones y otros controles para construir experiencias interactivas. [learn.microsoft.com], [learn.microsoft.com]
10) 🧪 Vista previa y pruebas en distintos dispositivos
Se usó la opción de vista previa para validar cómo se veía la app en distintos formatos.
Observaciones realizadas
- En escritorio, el diseño se veía completo.
- En modo móvil, algunos elementos se cortaban.
- En orientación horizontal, ciertos botones podían desaparecer.
- Fue necesario ajustar contenedores, alturas y anchos para mejorar la respuesta visual.
📌 Aprendizaje principal: no basta con que la pantalla se vea bien en PC; también debe probarse en móvil y tablet.
11) 🧭 Pantalla de módulos
Al final se creó una pantalla de bienvenida o módulos, que será usada en la siguiente clase.
Su objetivo es simular un sistema empresarial donde el usuario, después de iniciar sesión, accede a módulos según permisos o roles.
Funcionalidad inicial
- Se insertó una pantalla desde plantilla.
- Se configuró navegación desde el botón Acceder.
- Todavía no se implementó validación real de usuario y contraseña.
📌 Siguiente paso planteado: validar el usuario contra una tabla, posiblemente en Dataverse, para permitir o negar acceso.
❓ Preguntas y respuestas destacadas
1)¿Qué diferencia hay entre contenedor libre, horizontal y vertical?
Respuesta del docente:
El contenedor libre permite ubicar los controles manualmente. El horizontal ordena los controles de izquierda a derecha, y el vertical los organiza de arriba hacia abajo.
Refuerzo oficial:
Microsoft explica que los contenedores agrupan controles, afectan el layout de la app y tienen propiedades propias como tamaño, color, visibilidad y posición. [learn.microsoft.com]
2)¿Por qué el botón desaparecía en vista móvil?
Respuesta del docente:
Porque algunos contenedores tenían alturas o anchos fijos demasiado grandes, lo que provocaba que otros elementos quedaran fuera del área visible.
Solución recomendada:
Usar propiedades relativas como Parent.Width, Parent.Height, contenedores flexibles y probar en diferentes orientaciones.
Refuerzo oficial:
Microsoft recomienda construir layouts responsive usando fórmulas basadas en dimensiones reales de pantalla y jerarquías de contenedores. [learn.microsoft.com]
3)¿Por qué se usaron colores en los bordes de los contenedores?
Respuesta del docente:
Para identificar visualmente la estructura interna de la pantalla mientras se aprende el uso de contenedores.
Solución recomendada:
Durante el diseño, usar colores temporales ayuda a entender la jerarquía. En la versión final, esos bordes deben retirarse o reemplazarse por estilos profesionales.
4)¿Se puede validar usuario y contraseña en el login?
Respuesta del docente:
Sí, pero en esta sesión solo se creó el diseño. La validación real se verá más adelante, idealmente consultando una tabla de usuarios.
Refuerzo oficial:
Power Apps permite conectar aplicaciones Canvas a orígenes de datos y usar fórmulas para consultar, filtrar y validar información. [learn.microsoft.com], [bing.com]
5)¿Para qué sirve la propiedad OnSelect?
Respuesta del docente:
Sirve para definir qué ocurre cuando el usuario hace clic en un control, como un botón o una imagen.
Refuerzo oficial:
Microsoft explica que las fórmulas de comportamiento, como las usadas en OnSelect, permiten responder a la interacción del usuario. [bing.com]
✅ Conclusiones
- La sesión permitió construir la primera aplicación Canvas desde cero.
- Se aprendió el uso básico y práctico de contenedores, especialmente para diseño responsive.
- Se crearon las primeras pantallas de una app empresarial: inicio, login y módulos.
- Se trabajó con controles comunes como botones, etiquetas, entradas de texto, imágenes e íconos.
- Se configuró la navegación básica con
Navigate(). - Se reforzó la importancia de probar el diseño en diferentes dispositivos y orientaciones.
- La clase dejó preparada la base para continuar con validaciones, fórmulas y conexión a datos en las siguientes sesiones.
💡 Recomendaciones
- Practicar el uso de contenedores antes de crear pantallas complejas.
- Usar colores temporales para reconocer la estructura de los contenedores durante el diseño.
- Probar siempre la app en escritorio, tablet y móvil.
- Evitar depender solo de tamaños fijos; usar propiedades relativas como
Parent.WidthyParent.Height. - Nombrar correctamente pantallas y controles, por ejemplo:
scrInicio,scrLogin,btnIngresar,txtUsuario. - Separar diseño y funcionalidad: primero construir la interfaz, luego aplicar validaciones y conexión a datos.
- Usar Navigate() de forma ordenada para controlar el flujo de pantallas.
📚 Referencias oficiales de Microsoft
- Documentación de aplicaciones Canvas de Power Apps
https://learn.microsoft.com/es-es/power-apps/maker/canvas-apps/ [learn.microsoft.com] - Crear y diseñar aplicaciones Canvas
https://learn.microsoft.com/es-es/power-apps/maker/canvas-apps/build-and-design [learn.microsoft.com] - Introducción a fórmulas en aplicaciones de lienzo
https://learn.microsoft.com/es-es/power-apps/maker/canvas-apps/working-with-formulas [bing.com] - Control Container en Power Apps
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-container [learn.microsoft.com] - Crear diseños responsive en Canvas Apps
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout [learn.microsoft.com] - Funciones Back y Navigate
https://learn.microsoft.com/es-es/power-platform/power-fx/reference/function-navigate
