¡Bienvenidos, muy buenos días tardes o noches , según donde me leas !
Replicaremos el diseño de Power Apps de Last Minute Coders, canalazo que descubrí hace poco en YouTube y tiene proyectos geniales.
Ticket Management Project
Se creará evidentemente con Power Apps. Este desarrollo empieza desde cero con una aplicación de lienzo en blanco. Imagen 1
Ahora empezamos a diseñar de manera personalizada, cada proceso único por fases de manejo. Creamos contenedores, los cuales modificamos y añadimos dos contenedores para que sean manejados de manera eficiente. Imagen 2
. A estos contenedores les asignaremos nombres.
Posterior a ello, ingresamos in text label o etiqueta de texto para así poder manejar nuestras herramientas más eficientemente. Personalizamos el color y el fondo. Imagen 3.
Ahora personalizamos añadiendo una imagen, un logo y el símbolo de más para añadir un ícono. Ahora añadiremos también otro contenedor pero dentro del que ya habíamos creado.
Añadimos tres contenedores para subdividir, cada proceso en cada caso, es decir, subdividimos cada proceso en cuestión para que funcione eficientemente y así poder tener cada uno de los casos para tener la galería, las tijeras y el filtrado. Imagen 4.
Usamos los cards superiores para desarrollar específicamente y ver las solicitudes pendientes, nuevas solicitudes, en progreso, cerradas y el total. Serán 4 botones que añadiremos en el contenedor tarjetas. Imagen 5
. Les colocamos nombres como si fueran tarjetas a los 5 estados de nuestras solicitudes, y les desactivamos que sea con acción. Imagen 6.
Ahora insertamos una galería, pero no cualquier galería, una galería la cual, insertamos una galería llamada galería de altura flexible en blanco. La cual vincularemos como datos, nuestra colección. Y sumado a ello, como este ejemplo es con solicitudes, bueno usaremos el campo tipo solicitud. Imagen 7
. El código empleado en la app en la propiedad on start es el siguiente:
Collect(Solicitudes;{ID:1;Tipo_Solicitud:»Nuevas Solicitudes»;Estado:»En Espera»});
ClearCollect(Solicitudes;
{ ID:1; Tipo_Solicitud:»Todas las Solicitudes»; Estado:»Todo»};
{ ID:1; Tipo_Solicitud:»Nuevas Solicitudes»; Estado:»Nuevo»};
{ ID:1; Tipo_Solicitud:»En progreso»; Estado:»En progreso»};
{ ID:1; Tipo_Solicitud:»Solicitudes en espera»; Estado: «En espera»};
{ ID:1; Tipo_Solicitud:»Solicitudes cerradas»; Estado: «Cerradas»};
{ ID:1; Tipo_Solicitud:»Solicitudes con más de 2 días»; Estado: «Other» };
{ ID:1; Tipo_Solicitud:»Solicitud abierta hoy»; Estado: «Abierta hoy» };
{ ID:1; Tipo_Solicitud:»Solicitud cerrada hoy»; Estado: «Cerrada hoy» }
)
A los botones se les tiene que configurar también una particularidad, dado que para que funcionen eficientemente, debemos modificar ciertos procesos, en la propiedad hover fill ColorFade(Self.Fill; -10%), para que la transparencia sea más amigable y le agregamos unos íconos para que quede mucho mejor visualmente. Imagen 8.
Ahora procedemos a editar la galería central. Recuerda que segmentamos en 4 fases este proceso, es decir, cuatro ediciones diferentes: el header o cabecera, el panel de la izquierda filtrado y el área central.
Editamos específicamente la galería central para así poderla manejar y controlar. Con estos pasos tendríamos específicamente que crear otra colección la cual, para mi ejemplo, la personalicé.
Collect(Solicitudes_especificas;
{ID:1; Departamento:»IT»; Asignado: User().FullName; Comentarios:»Solicitud para agregar 4 medidas más en el power bi del KPI de compras»; Asunto:»Agregar medidas»; Description: «Solicitud para agregar 4 medidas más en el power bi del KPI de compras, fijar reunión para la toma de requisitos»; Estado: «In Progress»; Prioridad: «High»; Fecha_Creacion: DateValue(«14/04/2024»); Date_Closed: DateValue(Blank()); Dueño: «Mark»}
)
Imagen 9.
Ahora procedemos a añadir la galería a la cual añadiremos este proceso. Usaremos la misma galería que la anterior galería de altura flexible en blanco. Luego de ello, añadimos etiquetas de texto y asociamos la galería a la colección recién creada. Imagen 10. 
Ahora empezamos a asignar los datos de la colección a nuestra aplicación, es decir, a las etiquetas de texto. Los ajustamos según lo deseado en la visualización de la galería y en las posiciones que deseemos. Imagen 11.
Ahora añadiremos una propiedad interesante HTML, la cual es bien cool. Imagen 12.
Utilizaremos el siguiente código «Asignado a: <b>» & ThisItem.Asignado.
Ahora añadimos más a la colección que tenemos en nuestras manos para desarrollar, añadimos más ítems en a la colección para ser insertados. Imagen 13.
Ahora para la barra izquierda y hacer un poco más de personalización, realizaremos ciertas modificaciones que necesitamos hacer, un switch dependiendo de la columna de nuestra colección estatus insertaremos un color.
Colores utilizados:
– Nuevas solicitudes: RGBA(0, 18, 107, 100)
– Cerradas: RGBA(204, 159, 24, 100)
– En progreso: RGBA(54, 176, 75, 100)
– En espera: RGBA(255, 0, 0, 100)
Ahora creamos el código para rellenar nuestras barritas verticales.
«`
Switch(ThisItem.Estado;
«Nueva»; RGBA(0, 18, 107, 100);
«Cerrado»; RGBA(204, 159, 24, 100);
«En progreso»; RGBA(204, 159, 24, 100);
«En espera»; RGBA(255, 0, 0, 100))
«`
Imagen 14.
Ahora pasamos a crear nuestra página de registros para ingresar una nueva solicitud.
Programamos donde Navigate(Screen2; ScreenTransition.Fade) Imagen 15.
Ahora editamos la nueva pantalla de editar registros, primero nos traemos la cabecera, le cambiamos el nombre y le colocamos un ícono de ir atrás activándolo con el navigate.
Qué proceso es insertar etiquetas de texto inputs y dos listas desplegables, personalizar el diseño como más te guste, y para las listas desplegables como lo sabes, crear listas [«Alta», «Media», «Baja»], esta sería la de prioridad, para el segundo desplegable, para el ejemplo es los departamentos [«IT», «RRHH»]. Imagen 17.
Ahora activaremos específicamente el proceso en el cual manejamos, ahora insertaremos información en nuestra colección creada anteriormente, desde nuestra nueva venta de creación de solicitudes, este es el código.
Collect(Solicitudes_especificas;
{
ID: Last(Solicitudes_especificas).ID+1;
Dueño: TextInput1.Text;
Asunto: TextInput1_1.Text;
Prioridad: Dropdown1.Selected.Value;
Comentarios: TextInput1_2.Text;
Departamento: Dropdown1_1.Selected.Value;
Estado: «Nuevo»;
Fecha_Creacion: Now()});
Notify(«Solicitud creada!!!»; NotificationType.Success); Navigate(Screen1; ScreenTransition.Fade).
Imágenes 18 y 19.
Ahora procedemos a seguir editando específicamente la galería principal, primero será crear unos íconos de tipo flecha para que cuando seleccionemos un caso específico.
Ahora bien, creamos una variable por ítem, para pasar nuestras variables a la nueva hoja de editar, dando clic desde nuestra galería.
Las variables creadas son estas:
Set(Varid; ThisItem.ID);
Set(VarDueño; ThisItem.Dueño);
Set(Varid; ThisItem.ID);
Set(VarDueño; ThisItem.Dueño);
Set(VarFechaCreacion; ThisItem.Fecha_Creacion);
Set(VarFechaCierra; ThisItem.Fecha_Cierre);
Set(VarComentarios; ThisItem.Comentarios);
Set(VarAsunto; ThisItem.Asunto);
Set(VarAsignado; ThisItem.Asignado);
Navigate(Screen1_1; ScreenTransition.Cover).
Para luego pasarlas a las vistas detalles. Imagen 20 y 21.
Seguimos editando nuestra nueva página en la cual manejaremos específicamente los cambios visuales, seguimos insertando, pero más campos, dado que en estos podremos editar varias de estos campos, asignar tareas o modificar el departamento creado, para este caso realizaremos diferentes pasos. Imagen 22.
Ahora agregaremos listas desplegables para poder editar la solicitud recuerda que esto cambia según el caso de negocio.
Primero creamos 4 desplegables en el default les colocamos un if, para saber si la variable viene con datos si es así se queda, si no que no coloque la palabra nada, pero en la propiedad item del mismo desplegable, dejamos una lista para poder editar estos 4 casos.
Imágenes 23 y 24
.
Ahora procedemos a crear nuestro botón de editar el cual nos actualizará los cambios Patch.
El código utilizado para este caso es el siguiente:
If(Dropdown1_3.Selected.Value = «Cerrado»;
Patch(Solicitudes_especificas; LookUp(Solicitudes_especificas; ID=Varid);
{
Prioridad: Dropdown1_2.Selected.Value;
Departamento: Dropdown1_4.Selected.Value;
Estado: Dropdown1_3.Selected.Value;
Asignado: Dropdown1_5.Selected.Value;
Fecha_Cierre: Now()
});
Patch(Solicitudes_especificas; LookUp(Solicitudes_especificas; ID=Varid);
{
Dueño: Label6_7.Text;
Asunto: TextInput2.Text;
Prior
idad: Dropdown1_2.Selected.Value;
Comentarios: TextInput2_1.Text;
Departamento: Dropdown1_4.Selected.Value;
Estado: Dropdown1_3.Selected.Value;
Asignado: Dropdown1_5.Selected.Value
}));
Notify(«Solicitud creada!!!»; NotificationType.Success); Navigate(Screen1; ScreenTransition.Fade).
Imagen 25.
Por último, personalizamos las tarjetas, para que muestren la cantidad que estamos manejando en este momento.
CountRows(Filter(Solicitudes_especificas; Estado=»Nuevo»)) & Char(10) &
«Nuevas Solicitudes».
Imagen 26.
Así con cada una de las tarjetas.
Este ejercicio me gustó muchísimo porque coloca a prueba las colecciones, variables, el Patch para realizar la actualización.
Por último, editaremos específicamente, le asignamos una variable a nuestro panel de filtrado de la izquierda, para que filtre el panel central y luego asignamos una variable a nuestra galería central que se filtre en base a la selección.
«`
Set(VarEstados; ThisItem.Estado).
«`
Filter(Solicitudes_especificas; Estado=VarEstados).
Imágenes 27 y 28.
Hasta acá fueron solo procesos en los cuales manejábamos todo en colecciones ahora crearemos unas lista en SharePoint para almacenar dicha información
Para ver la app en vivo, Link de mi canal en YouTube:
https://youtu.be/FZ1_mHi2Dx0
Vicente Antonio Juan Magallanes.
