Personalizar o controle de grade editável

Este artigo explica como personalizar o controle de grade editável no Power Apps para atender a requisitos visuais e de interação específicos. Use as APIs de extensibilidade do controle de grade do Power Apps para criar um componente de código do personalizador de grade com renderizadores e editores de célula personalizados.

Captura de tela dos renderizadores de células personalizados no controle de grade editável do Power Apps.

Controle do personalizador de grade

Um personalizador de grade é um controle PCF que implementa a interface do personalizador do controle de grade do Power Apps. Essa interface permite definir o elemento React a ser renderizado quando uma célula da grade está no modo somente leitura (o renderizador de célula) ou no modo de edição (o editor de célula). Vários controles personalizadores de grade podem existir em um ambiente, mas cada grade só pode ter um controle personalizador de grade único atribuído. Você pode decidir que um controle personalizador separado é necessário para cada grade que você deseja modificar ou pode optar por reutilizar o mesmo controle personalizador para várias grades.

Implementar um controle do personalizador de grade

Para implementar um controle personalizador de grade, primeiro você precisa estar familiarizado com as etapas para criar e criar um componente de código e ter acesso ao controle de modelo.

O controle de modelo está incluído no repositório GitHub do PowerApps-Samples. Você precisa clonar ou baixar o repositório para acessar os arquivos localizados aqui: PowerApps-Samples/component-framework/resources/GridCustomizerControlTemplate

  1. Abra a pasta GridCustomizerControlTemplate usando o Visual Studio Code.

  2. Em uma janela de terminal, execute npm install.

  3. Crie seus renderizadores e editores de células personalizados.

    O código de personalização está na pasta de personalizadores .

    • CellRendererOverrides.tsx inclui personalizações de renderização de célula para cada tipo de dado.
    • CellEditorOverrides.tsx inclui personalizações de editores de célula para cada tipo de dado.

    Modifique estes arquivos para adicionar elementos React a serem renderizados quando uma célula estiver no modo somente leitura (renderizador de célula) ou no modo de edição (editor de célula).

    Cada arquivo exporta um objeto que mapeia o tipo de dados da coluna para uma função que retorna um elemento React a ser renderizado nas células desse tipo de coluna.

    /**
 * Provide cell renderer overrides per column data type.
*/
 export interface CellRendererOverrides {
   [dataType: string]: (props: CellRendererProps, rendererParams: GetRendererParams)
   => React.ReactElement | null | undefined; 
};

/**
 * Provide cell editor overrides per column data type.
*/
 export interface CellEditorOverrides {
   [dataType: string]: (defaultProps: CellEditorProps, rendererParams: GetEditorParams)
   => React.ReactElement | null | undefined; 
};

    Note

    Se a função retornar `null` ou `undefined`, o grid usará o renderizador ou editor interno para as células alvo.

  4. Depois de definir seus renderizadores e editores de células personalizados, empacote o controle do personalizador de grade e importe-o para seu ambiente de Power Apps. Como alternativa, use o comando pac pcf push .

  5. Depois de publicar o controle do personalizador de grade, abra o painel Personalizar o sistema no menu Configurações > Personalizações.

    Captura de tela do menu Configurações e Personalizações usado para abrir Personalizar o sistema.

  6. No nó de entidades, selecione uma entidade à qual seu controle personalizador se destina (por exemplo, Conta).

  7. No painel direito, selecione a guia Controles .

    Captura de tela da guia Controles da entidade selecionada em Personalizar o sistema.

  8. Na lista Controles, adicione o controle de grade Power Apps.

    Captura de tela da lista de Controles usada para adicionar o controle de grade do Power Apps.

  9. No painel Propriedades, defina a propriedade Controle do personalizador como o nome lógico completo do componente de código do personalizador da grade.

    Nome lógico completo = {publisher prefix}_{namespace}.{control name}

    Captura de tela de um componente de código do personalizador da grade atribuído à propriedade de controle do Personalizador.

  10. Salve e publique suas personalizações para essa entidade.

  11. Teste a personalização abrindo a grade principal da entidade personalizada.

  12. Repita as etapas de 6 a 11 para quaisquer outras entidades cuja grade precise de um controle do personalizador de grade.

Práticas recomendadas

  • Renderizadores e editores de células são componentes da interface do usuário. Não os use para alterar dados ou metadados da grade.
  • Os controles personalizadores devem ser leves e rápidos para que não afetem o desempenho geral da grade.
  • Para manter a consistência de design, siga os princípios de design do Fluent e use controles Fluent em seus personalizadores.
  • Verifique se o renderizador ou editor personalizado está acessível.
  • A função personalizador deve ser pura, pois a grade a chama várias vezes para obter elementos personalizados e espera que o valor retornado seja consistente.
  • A grade pode descartar um elemento do personalizador a qualquer momento e solicitar um novo a qualquer momento. Certifique-se de liberar qualquer estado interno ao desmontar para evitar vazamentos de memória.
  • Não use renderizadores para substituir os valores na grade, pois o servidor não usa os novos valores para filtragem ou classificação.

Example

Você pode encontrar um exemplo de um controle de grade editável personalizado aqui: grade editável personalizada.

Consulte também

visão geral da estrutura de componentes Power Apps
Criar seu primeiro componente de código
Conheça a estrutura de componentes do Power Apps

  • Last updated on