Componentes de código

Componentes de código são componentes de solução que você pode empacotar em um arquivo de solução e importar para ambientes diferentes. Use-as para distribuir experiências de aplicativo aprimoradas entre ambientes. Saiba como empacotar e distribuir extensões usando soluções.

Captura de tela de um componente de código que permite que os usuários exibam e trabalhem com dados do aplicativo.

Você pode incluir componentes de código em uma solução e importar a solução para um ambiente Microsoft Dataverse. Depois de importar a solução que contém componentes de código, os administradores do sistema e os personalizadores do sistema podem configurar colunas, subgrids, exibições e subgrids de painel para usar em vez de componentes padrão. Você pode adicionar esses componentes de código a aplicativos baseados em modelo e aplicativos de tela.

Os componentes de código consistem em três elementos:

Note

A definição e a implementação de componentes de código por meio da estrutura de componentes do Power Apps são as mesmas para aplicativos baseados em modelo e aplicativos de tela. A única diferença entre ambos os aplicativos é a parte de configuração.

Manifest

O manifesto é o ControlManifest.Input.xml arquivo de metadados que define um componente. É um documento XML que descreve:

  • O nome do componente.
  • O tipo de dados que você pode configurar, um field ou um dataset.
  • Todas as propriedades que você pode configurar no aplicativo ao adicionar o componente.
  • Uma lista de arquivos de recurso de que o componente precisa.

Quando um usuário configura um componente de código, os dados no arquivo de manifesto filtram os componentes disponíveis para que apenas componentes válidos para o contexto estejam disponíveis para configuração. As propriedades definidas no arquivo de manifesto de um componente são exibidas como colunas de configuração, para que o usuário que configura o componente possa especificar os valores. Esses valores de propriedade estão disponíveis para o componente em runtime. Para obter mais informações, consulte a referência do esquema de manifesto.

Implementação do componente

Use TypeScript para implementar componentes de código. Cada componente de código deve incluir um objeto que implemente os métodos descritos na interface do componente de código. A CLI do Power Platform gera automaticamente um arquivo index.ts que inclui implementações de stub para esses métodos. Use o comando pac pcf init para gerar esse arquivo, que inclui os principais métodos stub.

O objeto implementa os seguintes métodos:

Esses métodos controlam o ciclo de vida do componente de código.

Carregamento de página

Quando a página é carregada, o aplicativo precisa de um objeto com o qual trabalhar. Usando os dados do arquivo de manifesto, o código obtém o objeto chamando:

var obj =  new <"namespace on manifest">.<"constructor on manifest">();

Se os valores de namespace e construtor do manifesto forem SampleNameSpace e LinearInputComponent , respectivamente, o código para instanciar o objeto terá esta aparência:

var controlObj = new SampleNameSpace.LinearInputComponent();

Quando a página está pronta, ela inicializa o componente chamando o método init com um conjunto de parâmetros.

controlObj.init(context,notifyOutputChanged,state,container);
Parameter Description
contexto Contém todas as informações sobre como o componente está configurado e todos os parâmetros que você pode usar dentro do componente, juntamente com as APIs da estrutura de componentes Power Apps. Por exemplo, use context.parameters.<"property name from manifest"> para acessar a propriedade de entrada.
notifyOutputChanged Alerta a estrutura sempre que o componente de código tiver novas saídas prontas para serem recuperadas de forma assíncrona.
estado Contém dados de componente da carga da página anterior na sessão atual se o componente os armazenou explicitamente anteriormente usando o método setControlState .
contêiner Um elemento html div ao qual desenvolvedores e criadores de aplicativos podem acrescentar os elementos HTML para a interface do usuário que define o componente.

O usuário altera os dados

Quando um usuário interage com seus componentes para alterar dados, seu componente deve chamar o método passado como o parâmetro notifyOutputChanged no método init . Quando você usa esse método, a plataforma responde chamando o método getOutputs . O método getOutputs retorna valores que incluem as alterações feitas pelo usuário. Para um field componente, esse valor normalmente é o novo valor para o componente.

Dados de alterações do aplicativo

Se a plataforma alterar os dados, ela chamará o método updateView do componente e passará o novo objeto de contexto como um parâmetro. Implemente esse método para atualizar os valores exibidos no componente.

Fechamento de página

Quando um usuário se afasta da página, o componente de código perde o escopo e limpa toda a memória alocada nessa página para os objetos. No entanto, alguns métodos podem permanecer e consumir memória, com base no mecanismo de implementação do navegador. Normalmente, esses métodos são manipuladores de eventos. Se o usuário quiser armazenar essas informações, ele deverá implementar o método setControlState para que as informações fiquem disponíveis na próxima vez na mesma sessão.

Os desenvolvedores devem implementar o método destroy , que é chamado quando a página é fechada, para remover qualquer código de limpeza, como manipuladores de eventos.

Resources

O nó de recurso no arquivo de manifesto refere-se aos recursos que o componente requer para implementar sua visualização. Cada componente de código deve ter um arquivo de recurso para construir sua visualização. A ferramenta gera o index.ts arquivo como um code recurso. Deve haver pelo menos um recurso de código.

Defina arquivos de recurso adicionais no manifesto para incluir:

  • Ficheiros CSS
  • recursos da Web de imagem
  • recursos da Web resx para localização

Mais informações: elemento de recursos

Criar e construir um componente de código

  • Last updated on