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.

Controles com suporte em uma página personalizada

A criação de página personalizada atualmente oferece suporte a um subconjunto de controles do aplicativo de tela. A tabela abaixo lista os controles suportados atualmente.

¹ O controle é um novo controle moderno. O controle foi introduzido para aplicativos de tela no Teams. O controle é baseado em Biblioteca de Fluent IU encapsulados com Power Apps Component Framework.

Suporte a componentes personalizados para página personalizada

Você pode adicionar componentes personalizados de UX com pouco código (componentes de tela) e pró-código (componentes de código) ao seu ambiente e torná-los disponíveis para todos os criadores. Para artigos de extensibilidade da experiência do usuário específicos da página personalizada, 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.

Para obter mais informações:

• Galeria de componentes de tela
• 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 designer do aplicativo de tela no 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 cortará os controles quando for 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 px. Considere o preenchimento no contêiner ou controle, bem como nos 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 cortará os controles quando for 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 px. Considere o preenchimento no contêiner ou controle, bem como nos contêineres pai.

Mais informações: Criando layout responsivo.

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

1. No Container Vertical, defina Alinhar (horizontal) como Stretch

2. Insira três controles de Contêiner Horizontal dentro 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 espaço necessário, como Altura = 80.

Contêiner horizontal com dois contêineres filhos pares

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

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

Estilo de controles de página personalizados para alinhar aos controles de aplicativo baseado em 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 alvo Tamanho da fonte por 1,33 para obter o tamanho desejado.

  Tipo de Rótulo	FontSize 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ário

  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 por guias e acessibilidade do 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. Observe que, 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. Paradas de tabulação individuais dentro de elementos de agrupamento maiores, como componentes, os contêineres são navegados primeiro, antes que a guia se mova para o próximo elemento na árvore do modelo de objeto de documento (DOM).

Aqui está um exemplo de navegação com a página contendo controles, 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