Introdução ao uso do React em um componente do Power Apps

À medida que você cria componentes de código mais complexos, a Power Apps component framework fornece recursos integrados que você pode usar como parte de sua lógica. Usando esses recursos, você pode aprender sobre o cliente que hospeda seu componente, o dispositivo que executa o componente e outros serviços do tipo utilitário, como formatação. Para componentes que desejam interagir com os dados da tabela do Dataverse, você pode usar o recurso WebAPI para interagir com os dados.

A elaboração manual do HTML é comum para componentes simples, mas, à medida que suas necessidades se tornam mais complexas, pode ser útil usar uma biblioteca de estrutura de IU. Há muitas opções de estruturas de UI JavaScript, mas React é uma das bibliotecas mais comuns usadas com componentes de código do Power Apps.

No restante deste módulo, exploraremos esses tópicos em mais detalhes. Usaremos vários exemplos práticos em que você poderá acompanhar e criar seus componentes usando alguns desses recursos mais avançados da estrutura.

Usar o contexto do componente

O objeto de contexto contém valores configurados pelo personalizador mapeados para nomes de propriedades definidos no manifesto e nas funções utilitárias. Você pode usá-lo na lógica do componente para acessar a maioria dos recursos integrados que usaremos posteriormente neste módulo nos componentes que você criar.

O parâmetro context está disponível para componentes nos métodos init e updateView. É comum que, no método init, você preencha uma variável de nível de classe para permitir acesso fácil ao contexto em outros métodos do componente. A seguir está um exemplo de como salvar o contexto para uso posterior no método init:

export class ChoicesPicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    
    private _context: ComponentFramework.Context<IInputs>;

    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement,
    ): void {
     
        this._context = context;

        /* other logic goes here */
    }
}

O objeto de contexto do componente pode abranger diversas informações sobre o ambiente em que seu componente está sendo executado. A seguir está uma visão geral das principais propriedades disponíveis:

• client: essa propriedade fornece informações sobre o cliente (Web, Outlook ou celular), o fator forma (desktop, tablet ou telefone), se você está offline e se a rede está disponível.

• mode: essa propriedade fornece informações sobre o estado atual do componente de código. Por exemplo, se o componente está visível, se está desabilitado e qual é o tamanho alocado no momento.

• userSettings: essa propriedade fornece informações sobre o usuário atual, como LanguageId, User ID e Name. Para aplicativos baseados em modelo, a propriedade securityRoles pode ser útil para aprender as funções do usuário atual.

O objeto de contexto também fornece acesso a vários serviços integrados úteis. Estes são os mais comuns:

• device: essa propriedade fornece acesso a métodos para usar recursos nativos do dispositivo. Usando esses serviços, você pode capturar áudio, vídeo e imagens, obter valores de código de barras, identificar a geolocalização do dispositivo e selecionar arquivos.

• factory: no momento, oferece apenas métodos para trabalhar com o serviço Popup, mas poderá dar suporte a outros serviços no futuro.

• formatting: fornece métodos para auxiliar a formatar dados de acordo com a data e a hora. Esses métodos podem ajudar a manter a formatação consistente com as configurações do usuário do aplicativo de hospedagem.

• navigation: fornece métodos relacionados à navegação, como formulários abertos, URLs abertos, caixas de diálogo (alerta, confirmação, erro) e muito mais.

• resources: fornece acesso aos métodos para obter todas as informações sobre os arquivos de recursos definidos no manifesto. Esses métodos são essenciais para ajudar a localizar todo o conteúdo do componente.

• utils: fornece acesso aos metadados da tabela e também permite verificar o acesso do usuário a tabelas específicas. O método lookupObjects permite que os componentes acessem a caixa de diálogo de pesquisa padrão, possibilitando que os usuários escolham uma ou mais linhas.

• webAPI: fornece acesso básico de criação, leitura, atualização e exclusão aos dados da tabela do Dataverse.

A seguir está um exemplo de uso dos recursos pickFile do dispositivo:

 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }

É importante observar que alguns desses serviços exigem habilitação na seção de uso de recursos do manifesto para que funcionem. Alguns também podem estar disponíveis apenas em tipos específicos de aplicativos de hospedagem. Por exemplo, a webAPI está disponível apenas em aplicativos baseados em modelo e Power Pages e não está disponível para aplicativos de tela. Verifique a página de referência de serviço individual para obter detalhes.

Usar React

Há muitas estruturas de IU que você pode escolher; porém, há benefícios no uso de React. O React é preferencial, pois a plataforma subjacente do Power Apps usa o React internamente. A Power Apps component framework também tem suporte integrado para usar a mesma infraestrutura. Esse recurso significa que você não precisará empacotar manualmente as bibliotecas React e Fluent UI em cada controle. Todos os controles compartilharão uma instância e versão de biblioteca comum para fornecer uma experiência contínua e consistente.

O seguinte comando mostra como inicializar um componente e usar a estrutura React:

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

A única diferença que você pode notar é a opção -fw (ou -framework) que permite o uso do React. Essa opção fará com que os arquivos iniciais gerados incluam as configurações necessárias do React.

Mais adiante neste módulo, você criará um componente de código usando esse recurso React.