Projetar uma página personalizada para seu aplicativo baseado em modelo

Este artigo fornece dicas para projetar uma página personalizada para uso em um aplicativo baseado em modelo. Uma página personalizada permite que você crie uma página semelhante a um aplicativo de tela em seu aplicativo baseado em modelo.

Controles com suporte em uma página personalizada

A criação de página personalizada dá suporte a um subconjunto de controles de aplicativo de tela. A tabela a seguir lista os controles com suporte no momento.

¹ O controle é um novo controle moderno. O controle foi introduzido para aplicativos baseados em tela no Teams. O controle é baseado na biblioteca Fluent UI, empacotado com o Power Apps Component Framework.

Suporte a componentes personalizados para página personalizada

Você pode adicionar componentes de UX personalizados low-code (componentes de canvas) e pro-code (componentes de código) ao seu ambiente e disponibilizá-los para todos os criadores. Para artigos sobre extensibilidade de UX específicos para páginas personalizadas, consulte Adicionar componentes de tela a uma página personalizada para seu aplicativo baseado em modelo e Adicionar componentes de código a uma página personalizada para seu aplicativo baseado em modelo.

Em geral, a abordagem de extensibilidade de pouco código é mais simples de construir, testar e tem um custo de manutenção menor. Recomendamos avaliar os componentes da tela primeiro e, em seguida, usar os componentes de código apenas se houver necessidade de uma personalização mais complexa e avançada.

Mais informações:

• Galeria de componentes do Canvas
• Amostras de componentes de código
• Recursos da comunidade de componentes de código

Habilitar layout responsivo com controle de contêiner

Layouts de página personalizados responsivos são definidos pela construção de uma hierarquia de controles de Contêiner de layout horizontal e Contêiner de layout vertical. Esses controles são encontrados no Power Apps Studio, em Layout na guia Inserir.

Defina a altura e a largura mínima da tela no objeto Aplicativo para evitar barras de rolagem no nível da página e usar uma barra de rolagem de corpo vertical.

MinScreenHeight=200
MinScreenWidth=200

Opcionalmente, o tamanho do design da página personalizada pode ser ajustado em Configurações>Tela com Tamanho definido como Personalizado. Em seguida, defina a Largura e a Altura como um tamanho de página personalizada para desktop mais comum, por exemplo, largura 1080 e altura 768. Alterar essa configuração depois que os controles são adicionados à tela pode fazer com que algumas propriedades de layout sejam redefinidas.

Configure o contêiner mais acima para preencher todo o espaço e redimensionar com base no espaço disponível.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Disposição horizontal de um contêiner de altura flexível

Para oferecer suporte a páginas que estão se adaptando do desktop para uma largura estreita, habilite essas propriedades em um contêiner horizontal com altura flexível. Sem essas configurações, a página recorta o controle quando fica estreita.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Os contêineres ou controles filho diretamente sob esse contêiner devem ser configurados para ter uma largura mínima que permita à página caber em uma largura de 300 pixels. Considere o espaçamento interno do contêiner ou do controle, bem como o dos contêineres pai.

Disposição vertical de um contêiner de largura flexível

Para oferecer suporte a páginas que estão se adaptando do desktop para uma largura estreita, habilite essas propriedades em um contêiner vertical com largura flexível. Sem essas configurações, a página recorta o controle quando fica estreita.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Os contêineres ou controles filho diretamente sob esse contêiner devem ser configurados para ter uma altura mínima que permita à página caber em uma largura de 300 pixels. Considere o espaçamento interno do contêiner ou do controle, bem como o dos contêineres pai.

Mais informações: Criando layout responsivo.

Contêiner vertical com cabeçalho fixo, corpo flexível, rodapé fixo

1. No Contêiner Vertical, defina Alinhamento (horizontal) como Estender

2. Insira três controles de Contêiner Horizontal dentro do Contêiner Vertical pai.

3. No primeiro e no terceiro controles de contêiner horizontal filho, defina Altura de stretch como desativada e reduza a altura para o valor do espaço necessário, como Altura = 80.

Contêiner horizontal com dois contêineres filhos iguais

1. No contêiner pai horizontal, defina Alinhar (vertical) como Esticar.

2. Insira dois controles Contêiner Vertical dentro do Contêiner Horizontal pai.

Estilização de controles de página personalizados para se alinharem aos controles de aplicativos orientados por modelo

Ao criar a página personalizada do designer de aplicativo moderno, esses recursos usam os valores padrão.

• Tema para a página personalizada. Os valores do tema para os controles usados em uma página personalizada são definidos automaticamente para corresponder ao tema azul padrão da Interface Unificada. Este tema padrão é usado no estúdio e no tempo de execução do aplicativo. A seleção explícita do tema é removida da experiência de criação de página personalizada.

• Os controles precisam usar um tamanho de fonte diferente, que se baseia em sua posição na hierarquia da página.

  Observação

  O texto da página personalizada tem um aumento de 1,33, então você precisa dividir o Tamanho da fonte alvo por 1,33 para obter o tamanho desejado.

  Tipo de Rótulo	Tamanho da fonte de destino	FontSize a ser usada
  Título da página	17	12.75
  Rótulos normais	14	10,52
  Rótulos pequenos	12	9,02

• Os controles de botão primário e secundário precisam das seguintes alterações de estilo:

  Botões primários

  Color=RGBA(255, 255, 255, 1)
  Fill=RGBA(41,114,182,1)
  Height=35
  FontWeight=Normal
  

  Botões secundários

  Color=RGBA(41,114,182,1)
  Fill=RGBA(255, 255, 255, 1)
  BorderColor=RGBA(41,114,182,1)
  Height=35
  FontWeight=Normal
  

Navegação com a tecla Tab e acessibilidade via teclado para páginas personalizadas

As páginas personalizadas seguem o mesmo design de navegação de guia que é usado pelo aplicativo baseado em modelo de hospedagem. A estrutura HTML semântica visualmente alinhada ajuda os usuários a navegar pelas páginas personalizadas sem problemas ao usar um teclado ou um leitor de tela. Ao contrário dos aplicativos de tela independentes, os controles de página personalizados e outros elementos UX não precisam de atribuições explícitas de números de guia. Os controles modernos não têm uma propriedade TabIndex e utiliza a estrutura HTML semântica para navegação.

Vários elementos, como controles, tela e componentes de código, contêineres e assim por diante, podem ser tabulados com base em sua posição no layout de página personalizado. A navegação da guia segue a navegação da ordem Z. Pontos de tabulação individuais dentro de elementos de agrupamento maiores, como componentes e contêineres, são percorridos primeiro, antes de o foco passar para o próximo elemento na árvore do Modelo de Objetos do Documento (DOM).

Aqui está um exemplo de navegação em que a página contém controles, componentes de código e componentes e contêineres de tela.

Confira também

Visão geral da página personalizada do aplicativo baseado em modelo

Usar o PowerFx em uma página personalizada

Criando layout dinâmico

Adicionar uma página personalizada ao seu aplicativo baseado em modelo

Atualizar controles do Fluent UI para controles modernos