Deseñar unha páxina personalizada para a súa aplicación controlada por modelos

Este artigo ofrece consellos para deseñar unha páxina personalizada para usar nunha aplicación baseada en modelos.

Controis compatibles nunha páxina personalizada

A creación de páxinas personalizadas admite actualmente un subconxunto de controis de aplicacións de lenzo. A táboa seguinte enumera os controis compatibles actualmente.

¹ O control é un novo control moderno. O control foi introducido para aplicacións de lenzo en Teams. O control baséase na Biblioteca Fluent UI incluída con Power Apps Component Framework.

Compoñentes personalizados compatibles para a páxina personalizada

Pode engadir compoñentes de experiencia de usuario personalizados de pouco código (compoñentes de lenzo) e procódigo (compoñentes de código) ao seu contorno e poñelos a disposición de todos os fabricantes. Para obter artigos sobre a extensibilidade da experiencia de usuario específicos para páxina personalizadas, consulte engadir compoñentes de lenzo a unha páxina personalizada para a súa aplicación baseada en modelos e engadir compoñentes de código a unha páxina personalizada para a súa aplicación baseada en modelos.

En xeral, o enfoque de extensibilidade de pouco código é máis sinxelo de construír, probar e ten un custo de mantemento menor. Recomendamos avaliar primeiro os compoñentes de lenzo e despois empregar compoñentes de código só se é necesario unha personalización máis complexa e avanzada.

Máis información:

• Galería de compoñentes de lenzo
• Exemplos de compoñentes de código
• Recursos da comunidade sobre compoñentes de código

Activar o deseño con capacidade de resposta co control de contedores

Os deseños de páxina personalizada con capacidade de resposta defínense construíndo unha xerarquía de controis de Contedor de deseño horizontal e Contedor de deseño vertical. Estes controis atópanse no deseñador de aplicacións de lenzo baixo Deseño no separador Inserir.

Establece a altura e o ancho mínimos da pantalla no obxecto da Aplicación para evitar barras de desprazamento a nivel de páxina e usar unha barra de desprazamento do corpo vertical.

MinScreenHeight=200
MinScreenWidth=200

Opcionalmente, pódese axustar o tamaño do deseño da páxina personalizada en Configuración > Mostrar con Tamaño configurado en Personalizado. A continuación, configure Anchura e Altura a un tamaño de páxina personalizado de escritorio máis típico como o ancho de 1080 e o alto de 768. Cambiar esta configuración despois de engadir controis á pantalla pode provocar que se restablezan algunhas propiedades do deseño.

Estableza o recipiente superior para encher todo o espazo e cambie o tamaño segundo o espazo dispoñible.

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

Envoltura horizontal dun recipiente de altura flexible

Para admitir que as páxinas se axusten desde o escritorio a un ancho reducido, active estas propiedades nun contedor horizontal cunha altura flexible. Sen esta configuración, a páxina recortará os controis cando a páxina sexa estreita.

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

Os contedores ou controis secundarios situados directamente baixo este contedor deben establecerse para que teñan un ancho mínimo que permita que a páxina se axuste a un ancho de 300 px. Considere o acolchado do recipiente ou control, así como os recipientes principais.

Envoltura vertical dun recipiente de ancho flexible

Para admitir que as páxinas se axusten desde o escritorio a un ancho reducido, active estas propiedades nun contedor vertical cunha largura flexible. Sen esta configuración, a páxina recortará os controis cando a páxina sexa estreita.

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

Os contedores ou controis secundarios situados directamente baixo este contedor deben establecerse para que teñan unha altura mínima que permita que a páxina se axuste a un ancho de 300 px. Considere o acolchado do recipiente ou control, así como os recipientes principais.

Máis información: Construír un deseño con capacidade de resposta.

Contedor vertical con cabeceira fixa, corpo flexible, pé de páxina fixo

1. No Contedor vertical, defina Aliñar (horizontal) en Estirar

2. Insira tres controis de Contedor horizontal dentro do Contedor vertical principal

3. No primeiro e terceiro control do contedor horizontal secundario, configure desactive a Altura de estiramento e reduza a altura ao espazo necesario, como Altura=80.

Contedor horizontal con dous contedores secundarios nivelados

1. No contedor vertical principal, defina Aliñar (vertical) en Estirar.

2. Insira dous controis de Contedor vertical dentro do Contedor horizontal principal.

Deseñar controis de páxina personalizados para aliñalos aos controis de aplicacións baseadas en modelos

Ao crear a páxina personalizada a partir do deseñador moderno de aplicacións, estas funcións utilizan os valores predeterminados.

• Tema para a páxina personalizada. Os valores do tema para os controis empregados nunha páxina personalizada axústanse automaticamente para que coincidan co tema azul predeterminado da Interface unificada. Este tema predeterminado úsase tanto no estudo como no tempo de execución da aplicación. A selección explícita de temas elimínase da experiencia de creación de páxinas personalizadas.

• Os controis teñen que usar un tamaño de letra diferente, que se basea na súa posición na xerarquía da páxina.

  Nota

  O texto da páxina personalizada ten unha ampliación de 1,33 polo que cómpre dividir o Tamaño de letra de destino por 1,33 para obter o tamaño desexado.

  Tipo de etiqueta	FontSize de destino	FontSize que se vai usar
  Título da páxina	17	12.75
  Etiquetas normais	14	10.52
  Etiquetas pequenas	12	9.02

• Os controis dos botóns primarios e secundarios precisan os seguintes cambios de estilo:

  Botóns principais

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

  Botóns secundarios

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

Navegación por pestanas e accesibilidade do teclado para páxinas personalizadas

As páxinas personalizadas seguen o mesmo deseño de navegación de pestanas que usa a aplicación baseada en modelos de hospedaxe. A estrutura HTML semántica aliñada visualmente axuda aos usuarios a navegar sen problemas polas páxinas personalizadas cando usan un teclado ou un lector de pantalla. Teña en conta que, a diferenza das aplicacións de lenzo autónomas, os controis de páxina personalizada e outros elementos da experiencia de usuario non precisan asignacións de números de pestanas explícitas. Os controis modernos non teñen unha propiedade TabIndex e utilizan a estrutura HTML semántica para a navegación.

Pódense separar varios elementos como controis, compoñentes de lenzo e código, contedores, etc. en función da súa posición no deseño da páxina personalizada. A navegación dos separadores segue a navegación por orde Z. Paradas en separadores individuais dentro de elementos de agrupacións máis grandes, como compoñentes; os contedores navéganse primeiro antes de que o separador se desprace cara ao seguinte elemento da árbore do modelo de obxecto de documento (DOM).

Aquí ten un exemplo de navegación coa páxina que contén controis, código e compoñentes e contedores de lenzo.

Consulte tamén

Visión xeral da páxina personalizada dunha aplicación controlada por modelos

Usar Power Fx na páxina personalizada

Creación dun deseño con capacidade de resposta

Engadir unha páxina personalizada á súa aplicación controlada por modelos