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

Artigo
03/15/2023

Este artigo fornece dicas para projetar uma página personalizada para uso em um aplicativo baseado em modelo.

Importante

As páginas personalizadas são um novo recurso com mudanças significativas no produto e atualmente têm uma série de limitações conhecidas descritas em Problemas Conhecidos da Página Personalizada.

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.

Control	Tipo de Controle	Notes
Rótulo¹	Tela
Caixa de texto¹	Entrada
Seletor de data¹	Entrada
Botão¹	Entrada
Caixa de Combinação¹	Entrada
Caixa de Seleção¹	Entrada
Ativar/desativar ¹	Entrada
Grupo de opções¹	Entrada
Slider¹	Entrada
Classificação¹	Entrada
Contêiner Vertical	Layout	Novo contêiner de layout horizontal responsivo
Contêiner Horizontal	Layout	Novo contêiner de layout horizontal responsivo
Editor de Rich Text	Entrada
Galeria	Lista
Ícone	Mídia
Imagem	Mídia
Editar Formulário	Entrada
Exibir Formulário	Entrada
Componentes de código	Personalizada	Adicionar componentes de código a uma página personalizada
Componentes de tela (versão preliminar)	Personalizada	Adicionar componentes de tela a uma página personalizada

¹ 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:

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

No Container Vertical, defina Alinhar (horizontal) como Stretch
Insira três controles de Contêiner Horizontal dentro Contêiner Vertical pai
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

No contêiner horizontal pai, defina Alinhar (vertical) como Stretch.
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

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

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.

Observação

A sobreposição de controles e elementos na página personalizada não terá seu DOM mesclado, portanto, as paradas de tabulação podem ficar fora de sincronia com o layout visual. O mesmo ocorre para o posicionamento de elemento dinâmico usando fórmulas.