Integración de componentes React en Microsoft Power Pages
Power Pages, el nuevo miembro de la familia Power Platform
Microsoft anunció la reléase de Power Pages como parte de la familia Power Platform, que reemplazaba a PowerApps Portals. Power Pages permite la creación de sitios Web no-code o low-code con resultados profesionales.
Además, es posible utilizar los datos almacenados en Microsoft Dataverse, como en cualquier otro componente de Power Platform.
Pero en Power Pages también hay sitio para el pro-code. Podemos crear componentes con React y Typescript que ofrezcan una experiencia de usuario más rica y avanzada, o que ofrezcan una funcionalidad específica que no es posible conseguir con las plantillas de Power Pages y Liquid.
En este artículo veremos cómo crear y usar un componente PCF, desarrollado en React, en una página de Microsoft Power Pages.
Power Pages para los pro-coders
Power Pages tiene un estudio de diseño muy intuitivo, permite crear y diseñar plantillas de sitio, crear páginas, estilos o utilizar datos del Dataverse como cualquier aplicación de Power Platform y todo esto mediante no-code o low-code.
Power Pages permite crear y diseñar plantillas de sitio, crear páginas, estilos o utilizar datos del Dataverse
Sin embargo, también es una plataforma de desarrollo de sitios web para los pro-coders. En Power Pages disponemos de dos tipos de pro-code development:
- Liquid
- Power Apps Component framework (PCF)
Liquid es un lenguaje de plantilla que permite modificar el HTML de nuestro sitio web con bastante libertad. Posee operadores lógicos, tipos, condiciones, objetos… Si nuestro objetivo es, por ejemplo, obtener datos del Dataverse y mostrarlos en el sitio web, sin más lógica, es más que suficiente.
Sin embargo, Liquid no es un framework de desarrollo de cliente al uso. Seguramente a todos nos ha pasado que necesitamos crear componentes complejos que ofrezcan una funcionalidad mucho más específica o avanzada que no es posible sin un framework como React, Angular o Vue. O simplemente queremos reutilizar componentes que ya existen, o componentes propios desarrollados en otros proyectos.
Aquí entran en juego los Power Apps Component framework (PCF).
Podemos crear componentes PCF con un framework de desarrollo de cliente, como React, que después integraremos en nuestras aplicaciones Power Platform. Y efectivamente, también es posible crear componentes PCF para Power Pages.
Prerrequisitos para crear un componente PCF
Para crear el componente PCF, vamos a utilizar React como framework de desarrollo y TypeScript como lenguaje de programación. Partimos de la base de que ya tenemos instalado lo siguiente:
- Visual Studio Code
- node.js
- .NET build tools para poder lanzar msbuild. Es necesario la versión de Visual Studio 2019 o 2022
- La extensión de VSCode de Microsoft Power Platform CLI: Power Platform Tools
Creación del componente PCF
Supongamos que queremos usar un componente React en nuestro sitio de Power Pages, por ejemplo, esta galería de fotos publicada en npm: react-photo-gallery. Lo primero es crear el componente PCF de la siguiente manera:
- Abrimos un VSCode
- Desde un terminal de PowerShell, creamos una carpeta para el componente PCF.
- A continuación, creamos el proyecto para el componente PCF con el comando pac pcf init, desde dentro de la carpeta que hemos creado:
Ya tenemos el proyecto para el componente PCF creado, ahora añadimos el paquete react-photo-gallery de la forma habitual, con npm o yarn:
Al lanzar pac pcf init, por defecto se ha creado un componente React por defecto, el típico HelloWorld.tsx. Se puede cambiar el nombre, añadir nuevos, crear nuestra propia estructura de componentes, usar componentes de clase o funcionales, HOCs, Hooks… en definitiva, desarrollo puro en React. Sólo hay que acordarse de referenciar al componente React padre desde el archivo index.ts del componente PCF.
En este caso, vamos a utilizar el HelloWorld.tsx creado por defecto para la galería de imágenes. Como podéis ver en la siguiente imagen, simplemente se ha añadido prácticamente tal cual, uno de los ejemplos publicados en la página npm de react-photo-gallery:
Podemos probar que la compilación es correcta con npm run build y ver el resultado en un entorno sandbox con npm start:
Ya tenemos nuestro componente PCF con un componente React. Los siguientes pasos son:
- Crear una solución para el componente PCF.
- Importar la solución en el Dataverse.
- Añadir el componente PCF a una página de Power Pages.
Crear la solución del componente PCF
Para poder subir nuestro componente al Dataverse hay que crear una solución. Para ello, vamos a crear una carpeta dentro del proyecto del componente PCF y a crear un proyecto de solución con el comando pac solution init.
A continuación, creamos en la solución una referencia al proyecto del componente PCF (que está justo en la carpeta padre) con pac solution add-reference:
Lo siguiente es compilar la solución. Para ello, se usa el comando msbuild de Visual Studio. La ubicación de msbuild tiene que estar en el PATH del sistema:
La opción /restore solo es para la primera vez que se genera la solución, para recompilar la solución basta con lanzar msbuild /t:build o simplemente msbuild.
Con esto hemos creado la solución de nuestro componente. Veremos un archivo .zip en la ruta bin\Debug de la solución:
Importar la solución al Dataverse
Antes de poder usar el componente en Power Pages, es necesario subir al Dataverse la solución que se ha creado en el paso anterior.
Se puede subir directamente desde el portal de Power Apps, o también se puede automatizar con el comando pac pcf push. En este caso, simplemente vamos a utilizar el portal de Power Apps para subir la solución, siguiendo estos pasos:
- Acceder a https://make.powerpages.microsoft.com/
- En el menú de la izquierda, pulsar sobre Soluciones
- Pulsar sobre Importar solución
- Se abre un wizard, simplemente hay que seleccionar el archivo.zip de la solución del componente PCF y terminar el asistente.
El sistema tarda un poco en subir y desplegar la solución, después podremos ver nuestra solución en el Dataverse:
Si se pulsa sobre el nombre de la solución, dentro vemos los componentes que contiene. En este caso únicamente tendremos el componente PCF de la galería de fotos. El nombre con el que aparece es el que tenemos que utilizar después para referenciarlo desde una página de Power Pages:
Añadir el componente a una página de Power Pages
Para referenciar el componente PCF creado, hay que seguir los siguientes pasos:
- Acceder a https://make.powerpages.microsoft.com/ y abrir la página del sitio en donde se quiere referenciar el control PCF
- Pulsar sobre Editar código. Se abrirá un Visual Studio Code online con el código del cuerpo de la página
- Ubicar el componente en el HTML de la página y referenciarlo utilizando su nombre con la siguiente sintaxis en Liquid:
- Guardar los cambios con Ctrl-S y volver a la pestaña del navegador de Power Pages. Veremos que se ha añadido en nuestra página el componente Galería de imágenes.
Por último, para ver el resultado final de la página, pulsamos sobre Vista previa y aquí tenemos la galería de fotos en React en una página de Power Pages:
Conclusión
Microsoft Power Pages es la herramienta idónea para crear sitios web profesionales, portales corporativos o aplicaciones públicas en internet, debido a sus posibilidades de creación de sitios mediante no-code y low-code y su acceso al Dataverse.
A esto se le añade, como hemos visto, la capacidad de crear componentes PCF pro-code en React y Typescript, con funcionalidades tan avanzadas y con experiencias de usuarios tan ricas como necesitemos.