Power App Tasky: Gestión de Proyectos

• Save

1. ¿Cuál es el objetivo principal de la creación de esta aplicación en Power Apps? El objetivo principal es construir una aplicación de gestión de proyectos completamente funcional utilizando Power Apps, SharePoint y Office 365. La aplicación permitirá a los usuarios gestionar proyectos y tareas de manera eficiente, con una interfaz moderna y responsive que se adapte a diferentes dispositivos (ordenadores de escritorio, tabletas y teléfonos móviles).

2. ¿Qué fuentes de datos se utilizan para construir esta aplicación? Se utilizan principalmente dos listas de SharePoint:

• Proyectos: Almacena los detalles generales de cada proyecto, como ID, título, descripción, fecha de inicio, fecha de fin, estado y personas asignadas.
• Tareas: Contiene información detallada sobre cada tarea, incluyendo ID, título, ID del proyecto al que pertenece, descripción, fecha de inicio, fecha de fin, estado (por ejemplo, «Por hacer», «En progreso», «Listo para QA», «Completado»), prioridad (baja, media, alta) y personas asignadas. También se conecta a Office 365 Users para obtener información sobre los usuarios de la organización, como su perfil y correo electrónico, lo cual se utiliza para identificar al usuario actual y mostrar información relacionada.

3. ¿Qué características de diseño y funcionalidad se destacan en la aplicación? La aplicación se caracteriza por un diseño moderno y elegante, con las siguientes características:

• Menú de navegación izquierdo expandible: Permite a los usuarios navegar fácilmente entre las diferentes secciones de la aplicación (por ejemplo, Inicio, Tareas, Proyectos). Utiliza iconos SVG personalizados que cambian de color según la selección.
• Encabezado superior personalizado: Muestra el título de la aplicación, un botón para crear nuevos elementos (tareas o proyectos) y la información del usuario actual (nombre e imagen de perfil).
• Galerías responsivas: Se utilizan galerías para visualizar tanto los estados de las tareas/proyectos como las propias tareas y proyectos. Estas galerías se adaptan a diferentes tamaños de pantalla.
• Formularios dinámicos: Se crean formularios para ver, editar y crear nuevas tareas y proyectos. Estos formularios son responsive y ajustan la disposición de los campos según el ancho de la pantalla.
• Relación entre proyectos y tareas: Las tareas están vinculadas a proyectos específicos a través de un ID de proyecto, lo que permite visualizar las tareas relacionadas dentro de la vista de detalles del proyecto.
• Indicadores visuales: Se utilizan colores para indicar el estado y la prioridad de las tareas y proyectos. En los proyectos, se incluye un control deslizante para visualizar el progreso de las tareas completadas.
• Funcionalidad CRUD: La aplicación permite Crear (Crear nuevos proyectos y tareas), Leer (Visualizar los detalles), Actualizar (Editar la información) y Eliminar (Eliminar proyectos y tareas).
• Popups de confirmación: Se implementa un popup para confirmar la eliminación de tareas y proyectos, proporcionando una capa adicional de seguridad.

4. ¿Cómo se asegura la capacidad de respuesta (responsiveness) de la aplicación en diferentes dispositivos? Para lograr una aplicación responsive:

• Se desactiva la opción «Escalar para ajustar» en la configuración de la aplicación, lo que deshabilita el bloqueo de la relación de aspecto.
• Se utilizan contenedores para estructurar la interfaz de usuario y se configuran sus propiedades (ancho, alto, flexibilidad) para que se adapten dinámicamente al tamaño de la pantalla.
• Las galerías y los formularios también se configuran para ajustar su diseño y la disposición de los elementos internos según el ancho disponible. Por ejemplo, la galería de tareas en la vista de proyectos cambia el número de elementos por fila según el ancho de la pantalla.

5. ¿Cómo se gestiona la creación, visualización y edición de tareas y proyectos?

• Creación: Se utiliza un botón «Crear» en el encabezado superior que abre un popup donde el usuario puede elegir si desea crear una nueva tarea o un nuevo proyecto. Al seleccionar una opción, se navega al formulario correspondiente en modo de «nuevo registro». También se incluye un botón «Añadir tarea» dentro de la vista de detalles del proyecto para crear tareas directamente asociadas a ese proyecto.
• Visualización: Las tareas y proyectos se visualizan en galerías. La galería de tareas se organiza horizontalmente por estado, y dentro de cada estado, las tareas se apilan verticalmente. Los detalles de cada tarea/proyecto se muestran de forma concisa en las tarjetas de la galería.
• Edición: Al seleccionar una tarea o proyecto de la galería, se navega a un formulario dedicado donde se pueden ver y modificar todos los detalles del elemento seleccionado.

6. ¿Cómo se implementa la relación entre proyectos y tareas en la aplicación? La relación se establece a través de la columna «Project ID» en la lista de SharePoint de «Tareas». Esta columna es un campo numérico que almacena el ID del proyecto al que pertenece cada tarea, tomando el ID autogenerado de la lista de SharePoint de «Proyectos». En la aplicación:

• Al crear una nueva tarea desde la vista de un proyecto, el campo «Project ID» se pre-completa automáticamente con el ID del proyecto actual.
• En la vista de detalles de un proyecto, una galería se filtra para mostrar solo las tareas cuyo «Project ID» coincide con el ID del proyecto actual.

7. ¿Cómo se maneja la creación de nuevos elementos desde la aplicación sin interactuar directamente con las listas de SharePoint? Aunque inicialmente las listas de SharePoint se pre-poblaron manualmente, el objetivo es que toda la gestión de datos se realice a través de la Power App. Los formularios de «Nueva tarea» y «Nuevo proyecto» están conectados a las respectivas listas de SharePoint. Al guardar un nuevo formulario, los datos se escriben directamente en la lista de SharePoint. De manera similar, la edición y eliminación de elementos a través de la aplicación se reflejan directamente en las listas de SharePoint subyacentes.

8. ¿Qué conceptos y funciones clave de Power Apps se utilizan en el desarrollo de esta aplicación? Se utilizan varios conceptos y funciones clave de Power Apps, incluyendo:

• Conexiones de datos: Conexión a listas de SharePoint y Office 365 Users.
• Variables: Se utilizan variables (como VAR menu open, VAR task, VAR project, VAR popup add, VAR popup delete) para controlar el estado de la interfaz de usuario, almacenar datos temporales y gestionar la navegación.
• Colecciones (implícitas): La tabla menu items creada en la barra de fórmulas actúa como una colección estática para definir los elementos del menú de navegación.
• Componentes: Se crean componentes reutilizables para el menú de navegación izquierdo (left nav), el encabezado superior (top header) y los popups (popup ad, popup delete), lo que facilita la consistencia y el mantenimiento de la aplicación.
• Contenedores: Se utilizan contenedores para crear diseños flexibles y responsivos.
• Galerías: Para mostrar listas de datos de forma dinámica y personalizable. Se utilizan galerías horizontales y verticales, anidadas y con diferentes configuraciones de diseño.
• Formularios: Formularios de visualización y edición conectados a las fuentes de datos para la manipulación de registros.
• Navegación: La función Navigate() se utiliza para mover entre las diferentes pantallas de la aplicación.
• Funciones de filtrado y búsqueda (Filter(), LookUp()): Para manipular y buscar datos dentro de las fuentes de datos.
• Funciones de texto y color: Para personalizar la apariencia de la aplicación (por ejemplo, Substitute(), códigos hexadecimales de color, RGBA(), ColorFade()).
• Lógica condicional (If(), Switch()): Para implementar comportamientos dinámicos en la interfaz de usuario y la manipulación de datos.
• Iconos SVG personalizados: Se insertan y manipulan iconos SVG para mejorar la estética de la aplicación.
• Funciones de gestión de formularios (NewForm(), SubmitForm(), ResetForm()).
• Notificaciones (Notify()).

convert_to_textConvertir en fuenteNotebookLM puede ofrecer respuestas inexactas. Compruébalas.

Temas Principales

1. Construcción de una Aplicación Funcional de Gestión de Proyectos con Power Apps y SharePoint: El objetivo central del video es demostrar el proceso completo de creación de una aplicación Power Apps para la gestión de proyectos, desde la configuración inicial hasta la funcionalidad completa, utilizando listas de SharePoint como fuente de datos.
2. «welcome to today’s video I want to do a deep dive in some of my approaches on How I build power apps and you’ll see from the very beginning to the very end of how uh you can build a fully functional app using SharePoint and we’re going to do it for a project management app we’re going to call it task key…»
3. Uso de Dos Listas de SharePoint Relacionadas: La aplicación se basa en dos listas de SharePoint: una para almacenar los detalles de los proyectos y otra para los detalles de las tareas. Estas listas están relacionadas a través de una columna «Project ID» en la lista de tareas.
4. «we’re going to be using two SharePoint lists one of them will be storing the project details and the other one will be storing the task details and they’re all going to be related to each of the projects…»
5. Diseño Moderno y Responsivo: Se enfatiza la creación de una interfaz de usuario con un diseño moderno, incluyendo menús de navegación expandibles, iconos SVG personalizados, encabezados atractivos y galerías dinámicas. La aplicación también se diseña para ser completamente responsive, adaptándose a diferentes tamaños de pantalla (escritorio, tablet, móvil) y orientaciones.
6. «we’re going to do it in a way where it’s very stylish and modern so you’ll see some navigation menus that are expandable we’re going to use custom SVG icons we’re going to create headers we’re going to create cool Galleries and it’s going to be all fully responsive all the way from like a desktop monitor to an app either on the tablet or a phone whatever it is landscape portrait mode doesn’t matter it’s going to all look great and it’s going to look very modern…»
7. Desarrollo Paso a Paso con Demostración Práctica: El video pretende mostrar el proceso de construcción de la aplicación desde el inicio hasta el final, incluyendo la configuración de las listas de SharePoint, la creación de la aplicación en Power Apps y la implementación de diversas funcionalidades. Se menciona que el video no estará perfectamente editado, reflejando un proceso de desarrollo más realista.
8. «you’re going to see from the very beginning to the very end… I will say it’s not going to be perfectly edited I’ll have to go back and forth a few times to change some things but for the most part hopefully it’s easy enough to follow…»
9. Uso de Componentes Reutilizables: Se recurre a la creación de componentes reutilizables, como el menú de navegación izquierdo y el encabezado superior, para facilitar el desarrollo y mantener la consistencia en toda la aplicación.

Ideas y Hechos Importantes

• Estructura de las Listas de SharePoint:
• Lista «Tasks»: Contiene columnas como «ID» (predeterminado), «Title» (texto), «Project ID» (número), «Description» (texto multilínea), «Start Date» (fecha y hora), «Due Date» (fecha y hora), «Status» (opción: To-do, In Progress, Ready for QA, Completed), «Priority» (opción: Low, Medium, High), y «Assigned To» (persona o grupo con selección múltiple). Se pre-poblaron datos manualmente, algunos generados con ChatGPT.
• Lista «Projects»: Contiene columnas como «ID» (generado automáticamente), «Title» (texto), «Description» (texto multilínea), «Start Date» (fecha y hora), «Due Date» (fecha y hora), «Status» (opción: In Progress, Completed), y «Assigned To» (persona con selección múltiple). La columna «ID» se utiliza para relacionar los proyectos con las tareas.
• «so in my SharePoint site I’ve created a tasks and a projects SharePoint list and we’ll go over the tasks first… the projects list again I’ve created a separate list and these are this is where the project ID is coming in…»
• Configuración Inicial de Power Apps:
• Se crea una nueva aplicación de lienzo para tablet.
• Se desactiva la opción «Scale to fit» en la configuración de la pantalla para habilitar la capacidad de respuesta total.
• Se definen variables globales para el tema de la aplicación (myTheme) que almacenan códigos de color (primario, gris, verde, púrpura, azul, naranja) tanto en formato de valor de color como en formato de texto hexadecimal.
• Se conectan las fuentes de datos de SharePoint (las dos listas) y Office 365 Users.
• Se define una variable global (currentUser) para obtener los detalles del usuario actual utilizando Office365Users.UserProfileV2(User().Email).
• Se define una variable global (myIcons) para almacenar código SVG de iconos personalizados (home, home fill, folder, folder fill, list, list fill, hamburger).
• Se define una tabla (menuItems) para almacenar los detalles del menú de navegación (ID, nombre, icono, icono relleno, pantalla de destino).
• «so right now we just have one screen we do want the app to be responsive so what we have to do is go to the settings and go to the display and we’re going to turn off scale to fit… I’m going to say my theme and we’re going to set that equal to and we’re going to set up a few records here… we also want to connect to our data sources… I also want to set up some records for my icons… the last thing we want to set up on our formulas bar is a table to store the details of our navigation menu…»
• Creación del Menú de Navegación Izquierdo (Componente):
• Se crea un componente llamado «left nav» con alcance de aplicación.
• Se utiliza un contenedor vertical como base, con altura ajustada a la altura de la aplicación (App.Height).
• Se implementa un encabezado con el título de la aplicación y un icono de hamburguesa dentro de un contenedor horizontal.
• Se agrega un botón invisible sobre el icono de hamburguesa para alternar la visibilidad expandida/colapsada del menú mediante una variable (VAR menu open).
• Se utiliza una galería vertical conectada a la tabla menuItems para mostrar los elementos del menú.
• Dentro de la galería, se utilizan contenedores horizontales para albergar iconos (con cambio de color según la pantalla activa) y etiquetas de texto (visibles solo cuando el menú está expandido).
• Se añade un botón invisible sobre cada elemento del menú para la navegación a la pantalla correspondiente (Navigate(ThisItem.Screen, ScreenTransition.Fade)).
• «the next thing we can do is create our navigation menu and I’m thinking we’ll do a left navigation menu That’s expandable… we can create it within the components section and we’re going to do create new component and let’s call this the left nav… we’re going to utilize some containers… we’re going to select container one this is our root container and I’m going to insert a gallery and it’s going to be a blank vertical gallery and the data the items property is going to be menu items…»
• Creación del Encabezado Superior (Componente):
• Se crea un componente llamado «top header» con alcance de aplicación.
• Contiene un botón para «Crear (+)», espaciado a la izquierda, y la información del usuario actual (nombre e imagen) alineada a la derecha dentro de un contenedor horizontal con espaciado entre elementos.
• Se utiliza la función CurrentUser para mostrar el nombre del usuario.
• La imagen del usuario se obtiene de User().Image y se muestra dentro de un contenedor con borde redondeado para formar un círculo.
• «we can go create a new component and we can rename it top header and make sure to turn on access app app scope… we’re going to do insert a new container and it’s going to be a horizontal container… I’m going to insert a button and the text I’m just going to do plus create… next thing we can do is insert within this container we can insert another container and it’s going to be a horizontal one and this is going to store the image and name of the current user of our app…»
• Implementación de las Pantallas de la Aplicación:
• Se crean tres pantallas iniciales: «Home», «My Tasks» y «My Projects».
• Se insertan los componentes del menú de navegación izquierdo y el encabezado superior en cada pantalla.
• Se utiliza un contenedor vertical para organizar el contenido principal debajo del encabezado superior.
• Se actualiza la tabla menuItems para referenciar correctamente las pantallas creadas.
• «so screen one let’s just call it home and we can insert some containers I’m going to do a horizontal container first… here we can go ahead and insert our new custom container so we’re going to expand custom and our left nav and there we go… the next thing I want to do is build up a top header here… let’s go ahead and insert this into our app… we want to do next to this uh left navigation is do a vertical container because we want things to now stack going downwards… we can rename this task and actually we can’t rename it to that because our data source is already called tasks uh we also can’t use project so what we actually can do is just call it my tasks and this this screen we can see my projects… now we can go to our app here and in our formulas bar we can actually go ahead and reference those screens in the the appropriate way…»
• Visualización de Tareas en la Pantalla «My Tasks»:
• Se utiliza una galería horizontal para mostrar las diferentes categorías de estado de las tareas (To-do, In Progress, etc.), basadas en los valores únicos de la columna «Status» de la lista «Tasks».
• Dentro de cada plantilla de esta galería horizontal, se utiliza una galería vertical para mostrar las tareas correspondientes a ese estado, filtrando la lista «Tasks» por el valor del estado de la galería principal (Filter(Tasks, Status.Value = ThisItem.Value)).
• En la galería vertical de tareas, se muestran detalles como la prioridad (con un botón coloreado dinámicamente), el título, la descripción y las fechas de inicio y fin.
• Se superpone un botón invisible sobre cada tarea para permitir la selección y navegación al formulario de edición de tareas.
• «what I want to start out to do first is build out the tasks screen uh and this is where we’re going to have a gallery with al l of our items for our tasks along with uh a breakdown of what category that they’re in or what their status is… first I want to add a bit of a header here just below this create button… beneath that we’re going to insert our gallery and it’s going to be a uh blank horizontal Gallery… for this Gallery is actually going to be a filter on our tasks list and we’re going to do status. value equals to this item. value… now let’s go back to our container uh that’s looking pretty good and we can start to insert some of our uh pieces here… next up we’re going to do let’s insert a new text label we’re going to set it to this item.title… then next up we’re going to do another text label and this time it’s going to be this item description… one more thing we’re going to add is another text label and we’re going to use this to show the start and end dates… what we can do now is layer uh button an invisible button over top of it…»
• Visualización de Proyectos en la Pantalla «My Projects»:
• Se replica la estructura de la pantalla «My Tasks», pero utilizando la lista «Projects» y su columna «Status».
• Se muestran detalles del proyecto como el título, la descripción y las fechas.
• Se añade un control deslizante para visualizar el número de tareas completadas en relación con el total de tareas de cada proyecto.
• Se muestra una etiqueta de texto con el recuento de tareas completadas por proyecto.
• «now that we have the task Gallery we can do something very similar with the projects I’m going to copy both of these and we’re we’re going to go to our other screen which is going to be my projects… instead of tasks it’s going to say projects this right here instead of the our our the main Gallery instead of task statuses we’re going to do projects. status and this Gallery we’re going to actually filter projects where status equals this item. value… we can keep the title so the title is going to be this item. tile um the label this is going to be the description so that’s fine… I’m going to actually show how many tasks are associated within each project in a sort of like a slider so you can see the progress at a at a quick glance… another thing I’m going to do is just set set set a little text label to show how many tasks are completed…»
• Creación y Edición de Tareas y Proyectos (Formularios):
• Se crea una pantalla «Task Form» con un control de formulario de edición conectado a la lista «Tasks».
• Se configuran los campos del formulario, incluyendo su orden y el tipo de control (por ejemplo, texto multilínea para la descripción).
• Se implementa lógica para hacer el formulario responsive, ajustando el ancho de las tarjetas de datos según el ancho de la pantalla.
• Se añaden botones de «Guardar» y «Cancelar» con la funcionalidad correspondiente (enviar formulario, resetear formulario, navegar entre pantallas, mostrar notificaciones).
• Se permite la edición de la columna «Project ID» a través de un control ComboBox que muestra los títulos de los proyectos de la lista «Projects», actualizando el ID numérico en segundo plano.
• Se duplica la pantalla «Task Form» para crear «Project Form», adaptando el formulario a la lista «Projects» y sus campos.
• En el «Project Form», se inserta una galería para mostrar las tareas relacionadas con el proyecto actual, filtrando por el «Project ID».
• «next we need to actually make all of this functional right so this is all good it looks good but uh we need to also make it functional so I’m going to create a new screen and it’s going to be a blank screen and let’s call this task form so this is what we’re going to use to view and edit our tasks… within here we can go ahead and insert an edit form it’s going to be form one uh and I’m going to set its data source to tasks… we’re going to select our our form and go to Advanced and under the item property we’re going to store our variable so VAR task… we want to add a um a section for the button so save and cancel buttons… on cancel here I want to update it on Select Property we’re going to go um we’re going to reset form form one and we’re going to just go back… on the save button on select we’re going to submit form form one and on the forms on success property we’re going to set VAR task to blank and navigate or and then also go back an d we’re going to notify task saved… for the project ID I want to actually display a combo box here… now that we have the task form um what we can do is duplicate this we’re and we’re going to basically do some similar things but it’s going to be for project so project form… in the «Project Form», se inserta una galería para mostrar las tareas relacionadas con el proyecto actual, filtrando por el «Project ID».«
• Creación de Nuevos Elementos (Popup):
• Se crea un componente «popup ad» para ofrecer la opción de crear una nueva tarea o un nuevo proyecto al hacer clic en el botón «Crear (+)» del encabezado superior.
• El popup es un contenedor centrado con botones para «New Task» y «New Project», y un icono para cerrar el popup.
• La visibilidad del popup se controla mediante una variable (VAR popup ad).
• Los botones de «New Task» y «New Project» navegan a los formularios correspondientes en modo de nuevo formulario (NewForm(formName)).
• «next we need to actually make a functional create button so we want to be able to create projects we want to create tasks… we can do this by creating another component and we can sort of hide these and go to a new component maybe let’s call it add popup up or popup ad because we want to add a new… the visibility of the popup se controla mediante una variable (VAR popup ad)… for the onselect property of the new task we’re going to just navigate to our task form screen and it’s going to be screen transition fade and we’re going to copy that and just go to the other button the new project and it’s on Select Property we’re going to paste that in but instead of task form i t’s going to be the project form and also for both buttons uh we need to make sure we set the form so for the new task we’re going to do new form and it’s called form one and for the new project our form is called well new form form 1core 1…»
• Eliminación de Elementos (Popup de Confirmación):
• Se crea un componente «popup delete» como confirmación antes de eliminar una tarea o un proyecto.
• Contiene un mensaje de confirmación y botones para «Cancelar» y «Eliminar».
• La funcionalidad del botón «Eliminar» incluye la lógica para eliminar la tarea o el proyecto correspondiente según la variable global activa (VAR task o VAR project), resetear estas variables y navegar a la pantalla anterior.
• La visibilidad del popup se controla mediante una variable (VAR popup delete).
• Se añade un icono de papelera en las pantallas de edición de tareas y proyectos para activar el popup de eliminación.
• «but I also want to add a confirmation like basically a yes or no or like are you sure you want to delete so we can actually go create a new popup and so the way we’re going to do this we’re going to add a we’re going to duplicate this component I’m going to rename it popup delete… the delete we’re going to change all of these properties… the visibility of the popup se controla mediante una variable (VAR popup delete)… Se añade un icono de papelera en las pantallas de edición de tareas y proyectos para activar el popup de eliminación.»

Conclusiones

El video demuestra de manera práctica y detallada el proceso de construcción de una aplicación Power Apps para la gestión de proyectos utilizando listas de SharePoint. Se cubren aspectos clave como la planificación de la estructura de datos, el diseño de la interfaz de usuario con componentes reutilizables y capacidad de respuesta, la implementación de la lógica para la visualización, creación, edición y eliminación de tareas y proyectos, y la mejora de la experiencia del usuario con popups de confirmación. A pesar de no ser una edición perfecta, el video ofrece una guía valiosa para aquellos que buscan construir una solución de gestión de proyectos personalizada con Power Apps.convert_to_textConvertir en fuenteNotebookLM puede ofrecer respuestas inexactas. Compruébalas.