Integração de componentes React no Microsoft Power Pages
Power Pages, o novo membro da família Power Platform
A Microsoft anunciou o release do Power Pages como parte da família Power Platform, substituindo os PowerApps Portals. O Power Pages permite a criação de websites no-code ou com low-code, com resultados profissionais.
Para além disso, é possível utilizar os dados armazenados no Microsoft Dataverse, como em qualquer outro componente da Power Platform.
Mas também há espaço para o pro-code no Power Pages. Podemos criar componentes com React e Typescript que ofereçam uma experiência de utilizador mais rica e avançada, ou que ofereçam funcionalidades específicas que não são possíveis de obter com modelos Power Pages e Liquid.
Neste artigo, veremos como criar e utilizar um componente PCF, desenvolvido em React, numa página do Microsoft Power Pages.
Power Pages para os pro-coders
O Power Pages tem um estúdio de design muito intuitivo, permite-lhe criar e conceber modelos de websites, criar páginas, estilos ou utilizar dados do Dataverse como qualquer aplicação Power Platform e tudo isto através de no-code ou low-code.
O Power Pages permite-lhe criar e conceber modelos de websites
No entanto, é também uma plataforma de desenvolvimento de websites para pro-coders. No Power Pages, temos dois tipos de pro-code development:
- Liquid
- Power Apps Component framework (PCF)
Liquid é uma linguagem de modelos que nos permite modificar o HTML do nosso website de forma bastante livre. Dispõe de operadores lógicos, tipos, condições, objetos... Se o nosso objetivo é, por exemplo, obter dados do Dataverse e apresentá-los no website, sem mais lógica, é mais do que suficiente.
No entanto, o Liquid não é um framework de desenvolvimento de clientes comum. Provavelmente já aconteceu a todos nós que precisamos de criar componentes complexos que oferecem funcionalidades muito mais específicas ou avançadas que não são possíveis sem uma estrutura como React, Angular ou Vue. Ou simplesmente queremos reutilizar componentes que já existem, ou os nossos próprios componentes desenvolvidos noutros projetos.
É aqui que entra em jogo o Power Apps Component Framework (PCF).
Podemos criar componentes PCF com um framework de desenvolvimento do lado do cliente, como o React, que depois integramos nas nossas aplicações Power Platform. E, de facto, também é possível criar componentes PCF para Power Pages.
Pré-requisitos para criar um componente PCF
Para criar o componente PCF, vamos utilizar o React como framework de desenvolvimento e o TypeScript como linguagem de programação. Partimos do pressuposto de que já temos os seguintes componentes instalados:
-
Visual Studio Code
-
node.js
-
NET build tools para poder iniciar o msbuild. É necessário o Visual Studio versão 2019 ou 2022.
-
Extensão VSCode da Microsoft Power Platform CLI: Power Platform Tools
Criação do componente PCF
Vamos supor que queremos usar um componente React no nosso website Power Pages, por exemplo, esta galeria de fotos publicada em npm: react-photo-gallery. A primeira coisa a fazer é criar o componente PCF da seguinte forma:
- Abrir um VSCode
- A partir de um terminal do PowerShell, criamos uma pasta para o componente PCF.
- Em seguida, criamos o projeto para o componente PCF com o comando pac pcf init, a partir da pasta que criámos:
Já temos o projeto para o componente PCF criado, agora vamos adicionar o pacote react-photo-gallery da forma habitual, com npm ou yarn:
Quando o pac pcf init é iniciado, por defeito, um componente React é criado, o típico HelloWorld.tsx. Pode mudar o nome, adicionar novos, criar sua própria estrutura de componentes, usar componentes de classe ou componentes funcionais, HOCs, Hooks... em suma, desenvolvimento em React puro. Lembre-se apenas de referenciar o componente React pai no arquivo index.ts do componente PCF.
Neste caso, vamos usar o HelloWorld.tsx criado por defeito para a galeria de imagens. Como pode ver na imagem a seguir, ele foi simplesmente adicionado quase como está, um dos exemplos publicados na página npm de react-photo-gallery:
Podemos testar se a compilação está correcta com o npm run build e ver o resultado num ambiente sandbox com o npm start:
Agora temos o nosso componente PCF com um componente React. Os próximos passos são:
- Criar uma solução para o componente PCF.
- Importar a solução para o Dataverse.
- Adicionar o componente PCF a uma página do Power Pages.
Criar a solução do componente PCF
Para fazer o upload do nosso componente para o Dataverse, é necessário criar uma solução. Para isso, vamos criar uma pasta dentro do projeto do componente PCF e criar um projeto de solução com o comando pac solution init.
Em seguida, criamos uma referência na solução para o projeto do componente PCF (que se encontra na pasta principal) com a solução pac solution add-reference:
O próximo passo é compilar a solução. Para o efeito, é utilizado o comando msbuild do Visual Studio. A localização do msbuild tem de estar no PATH do sistema:
A opção /restore é apenas para a primeira vez que a solução é gerada, para recompilar a solução basta lançar msbuild /t:build ou simplesmente msbuild.
Com isto criamos a solução para o nosso componente. Veremos um ficheiro .zip no bin\Debug da solução:
Importar a solução para o Dataverse
Antes de poder utilizar o componente em Power Pages, é necessário carregar para o Dataverse a solução criada no passo anterior.
Pode ser carregada diretamente a partir do portal do Power Apps, ou pode também ser automatizada com o comando pac pcf push. Neste caso, utilizaremos simplesmente o portal do Power Apps para carregar a solução, seguindo estes passos:
- Aceda a https://make.powerpages.microsoft.com/
- No menu da esquerda, clique em Soluções
- Clique em Importar solução
- Será aberto um wizard, basta selecionar o ficheiro .zip da solução do componente PCF e terminar o assistente.
Demora algum tempo até que o sistema carregue e implemente a solução, em seguida, poderemos ver a nossa solução no Dataverse:
Se clicar no nome da solução, verá os componentes que esta contém. Neste caso, apenas teremos o componente PCF da galeria de fotografias. O nome com que aparece é o que teremos de utilizar mais tarde para o referenciar a partir de uma página do Power Pages:
Adicionar o componente a uma página do Power Pages
Para fazer referência ao componente PCF criado, é necessário seguir as etapas a seguir:
- Para fazer referência ao componente PCF criado, é necessário seguir as etapas a seguir: Aceda a https://make.powerpages.microsoft.com/ e abra a página do site onde pretende referenciar o controlo PCF.
- Clique em Editar código. Será aberto um Visual Studio Code online com o código do corpo da página.
- Localize o componente no HTML da página e faça-lhe referência utilizando o seu nome com a seguinte sintaxe no Liquid:
- Guarde as alterações com Ctrl-S e regresse ao separador do browser Power Pages. Verá que o componente Galeria de Imagens foi adicionado à sua página.
Finalmente, para ver o resultado final da página, clique em Preview e aqui temos a galeria de fotos em React numa página Power Pages:
Conclusão
O Microsoft Power Pages é a ferramenta ideal para a criação de websites profissionais, portais para empresas ou aplicações públicas na internet, devido às suas possibilidades de criação de websites com no-code e low-code e ao seu acesso ao Dataverse.
A isto junta-se, como já vimos, a possibilidade de criar componentes PCF pro-code em React e Typescript, com funcionalidades tão avançadas e experiências de utilizador tão ricas quanto necessitamos.