Arquitetura do Power Apps component framework
Você pode implementar componentes de código usando HTML, CSS e TypeScript. Embora você não tenha que usar nenhuma estrutura de interface do usuário em particular, React e Fluent UI são escolhas populares.
Composição de componentes
A imagem a seguir mostra as três áreas principais de um componente do Power Apps: um arquivo de entrada de manifesto, sua implementação e quaisquer outros arquivos de recursos de que o componente possa precisar.
Um manifesto é usado para identificar todas as propriedades disponíveis para uso pelo aplicativo que hospeda o componente. Quando os criadores de aplicativos usam o componente de código, eles podem definir estaticamente um valor para as propriedades. Ou, então, podem vinculá-lo dinamicamente a uma das colunas de dados disponíveis no aplicativo. As propriedades permitem que o aplicativo e o componente se comuniquem sobre os dados sem que o aplicativo precise entender a implementação do componente.
Quando você cria um componente, seu código precisa implementar uma interface que forneça uma maneira consistente para o aplicativo de hospedagem interagir com seu componente. Seu componente de código faz isso implementando a interface StandardControl.
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Ciclo de vida de componente do Power Apps
Ao desenvolver um componente, você implementa todos ou alguns dos métodos da interface StandardControl na tabela a seguir, de acordo com os requisitos do componente. Esses métodos permitem que o runtime de hospedagem gerencie o ciclo de vida do componente de código.
| Método | Descrição |
|---|---|
| init | Obrigatório. Use esse método para inicializar a instância do componente. Os componentes podem iniciar chamadas de servidor remoto e outras ações de inicialização. Não é possível inicializar valores de conjuntos de dados com esse método; você deve usar o método updateView. |
| updateView | Obrigatório. Esse método é chamado quando qualquer valor no conjunto de propriedades do componente é alterado. Se você tiver iniciado alguma solicitação de carregamento de dados no método init que possa não ter sido concluída, seu código deverá lidar com esse estado e fornecer um indicador visual de carregamento. |
| getOutputs | Opcional. Chamado pela estrutura antes do recebimento de novos dados. Use esse método ao gerenciar dinamicamente propriedades associadas em um controle. |
| destroy | Obrigatório. Invocado quando o componente precisa ser removido da árvore DOM (Modelo de Objeto do Documento). Use o método destroy para limpeza e liberação de qualquer memória que o componente use. Por exemplo, se você estiver usando React, use ReactDOM.unmountComponentAtNode no método destroy. Isso evita quaisquer problemas de desempenho causados pelo carregamento e descarregamento de componentes de código em determinada sessão do navegador. |
Esses métodos são invocados por meio de um processo de runtime de estrutura em um ciclo de vida padronizado, conforme mostrado na ilustração a seguir.
Na parte superior da imagem, o estrutura chama a função init() do componente. Se seu componente for interativo, você também precisará notificar o host de que a saída do componente foi alterada chamando o método notifyOutputChanged.
O runtime da estrutura chama o método getOutputs a fim de obter valores para todas as propriedades vinculadas do componente.
Em seguida, o runtime notifica o host, que valida a saída. Se a saída for válida, chamará o método updateView em seu componente. Se não for válida por qualquer motivo (por exemplo, uma regra de negócios considerou a nova saída inválida), chamará seu método updateView e passará o valor antigo, juntamente com uma mensagem de erro. Em qualquer um dos cenários, o componente pode atualizar a interface do usuário e exibir uma mensagem de erro, conforme apropriado.