Guía Completa para Principiantes: Crea tu Primera Canvas App en Power Apps
Juan Carlos Santiago
Guía Completa para Principiantes: Crea tu Primera Canvas App en Power Apps
Si nunca has trabajado con Power Apps, este es el momento perfecto para comenzar. Te guiaré a través de la creación de una aplicación Canvas App funcional: un rastreador de inventario simple que te permitirá gestionar productos, cantidades y ubicaciones. No necesitas experiencia previa en programación.
¿Qué es una Canvas App?
Una Canvas App es una aplicación de Power Apps que creas desde cero, con total libertad de diseño. Es como tener un lienzo en blanco donde colocas controles (botones, tablas, formularios) exactamente donde deseas. A diferencia de las Model Apps, las Canvas Apps te dan control total sobre la experiencia del usuario.
Requisitos Previos
Antes de comenzar, asegúrate de tener:
- Acceso a Power Apps (incluido en la mayoría de planes de Microsoft 365)
- Una lista de SharePoint con datos de inventario (o la crearemos juntos)
- Un navegador web moderno
- 30-45 minutos de tu tiempo
Paso 1: Preparar tu Lista de SharePoint
Primero, crearemos la fuente de datos. Ve a tu sitio de SharePoint y crea una nueva lista con estos pasos:
-
En SharePoint, selecciona Nuevo > Lista
-
Elige Lista en blanco y asigna el nombre "Inventario"
-
Añade las siguientes columnas (además del título predeterminado):
- Cantidad (Número)
- Ubicación (Texto de una línea)
- Categoría (Texto de una línea)
- Precio Unitario (Número con decimales)
- Última Actualización (Fecha y hora)
-
Añade algunos registros de prueba para trabajar con datos reales
Paso 2: Crear la Canvas App
Ahora viene la parte emocionante. Accede a Power Apps (powerapps.microsoft.com) y sigue estos pasos:
- Selecciona Crear en el menú izquierdo
- Elige Canvas App desde blanco
- Dale un nombre descriptivo: "Rastreador de Inventario"
- Selecciona Tablet como formato (nos da más espacio para trabajar)
- Haz clic en Crear
Felicidades, estás dentro del editor de Power Apps. Ahora verás:
- El lienzo (área blanca donde diseñas)
- El panel de propiedades (a la derecha)
- El árbol de objetos (izquierda)
Paso 3: Conectar a SharePoint
Este paso es crucial. Necesitamos conectar tu app a la lista de SharePoint:
- En la pestaña Datos, haz clic en Agregar datos
- Busca y selecciona tu sitio de SharePoint
- Elige la lista "Inventario"
- Verás que "Inventario" aparece bajo "Conectores" en el panel izquierdo
¡Excelente! Ahora tu app puede acceder a los datos de SharePoint.
Paso 4: Crear la Pantalla Principal con Galería
Vamos a mostrar todos los productos en una galería:
- En la Insertar > Galería > En blanco vertical
- Cambia el tamaño para ocupar la mayor parte del lienzo
- En el panel de propiedades, establece:
- Items:
Inventario
- Items:
La galería ahora mostrará todos los registros. Personalicemos cómo se ven:
- Haz clic en el primer elemento de la galería
- Selecciona Editar elemento de galería
- Añade controles (Etiqueta) para mostrar:
- Título del producto
- Cantidad
- Ubicación
Arregla el tamaño y posición de cada elemento para que se vea profesional.
Paso 5: Agregar un Formulario para Editar Datos
Ahora crearemos una segunda pantalla para editar inventario:
-
Haz clic en Nueva pantalla > En blanco
-
Inserta un control Formulario de edición
-
En propiedades, establece:
- DataSource:
Inventario - DefaultMode:
Edit
- DataSource:
-
El formulario se poblará automáticamente con todos los campos
-
Elimina los campos que no necesites
Paso 6: Conectar las Pantallas
Ahora necesitamos navegar entre pantallas:
-
En tu galería principal, selecciona cada elemento
-
Establece su propiedad OnSelect con:
Navigate(Screen2, ScreenTransition.Fade); Set(varSelectedItem, ThisItem); -
En el formulario, añade un botón "Guardar"
-
En su OnSelect, coloca:
SubmitForm(Form1); Navigate(Screen1, ScreenTransition.Fade); -
Añade otro botón "Cancelar" con:
Navigate(Screen1, ScreenTransition.Fade)
Paso 7: Prueba tu Aplicación
Es momento de ver tu trabajo en acción:
- Presiona F5 o haz clic en el botón Reproducir (esquina superior derecha)
- Prueba hacer clic en productos
- Edita algunos valores
- Verifica que los cambios se guarden en SharePoint
Siguientes Mejoras Recomendadas
Una vez domines lo básico, considera:
- Agregar búsqueda y filtrado con controles de entrada de texto
- Implementar validación de datos
- Añadir notificaciones con controles de notificación emergente
- Diseñar con temas y colores corporativos
- Crear un panel de resumen con gráficos
Pro Tip
Guarda tu aplicación frecuentemente (Ctrl+S) y usa versiones en Power Apps para mantener un historial de cambios. Cuando publiques, siempre puedes volver a versiones anteriores si algo sale mal. Además, prueba siempre en el navegador del dispositivo donde se usará la app: el comportamiento puede variar entre desktop y móvil.
Has creado tu primera Canvas App funcional. Este es solo el comienzo de lo que puedes lograr con Power Apps. ¡Sigue experimentando y construyendo!
