PCF – Tabla HTML

Guía de creación del Proyecto

En este caso, lo que hemos creado es directamente una tabla HTML para renderizar los datos. 

Mención especial a mi amigo Pablo García García por todo el trabajazo desarrollado; por él, os dejo el comando para instalar la dependencia de XRM y usar toda su funcionalidad: npm install –save @types/xrm

1. A diferencia de otros PCF, este se inicializa como una plantilla DATASET, y en el archivo de manifiesto de control, usamos la etiqueta dataset.
2. Este elemento está contenido dentro del contexto, específicamente en context.parameters.record.
3. Ahora abordaremos un aspecto muy importante: cómo depurar un componente, ya sea publicado o de manera local.
   • Usa Ctrl + P para buscar el archivo por el nombre del PCF.
   • Muestra el contexto en la consola y navega por él, donde encontrarás el listado de registros y sus identificadores en la tabla de Dataverse.
4. Con estos registros, podemos pintar todos los elementos de la tabla HTML para mostrarlos.
5. Como siempre, contamos con funciones heredadas de la clase StandardControl. En este caso, las funciones createTable y createBody recibirán los registros de la tabla, y es necesario procesarlos.
6. Lo primero es obtener todos los registros únicos de fecha, ordenarlos y, para cada fecha, crear las celdas de datos de la tabla. Para encontrar el registro correspondiente a cada celda, utiliza la función find, donde filtraremos por las columnas “cdcc_bloque”, fecha y tipo de dato.
7. Al formar parte del mismo contexto de ejecución, podemos filtrar el dataset desde el botón nativo de MS en una aplicación model-driven a través de «EDITAR FILTROS». En este caso, filtramos por fecha.
8. Esto nos permitió implementar la siguiente funcionalidad: creamos una landing page para la aplicación, en la que cada usuario puede elegir los filtros que se aplicarán a los PCF. Aunque en este caso solo hay uno, para el cliente existen tres, y todos se filtran desde la misma pantalla inicial.
9. Para facilitar la visualización, hemos añadido dos funcionalidades que no están disponibles nativamente en una vista de model-driven:
   • Modificar el color de la celda según si el valor es negativo o positivo para múltiples columnas.
   • Fijar las cabeceras y la columna de fecha mediante CSS, lo que facilita la navegación por las diferentes columnas y filas.
10. Aunque muchas de las funcionalidades principales las proporciona la API de XRM de Microsoft, desde la cual se pueden hacer diversas acciones como actualizar o crear registros, se habilita un botón para editar el registro al pulsar sobre una celda de «INGRESOS» o «GASTOS». Al modificar la cantidad, todos los registros pertinentes se recalculan automáticamente, incluidos los totales y el beneficio final para ese día. Si se actualiza correctamente, se muestra una notificación en la parte superior de la aplicación.
11. Un requisito adicional del cliente fue que no se permitiera editar ningún registro pasado. En este caso, se arroja una notificación de error si la fecha es anterior al día actual.
12. Otra funcionalidad importante para el cliente fue mostrar informes de Power BI directamente desde esta pantalla. Usamos varias páginas personalizadas para mostrar estos informes. Dentro de estas páginas, se pueden enviar parámetros desde el PCF para filtrar, por ejemplo, por un día o bloque específico. Al pulsar sobre la columna de beneficios, se abre un informe de BI que aprovecha toda la potencia de BI para la visualización y análisis de datos.
13. Finalmente, para integrar todos los PCF creados anteriormente, hemos añadido una funcionalidad que permite editar directamente sobre la celda o navegar hasta el formulario de ese registro al pulsar sobre cualquier celda del margen. En el formulario, podrás ver los tres PCF anteriores que hemos creado, mostrando lo fácil que puede ser integrar estos componentes personalizados para potenciar nuestras aplicaciones.