PCF en acción: tu primer vistazo a Power Component Framework

Introducción

¿Cansado de los controles básicos en Power Apps? ¿Quieres llevar tus aplicaciones al siguiente nivel con componentes visuales más potentes, interactivos y personalizados? ¡Entonces los PCF son tu nuevo superpoder!
El PowerApps Component Framework te permite crear controles a medida usando tecnologías web modernas como TypeScript, HTML y CSS, integrándolos directamente en tus apps. Es como pasar de jugar con bloques de Lego a diseñar tus propias piezas únicas. En esta guía aprenderemos paso por paso a compilar y desplegar nuestro propio PCF en nuestro entorno y ver las diferencias entre utilizar los míticos WebResource o los PCFs ¡Vamos allá!

Resumen introductorio

• ¿Qué es? Un framework para crear componentes personalizados en Power Apps.

• ¿Qué necesitas? Node.js, Power Platform CLI, Visual Studio Code y conocimientos básicos de desarrollo web.

• ¿Qué puedes hacer? Controles visuales avanzados, reutilizables y totalmente integrados.

• ¿Por qué usarlo? Porque tus apps merecen más que lo básico

Herramientas

1. Node.js

Descarga la versión LTS (recomendada)

2. Visual Studio Code

Editor de código ligero y potente

3. Power Platform CLI (pac)

Documentación oficial para instalación y uso.

WebResource o PCF ¿Por cuál me decanto?

A continuación, se mostrarán las principales diferencias de cada tipo de modelo y cuando sería recomendable su uso:

• WebResources son archivos estáticos (HTML, JS, CSS) que se incrustan en formularios como si fueran mini páginas web. Son fáciles de crear y útiles para mostrar contenido simple o ejecutar lógica básica con JavaScript. Sin embargo, su rendimiento es limitado y no se integran de forma nativa con la interfaz de Dynamics.
• PCFs (PowerApps Component Framework) son controles personalizados modernos que se integran directamente en la interfaz de usuario. Ofrecen mejor rendimiento, una experiencia más fluida y permiten crear componentes interactivos y reutilizables. Requieren más conocimientos técnicos (TypeScript, herramientas CLI), pero son mucho más potentes.

Conceptos Principales

En el desarrollo con PowerApps Component Framework (PCF), existen principalmente dos tipos de componentes que puedes crear, dependiendo del tipo de aplicación y del comportamiento que deseas implementar. Aquí te explico cada uno de forma clara y con ejemplos para que puedas diferenciarlos fácilmente:

Tipos de Componentes PCF

1. Field Components (Componentes de Campo)

• Descripción:
  Estos componentes reemplazan un control de entrada estándar (como un cuadro de texto, fecha, número, etc.) en un formulario de una entidad (por ejemplo, en una app model-driven).
• Uso típico:

-Mostrar un campo de forma personalizada (por ejemplo, un control de estrellas para calificar).

-Validar o transformar datos antes de enviarlos al modelo.

• Ejemplo:
  Un control de «slider» para seleccionar un valor numérico en lugar de un cuadro de texto.
• Se define con:

–template field

2. Dataset Components (Componentes de Conjunto de Datos)

• Descripción:
  Estos componentes se utilizan para mostrar y manipular conjuntos de datos (como listas o tablas), reemplazando vistas estándar en formularios o subcuadrículas.
• Uso típico:

-Mostrar una lista de registros con un diseño personalizado (tarjetas, gráficos, tablas interactivas).

-Agregar funcionalidades como filtros, ordenamiento o acciones personalizadas.

• Ejemplo:
  Una tabla con paginación y búsqueda personalizada para mostrar contactos relacionados.
• Se define con:
  –template dataset

Creación del PCF y estructura base

Lo primero a tener en cuenta será crear un directorio donde se desarrollará el proyecto. En este caso se creará el siguiente directorio: HelloPCF

Lo siguiente será abrir el Visual Studio Code y abrir una ventana de Power Shell desde el Visual Studio:

A continuación escribiremos el siguiente comando para crear un nuevo proyecte de componente:

pac pcf init –namespace HelloPCF –name HelloPCFComponent –template field –run-npm-install

Este comando ya ejecutará por nosotros el npn install el cual instala las librerías necesarias para desarrollar y ejecutar el proyecto:

Cuando se termine se podrá ver como se ha generado la estructura de archivos correctamente:

Vamos a confirmar que nuestro PCF esta listo para estar operativo y probarlo, para ello estando en el directorio actual del componente “HelloPCFComponente” procedemos a lanzar el siguiente comando: npm start watch

Automáticamente este comando abrir una venta de nuestro navegador por defecto lanzando la dirección en la que se está ejecutando el proyecto (por defecto suele ser localhost + el puerto 8181). Si la pantalla que aparece es la siguiente, eso quiere decir que el PCF se ha compilado y ejecutado correctamente:

Actualmente no se verá nada porque no se ha hecho ningún desarrollo como tal del componente, esto es solo la representación de como probar y testear nuestro PCF.

Mas adelante en otras guías, explicaremos como desarrollar y probar más detenidamente un componente, los tipos posibles y la cantidad de ventajas que nos ofrece.

Establecer referencia al componente

El siguiente paso será crear un directorio en la ruta que esta al mismo nivel que el directorio que generó el comando “HelloPCFComponent”, este directorio nuevo lo llamaremos “HelloPCFSolutions” en el cual almacenaremos la solución final de nuestro proyecto, la que nos permitirá importar más a delante en nuestro entorno:

Una vez creado, nos situamos en el directorio nuevo:

A continuación, mediante este comando creamos todas las configuraciones necesarias para configurar nuestra solución:

pac solution init –publisher-name AitorHerraez –publisher-prefix axz

Después de que se haya creado y establecido todo el contenido de la carpeta de Solutions, procedemos a abrir el archivo “HelloPCFSolutions.cdsproj” el cual requiere de unas pequeñas configuraciones.

Sera necesario descomentar la siguiente línea de código:

Y modificarla por la siguiente:

Esta configuración:

• Genera dos versiones de la solución (administrada y no administrada). La cual no nos dará problema a la hora de exportar en un tipo o en otro.

• No incluye traducciones ni archivos de localización.

A continuación, se lanzará el siguiente comando, para crear una referencia de la solución al proyecto:

pac solution add-reference –path ..

Exportación de solución final

Ya está toda la configuración de la solución realizada solo queda generar la solución. A continuación, lanzaremos el comando que usa MSBuild para crear el proyecto de solución extrayendo dependencias NuGet como parte de la restauración:

msbuild /t:restore

Y después para generar la solución en el directorio out del proyecto:

msbuild

Resumen final

En esta guía aprendiste cómo crear tus propios controles personalizados en Power Apps usando PCF, una herramienta que te permite dar un gran salto en el diseño y funcionalidad de tus apps. Paso a paso, configuraste el entorno, creaste tu primer componente y lo exportaste para usarlo en tus entornos de trabajo. Esta aplicación solo el comienzo, pero ahora ya sabes cómo empezar a darle un toque único y profesional a tus apps.