Conceba uma página personalizada para a sua aplicação condicionada por modelo

Este artigo fornece dicas para conceber uma página personalizada para ser usada numa aplicação condicionada por modelo. Uma página personalizada permite-lhe criar uma página semelhante a uma aplicação orientada por modelo na sua aplicação orientada por modelo.

Controlos suportados numa página personalizada

A autoria personalizada de páginas suporta um subconjunto de controlos de aplicações canvas. A tabela seguinte lista os controlos atualmente suportados.

¹ O comando é um comando novo moderno. O comando foi introduzido para aplicações de tela no Teams. O controlo baseia-se na biblioteca Fluent UI, envolvida em Power Apps Component Framework.

Suporte de componentes personalizados para página personalizada

Pode adicionar ao seu ambiente componentes personalizados de experiência do utilizador (UX), tanto de baixo código (componentes de tela) como de código profissional (componentes de código), e disponibilizá-los a todos os criadores. Para artigos sobre extensibilidade de UX específicos de páginas personalizadas, consulte adicionar componentes do canvas a uma página personalizada para a sua aplicação orientada por modelos e adicionar componentes de código a uma página personalizada para a sua aplicação orientada por modelos.

Em geral, a abordagem de extensibilidade de pouco código é mais simples de compilar, testar e tem um custo de manutenção mais baixo. Recomendamos avaliar primeiro os componentes de tela e, em seguida, usar 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
• Amostra de componentes de código
• Recursos de comunidade de componentes de código

Ativar o layout responsivo com controlo do contentor

Os layouts de página personalizados responsivos são definidos através da criação de uma hierarquia de controlos contentor de esquema horizontal e contentor de esquema vertical. Esses controlos são encontrados no Power Apps Studio em Esquema no separador Inserir .

Defina a altura e largura mínimas do ecrã no objeto App para impedir barras de deslocação ao nível da página e usar uma barra de deslocação vertical no corpo da página.

MinScreenHeight=200
MinScreenWidth=200

Opcionalmente, o tamanho da conceção de página personalizada pode ser ajustado em Definições>Ecrã com Tamanho definido como Personalizado. Em seguida, defina a Largura e Altura como um tamanho de página personalizado de ambiente de trabalho mais típico, como a largura de 1080 e a altura de 768. Alterar esta definição depois de adicionar controlos ao ecrã pode fazer com que algumas propriedades de esquema sejam repostas.

Defina o contentor superior para encher todo o espaço e redimensione com base no espaço disponível.

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

Moldagem horizontal de um contentor de altura flexível

Para permitir que as páginas se adaptem de ecrãs de computador a larguras estreitas, ative estas propriedades num contentor horizontal com altura flexível. Sem estas definições, a página corta o controlo quando está estreita.

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

Os recipientes ou comandos subordinados diretamente debaixo deste contentor devem ser definidos para ter uma largura mínima que permita que a página se ajuste numa largura de 300 pixeis. Considere o espaçamento interno do contentor ou do controlo, bem como o dos contentores-pai.

Moldagem vertical de um contentor de largura flexível

Para permitir que as páginas se ajustem de um ecrã de computador para uma largura reduzida, ative estas propriedades num contentor vertical com largura flexível. Sem estas definições, a página corta o controlo quando está estreita.

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

Os contentores ou controlos subordinados diretamente sob este contentor devem ser definidos para terem uma altura mínima que permita que a página caiba numa largura de 300 píxeis. Considere o espaçamento interno do contentor ou do controlo, bem como o dos contentores-pai.

Mais informações: Criar um layout responsivo.

Recipiente vertical com cabeçalho fixo, corpo flexível, rodapé fixo

1. No Recipiente Vertical, defina Alinhamento (horizontal) como Stretch

2. Insira três comandos de Recipiente horizontal dentro do Recipiente vertical principal.

3. No primeiro e no terceiro controlos do contentor horizontal filho, desative a opção Esticar altura e reduza a altura para o espaço necessário, por exemplo, Altura=80.

Contentor horizontal com dois contentores filhos iguais

1. No recipiente horizontal principal, defina Alinhamento (vertical) como Stretch.

2. Insira dois comandos de Recipiente vertical dentro do Recipiente horizontal principal.

Aplicar estilo a controlos de página personalizados para se alinharem com os controlos de aplicações condicionadas por modelo

Ao criar a página personalizada do estruturador de aplicações moderno, estas funcionalidades utilizam os valores predefinidos.

• Tema para a página personalizada. Os valores temáticos dos comandos utilizados numa página personalizada são automaticamente definidos para corresponder ao tema azul predefinido do Interface Unificada. Este tema predefinido é utilizado tanto no estúdio como no runtime da aplicação. A seleção de temas explícitos é removida da experiência de criação de página personalizada.

• Os comandos devem usar um tamanho de letra diferente, baseado na sua posição na hierarquia da página.

  Nota

  O texto da página personalizada tem um aumento de escala de 1,33, por isso tem de dividir o objetivo FontSize por 1,33 para obter o tamanho desejado.

  Tipo de etiqueta	Tamanho de letra alvo	Tamanho de letra a utilizar
  Título da página	17	12.75
  Etiquetas normais	14	10,52
  Etiquetas pequenas	12	9.02

• Os comandos de botões primários e secundários 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 por separador e acessibilidade do teclado para páginas personalizadas

As páginas personalizadas seguem o mesmo design de navegação por separador que é usado pela aplicação condicionada por modelo de alojamento. A estrutura semântica HTML alinhada visualmente ajuda os utilizadores a navegar sem erros em páginas personalizadas quando usam um teclado ou um leitor de ecrã. Ao contrário das aplicações de ecrã autónomas, os controlos de página personalizados e outros elementos de UX não precisam de atribuição explícita de números de tabulação. Os comandos modernos não têm uma propriedade TabIndex e utilizam a estrutura semântica HTML para navegação.

Vários elementos, como controlos, área de desenho e componentes de código, contentores, e assim por diante, podem ser percorridos com a tecla Tab com base na sua posição na disposição personalizada da página. A navegação por separador segue a navegação por ordem Z. Os pontos de tabulação individuais dentro de elementos de agrupamento maiores, como componentes e contentores, são percorridos primeiro antes de a tecla Tab avançar para o elemento seguinte na árvore do Modelo de Objetos do Documento (DOM).

Eis um exemplo de navegação com a página que contém controlos, código e componentes e contentores da área de desenho.

Consulte também

Descrição geral da página personalizada de uma aplicação baseada em modelos

Utilizar o Power Fx numa página personalizada

Criar estrutura responsiva

Adicione uma página personalizada à sua aplicação condicionada por modelo

Atualize os controlos da interface Fluent para controlos modernos