💡 Introducción

En el ecosistema de Microsoft Power Platform, a veces las bibliotecas de controles nativos no son suficientes para cubrir requisitos de diseño o funcionalidad muy específicos. Aquí es donde entra Power Apps Component Framework (PCF). Este framework permite a los desarrolladores profesionales crear componentes visuales utilizando tecnologías web modernas como TypeScript y Node.js, ofreciendo una experiencia de usuario superior y totalmente integrada tanto en Canvas Apps como en Model-Driven Apps.

💻 Requisitos y Configuración del Entorno

Antes de escribir la primera línea de código, es fundamental asegurar que nuestra estación de trabajo cuente con las herramientas necesarias para la compilación y empaquetado del componente.

🛠️ Inicialización del Proyecto

Una vez instaladas las herramientas, debemos preparar nuestra estructura de carpetas. Abre una terminal y ejecuta los siguientes comandos:

1. Crear la estructura básica:

pac pcf init --namespace <TuPrefijo> --name <NombreComponente> --template field

1. Instalar dependencias de Node:

npm install

1. Validar la estructura inicial:

npm run build

🧠 Implementación de Lógica y TypeScript

Para que el componente funcione correctamente y sea reconocido por el framework, debemos configurar el archivo tsconfig.json. Esto evita errores de tipos y asegura que las definiciones de powerapps-component-framework sean detectadas.

{
   "extends":"./node_modules/pcf-scripts/tsconfig_base.json",
   "compilerOptions":{
       "typeRoots":["node_modules/@types"],
       "types": ["powerapps-component-framework"],
       "ignoreDeprecations": "5.0"
   }
}

El método Init (index.ts)

El corazón de nuestro componente reside en el archivo index.ts. En el método init, definimos los elementos del DOM que el usuario verá. Un ejemplo clásico es la creación de un botón interactivo:

// Creación del elemento botón
const btn = document.createElement("button");
btn.textContent = "Saludar";
// Añadir evento con navegación de la plataforma
btn.addEventListener("click", async () => {
    await context.navigation.openAlertDialog({ text: "¡Hola desde un componente PCF!" });
});
// Inyectar el botón en el contenedor del componente
container.appendChild(btn);

🧪 Ejecución y Pruebas en el Harness

No es necesario subir el componente a la nube cada vez que hagamos un cambio. Podemos usar el Local Test Harness para depurar en tiempo real.

• Comando: npm start

Esto abrirá una pestaña en tu navegador donde podrás interactuar con el componente, probar diferentes resoluciones y verificar que las propiedades de entrada/salida funcionen según lo esperado antes del despliegue final.

✍️ Mini Ejercicio Práctico

Objetivo: Modificar el botón creado para que cambie de color al pasar el ratón (hover).

1. Localiza el método init en tu archivo index.ts.
2. Añade un evento mouseenter para cambiar el style.backgroundColor a «blue».
3. Añade un evento mouseleave para devolver el color original.
4. Ejecuta npm start y verifica el cambio visual en el navegador.

📚 Fuentes Consultadas

• Documentación oficial de Microsoft Learn: ¿Qué es PCF?
• Guía de Power Platform CLI